web-dev-qa-db-ja.com

Reactフック-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>;
}

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

javascriptnode.jsreactjsreact-hooks
11
Moshe Nagar

その理由は、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の現在の値が正しく表示されます。

12
marzelin

状態を更新すると、コンポーネントは再び再レンダリングされますが、ローカル値はそうではありません。

あなたの場合、あなたはあなたのコンポーネントでその値をレンダリングしました。つまり、値が変更された場合、コンポーネントを再レンダリングして、更新された値を表示する必要があります。

したがって、通常のローカル値よりも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>;
}
1
Antonio

最初の例が機能するのは、データが本質的に決して変更されないためです。 setStateを使用する開始点は、状態がハングしたときにコンポーネント全体を再レンダリングすることです。したがって、例で何らかの状態の変更または管理が必要な場合、変更値が必要であることをすぐに認識し、変数値でビューを更新するには、状態と再レンダリングが必要になります。

0
10100111001
_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が返すものは2つあります。

  1. 新しい状態変数
  2. その変数のセッター

setA(1)を呼び出すと、this.setState({ a: 1 })を呼び出して再レンダリングをトリガーします。

0
schogges

状態が更新されるのに対し、ローカル変数は変異時にレンダリングごとにリセットされます。

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

Edit serene-galileo-ml3f0

0
Drew Reese