ตะขอคืออะไร? เรามาพูดถึง Hooks สองตัวที่ใช้กันทั่วไปใน React

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: ก่อนที่คุณจะเริ่มเรียนรู้

ก่อนว่า hook คืออะไร

Hook เป็นฟีเจอร์ใหม่ของ React 16.8 ซึ่งถูกใช้เป็นพิเศษในส่วนประกอบที่ใช้งานได้ และนิยมนำไปใช้งานจริง

เหตุใดจึงแนะนำให้ใช้ hooks เพื่อการพัฒนา

Hooks ถูกนำมาใช้เป็นพิเศษเพื่อร่วมมือกับการพัฒนาส่วนประกอบที่ใช้งานได้ hooks สะดวกสำหรับการพัฒนาและง่ายกว่าสำหรับนักพัฒนาที่จะเข้าใจโค้ด

ข้างต้นเป็นบทสรุปส่วนตัวโดยย่อ สำหรับเหตุผลเพิ่มเติม โปรดดูที่เว็บไซต์อย่างเป็นทางการของ react:

https://react.docschina.org/docs/hooks-intro html#motivation

useState

ในโค้ด:

React.useState(0) เทียบเท่ากับสิ่งนี้ในองค์ประกอบของคลาส การเพิ่มตัวแปรค่าแอตทริบิวต์

สามารถใช้

ค่าของตัวแปร

เพื่อแก้ไขค่าของตัวแปรซึ่งสามารถเทียบเท่ากับ 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

:

ดังที่เห็นได้จากโค้ดต่อไปนี้ การใช้ 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>
    -
}

สิ่งที่ควรทราบเมื่อใช้ hooks

: 1. ใช้ Hooks ในเลเยอร์ชั้นนอกสุดของฟังก์ชันส่วนประกอบเท่านั้น อย่าเรียก Hooks ในลูป เงื่อนไข หรือฟังก์ชันที่ซ้อนกัน

การนำเข้า React (useEffect) จาก 'react'
ส่งออกฟังก์ชันเริ่มต้น useState_Demo() {
   //นี่คือ useEffect(() => {}) ที่ถูกต้อง
    
   // ข้อผิดพลาด 1 โดยใช้การตัดสินแบบมีเงื่อนไข if(true) {
        useEffect(() => {})
   -
   // ข้อผิดพลาด 2 การใช้ลูปในขณะที่ (จริง) {
        useEffect(() => {})
   -
  //ข้อผิดพลาด 3 โดยใช้ useEffect(() => {
      useEffect(() => {})
  -
}

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 แบบกำหนดเอง

hooks แบบกำหนดเองมีไว้เพื่ออำนวยความสะดวกในการแบ่งปันตรรกะระหว่างกัน ส่วนประกอบที่นำมาใช้ซ้ำจริง ๆ ฟังก์ชั่นถูกห่อหุ้มและ hook แบบกำหนดเองยังเรียก hook ที่มาพร้อมกับ

react
ฟังก์ชั่น useHook (initState) {
  const [ตัวแปร, setVariable] = useState (initState)
  ตัวแปรส่งคืน;
-
//ใช้ hook แบบกำหนดเอง
ส่งออกฟังก์ชันเริ่มต้น useState_Demo() {
    const ตัวแปรสถานะ = useHook (0)
}

คุณอาจสงสัยว่าจะใช้ Hook เดียวกันในสถานะแชร์คอมโพเนนต์หลายรายการหรือไม่

คำตอบคือ: ไม่ เนื่องจากการเรียก hook แต่ละครั้งที่มาพร้อมกับ react นั้นเป็นอิสระต่อกันและไม่ส่งผลกระทบถึงกัน ดังนั้น hook แบบกำหนดเองจึงเป็นอิสระและไม่ส่งผลกระทบถึงกันหากถูกเรียกหลายครั้ง