React Hooks - ใช้ useState กับ just variables

React Hooks ให้เราใช้ตัวเลือก State และฉันจะเห็นการเปรียบเทียบ Hooks กับ Class-State เสมอ แต่สิ่งที่เกี่ยวกับ hooks และตัวแปรปกติบางอย่าง?

ตัวอย่างเช่น,

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

ฉันไม่ได้ใช้ Hooks และมันจะให้ผลลัพธ์เหมือนกับ:

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

แล้วความแตกต่างคืออะไร? การใช้ Hooks มีความซับซ้อนมากขึ้นสำหรับกรณีนั้น ... ทำไมต้องเริ่มใช้มัน?

เหตุผลก็คือถ้าคุณuseStateแสดงผลมุมมองใหม่ ตัวแปรด้วยตัวเองจะเปลี่ยนบิตในหน่วยความจำเท่านั้นและสถานะของแอปของคุณจะไม่ซิงค์กับมุมมอง

เปรียบเทียบตัวอย่างนี้:

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

ในทั้งสองกรณีaการเปลี่ยนแปลงเมื่อคลิก แต่เฉพาะเมื่อคุณใช้useStateมุมมองอย่างถูกต้องแสดงaค่าปัจจุบันของ

สถานะการอัปเดตจะทำให้องค์ประกอบแสดงผลอีกครั้ง แต่ค่าในเครื่องไม่ใช่

ในกรณีของคุณคุณให้ค่าในองค์ประกอบของคุณ ซึ่งหมายความว่าเมื่อมีการเปลี่ยนแปลงค่าส่วนประกอบควรแสดงใหม่อีกครั้งเพื่อแสดงค่าที่อัปเดต

ดังนั้นจะใช้งานได้ดีuseStateกว่าค่าท้องถิ่นปกติ

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

ตัวอย่างแรกของคุณใช้งานได้เพราะข้อมูลไม่เคยเปลี่ยนแปลง จุดป้อนของการใช้setStateคือการแสดงส่วนประกอบทั้งหมดของคุณใหม่เมื่อสถานะหยุดทำงาน ดังนั้นหากตัวอย่างของคุณต้องการการเปลี่ยนแปลงหรือการจัดการบางอย่างคุณจะต้องตระหนักถึงค่าการเปลี่ยนแปลงอย่างรวดเร็วและจำเป็นต้องปรับปรุงมุมมองด้วยค่าตัวแปรคุณจะต้องมีสถานะและการแสดงซ้ำ

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

เทียบเท่ากับ

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

สิ่งที่useStateส่งคืนคือสองสิ่ง:

1. ตัวแปรสถานะใหม่
2. ตัวตั้งค่าสำหรับตัวแปรนั้น

ถ้าคุณโทรsetA(1)คุณจะโทรthis.setState({ a: 1 })และเรียกการแสดงผลอีกครั้ง

ตัวแปรท้องถิ่นจะได้รับการรีเซ็ตทุกการแสดงผลเมื่อมีการกลายพันธุ์ในขณะที่รัฐจะอัปเดต:

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}