ตะขอตอบสนอง

เพิ่ม Hooks ใน React ในเวอร์ชัน 16.8

Hooks อนุญาตให้ส่วนประกอบฟังก์ชันสามารถเข้าถึงสถานะและคุณสมบัติ React อื่น ๆ ด้วยเหตุนี้ โดยทั่วไปส่วนประกอบคลาสจึงไม่จำเป็นอีกต่อไป

แม้ว่าโดยทั่วไปแล้ว Hooks จะแทนที่ส่วนประกอบของคลาส แต่ก็ไม่มีแผนที่จะลบคลาสออกจาก React

ตะขอคืออะไร?

Hooks ช่วยให้เราสามารถ "เชื่อมต่อ" กับฟีเจอร์ React เช่น วิธีสถานะและวงจรชีวิต

ตัวอย่าง:

นี่คือตัวอย่างของ Hook อย่ากังวลถ้ามันไม่สมเหตุสมผล เราจะลงรายละเอียดเพิ่มเติมในหัวข้อถัดไป

import React, { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

คุณต้อง ขอ importจากreact.

ที่นี่เราใช้useStateHook เพื่อติดตามสถานะแอปพลิเคชัน

สถานะโดยทั่วไปหมายถึงข้อมูลแอปพลิเคชันหรือคุณสมบัติที่ต้องติดตาม

กฎของตะขอ

มีกฎ 3 ข้อสำหรับตะขอ:

ตะขอสามารถเรียกได้ภายในส่วนประกอบฟังก์ชัน React เท่านั้น
ตะขอสามารถเรียกได้เฉพาะที่ระดับบนสุดของส่วนประกอบเท่านั้น
ตะขอไม่สามารถมีเงื่อนไขได้

หมายเหตุ: Hooks จะไม่ทำงานในส่วนประกอบคลาส React

ตะขอแบบกำหนดเอง

หากคุณมีตรรกะของ stateful ที่ต้องนำกลับมาใช้ใหม่ในหลายองค์ประกอบ คุณสามารถสร้าง Hooks ที่กำหนดเองได้

เราจะพูดถึงรายละเอียดเพิ่มเติมในส่วนCustom Hooks

❮ ก่อนหน้า ถัดไป ❯

บทช่วย สอนตอบโต้