React Hooks-useStateと単なる変数の使用

React HooksはuseStateオプションを提供し、私は常にHooksとClass-Stateの比較を見ます。しかし、フックといくつかの通常の変数はどうですか？

例えば、

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

私はフックを使用しませんでした、そしてそれは私と同じ結果をもたらすでしょう：

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

それで、違いは何ですか？その場合、フックの使用はさらに複雑になります...それで、なぜそれを使い始めるのですか？

その理由は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>
  );
}