React Hook - sử dụng useState vs chỉ các biến

React Hook cung cấp cho chúng ta tùy chọn useState và tôi luôn thấy các so sánh giữa Hook và Class-State. Nhưng những gì về Hook và một số biến thông thường?

Ví dụ,

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

Tôi đã không sử dụng Móc và nó sẽ cho tôi kết quả giống như:

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

Vậy sự khác biệt là gì? Sử dụng Móc thậm chí còn phức tạp hơn cho trường hợp đó ... Vậy tại sao bắt đầu sử dụng nó?

Lý do là nếu bạn quay useStatelại xem. Các biến chỉ tự thay đổi bit trong bộ nhớ và trạng thái của ứng dụng của bạn có thể không đồng bộ với chế độ xem.

So sánh ví dụ này:

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>;
}

Trong cả hai trường hợp, athay đổi khi nhấp nhưng chỉ khi bạn sử dụng useStatechế độ xem hiển thị chính xác agiá trị hiện tại.

Cập nhật trạng thái sẽ làm cho thành phần hiển thị lại, nhưng giá trị cục bộ thì không.

Trong trường hợp của bạn, bạn đưa ra giá trị đó trong thành phần của bạn. Điều đó có nghĩa là, khi giá trị được thay đổi, thành phần sẽ được kết xuất lại để hiển thị giá trị được cập nhật.

Vì vậy, nó sẽ tốt hơn để sử dụng useStatehơn giá trị địa phương bình thường.

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>;
}

Ví dụ đầu tiên của bạn chỉ hoạt động vì về cơ bản dữ liệu không bao giờ thay đổi. Điểm nhập của việc sử dụng setStatelà để chạy lại toàn bộ thành phần của bạn khi trạng thái treo. Vì vậy, nếu ví dụ của bạn yêu cầu một số loại thay đổi hoặc quản lý trạng thái, bạn sẽ nhanh chóng nhận ra các giá trị thay đổi sẽ là cần thiết và để cập nhật chế độ xem với giá trị biến, bạn sẽ cần trạng thái và đăng ký lại.

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

tương đương với

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

Những gì useStatetrả về là hai điều:

1. biến trạng thái mới
2. setter cho biến đó

nếu bạn gọi, setA(1)bạn sẽ gọi this.setState({ a: 1 })và kích hoạt kết xuất lại.

Các biến cục bộ sẽ được thiết lập lại mỗi lần hiển thị khi đột biến trong khi trạng thái sẽ cập nhật:

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>
  );
}