
วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: ก่อนที่คุณจะเริ่มเรียนรู้
Hook เป็นฟีเจอร์ใหม่ของ React 16.8 ซึ่งถูกใช้เป็นพิเศษในส่วนประกอบที่ใช้งานได้ และนิยมนำไปใช้งานจริง
Hooks ถูกนำมาใช้เป็นพิเศษเพื่อร่วมมือกับการพัฒนาส่วนประกอบที่ใช้งานได้ hooks สะดวกสำหรับการพัฒนาและง่ายกว่าสำหรับนักพัฒนาที่จะเข้าใจโค้ด
ข้างต้นเป็นบทสรุปส่วนตัวโดยย่อ สำหรับเหตุผลเพิ่มเติม โปรดดูที่เว็บไซต์อย่างเป็นทางการของ react:
https://react.docschina.org/docs/hooks-intro html#motivation
ในโค้ด:
React.useState(0) เทียบเท่ากับสิ่งนี้ในองค์ประกอบของคลาส การเพิ่มตัวแปรค่าแอตทริบิวต์
ให้กับ state จะเทียบเท่ากับ this.state ในองค์ประกอบของคลาสสามารถใช้
ค่าของตัวแปร
setVariable ได้เพื่อแก้ไขค่าของตัวแปรซึ่งสามารถเทียบเท่ากับ this.setState ในองค์ประกอบคลาส
นำเข้า React (useState) จาก 'react'
ส่งออกฟังก์ชันเริ่มต้น useState_Demo() {
const [variable, setVariable] = useState(0);// เมื่อผ่าน destructuring configuration เราจะได้ตัวแปรและ setVariable
ฟังก์ชั่นการเปลี่ยนแปลงตัวแปร () {
setVariable((variable) => ตัวแปร +1) //พารามิเตอร์ที่ส่งผ่านในการเรียกกลับของ setVariable เป็นตัวแปร
-
แสดงผล (
<div>
<button onclick = {change}>คลิกฉันเพื่อสร้างตัวแปร+1</button>
</div>
-
} ในโค้ด :
ดังที่เห็นได้จากโค้ดต่อไปนี้ การใช้ useEffect จะแทนที่การใช้ ComponentDidMoun, ComponentDidUpdate และ ComponentWillUnmount ในองค์ประกอบของคลาส
Import React (useState, UseEffect) จาก 'react'
ส่งออกฟังก์ชันเริ่มต้น useState_Demo() {
const [variable, setVariable] = useState(0);// เมื่อผ่าน destructuring configuration เราจะได้ตัวแปรและ setVariable
useEffect(() => {
//การส่งคืนนี้จะถูกเรียกเมื่อข้อมูลที่ตรวจสอบโดยส่วนประกอบเปลี่ยนแปลงหรือเมื่อถูกถอนการติดตั้ง เมื่อถูกถอนการติดตั้ง การเรียกอาจเทียบเท่ากับcomponentWillUnmount hook return () => {
console.log ('ส่วนประกอบถูกถอนการติดตั้งแล้ว')
-
}, [ตัวแปร])//พารามิเตอร์ตัวที่สองถูกส่งผ่าน [ตัวแปร] ซึ่งหมายความว่าตรวจพบการเปลี่ยนแปลงการอัปเดตของตัวแปร เมื่อตัวแปรเปลี่ยนแปลง การเรียกกลับ useEffect จะถูกดำเนินการอีกครั้ง // พารามิเตอร์ตัวที่สองถูกส่งผ่าน [] ซึ่งหมายความว่าไม่มีใคร การตรวจจับดำเนินการการเรียกกลับ useEffect เพียงครั้งเดียว ซึ่งเทียบเท่ากับ hook ของคอมโพเนนต์DidMount //พารามิเตอร์ตัวที่สองไม่ผ่านพารามิเตอร์ ตราบใดที่ส่วนประกอบมีการเปลี่ยนแปลงสถานะ การเรียกกลับของ useEffect จะถูกดำเนินการ ซึ่ง เทียบเท่ากับฟังก์ชัน hook ของ componentDidUpdate changeVariable(){
setVariable((variable) => ตัวแปร +1) //พารามิเตอร์ที่ส่งผ่านในการเรียกกลับของ setVariable เป็นตัวแปร
-
แสดงผล (
<div>
<button onclick = {change}>คลิกฉันเพื่อสร้างตัวแปร+1</button>
</div>
-
} : 1. ใช้ Hooks ในเลเยอร์ชั้นนอกสุดของฟังก์ชันส่วนประกอบเท่านั้น อย่าเรียก Hooks ในลูป เงื่อนไข หรือฟังก์ชันที่ซ้อนกัน
การนำเข้า React (useEffect) จาก 'react'
ส่งออกฟังก์ชันเริ่มต้น useState_Demo() {
//นี่คือ useEffect(() => {}) ที่ถูกต้อง
// ข้อผิดพลาด 1 โดยใช้การตัดสินแบบมีเงื่อนไข if(true) {
useEffect(() => {})
-
// ข้อผิดพลาด 2 การใช้ลูปในขณะที่ (จริง) {
useEffect(() => {})
-
//ข้อผิดพลาด 3 โดยใช้ useEffect(() => {
useEffect(() => {})
-
} 2. Hook import React, (useState, useEffect) จาก 'react'
ไม่สามารถนำมาใช้นอกฟังก์ชันของส่วนประกอบได้
//ข้อผิดพลาด 1, useState ถูกใช้นอกฟังก์ชันส่วนประกอบ
const [ตัวแปร, setVariable] = useState(0);
//ข้อผิดพลาด 2, useEffect ถูกใช้นอกฟังก์ชันส่วนประกอบ
useEffect(() => {})
ส่งออกฟังก์ชันเริ่มต้น useState_Demo() {
//ถูกต้องที่จะใช้ในฟังก์ชันส่วนประกอบ const [variable, setVariable] = useState(0);
} 3. เพื่อหลีกเลี่ยงข้อผิดพลาดข้างต้น คุณสามารถติดตั้งปลั๊กอิน eslint-plugin-react-hooks ESLint เพื่อตรวจสอบข้อผิดพลาดในโค้ดได้
hooks แบบกำหนดเองมีไว้เพื่ออำนวยความสะดวกในการแบ่งปันตรรกะระหว่างกัน ส่วนประกอบที่นำมาใช้ซ้ำจริง ๆ ฟังก์ชั่นถูกห่อหุ้มและ hook แบบกำหนดเองยังเรียก hook ที่มาพร้อมกับ
react
ฟังก์ชั่น useHook (initState) {
const [ตัวแปร, setVariable] = useState (initState)
ตัวแปรส่งคืน;
-
//ใช้ hook แบบกำหนดเอง
ส่งออกฟังก์ชันเริ่มต้น useState_Demo() {
const ตัวแปรสถานะ = useHook (0)
} คุณอาจสงสัยว่าจะใช้ Hook เดียวกันในสถานะแชร์คอมโพเนนต์หลายรายการหรือไม่
คำตอบคือ: ไม่ เนื่องจากการเรียก hook แต่ละครั้งที่มาพร้อมกับ react นั้นเป็นอิสระต่อกันและไม่ส่งผลกระทบถึงกัน ดังนั้น hook แบบกำหนดเองจึงเป็นอิสระและไม่ส่งผลกระทบถึงกันหากถูกเรียกหลายครั้ง