10

React Docsは次のように述べています。

React はフック呼び出しをコンポーネントにどのように関連付けますか?

React は現在レンダリング中のコンポーネントを追跡します。フックのルールのおかげで、フックは React コンポーネント (またはカスタム フック — これも React コンポーネントからのみ呼び出される) からのみ呼び出されることがわかっています。各コンポーネントに関連付けられた「メモリ セル」の内部リストがあります。それらは、データを配置できる単なる JavaScript オブジェクトです。useState() のようなフックを呼び出すと、現在のセルが読み取られ (または最初のレンダリング時に初期化され)、ポインターが次のセルに移動します。これは、複数の useState() 呼び出しがそれぞれ独立したローカル状態を取得する方法です。

まず・・・この「記憶細胞」とは?自分で印刷してその価値を確認できますか?

次に、関数のインスタンスは1 つだけです (Counter()次の例のように)。<Counter />DOM に 2 回レンダリングする場合、1 回目は にレンダリングし、 <div id="root1">2回目は にレンダリングし<div id="root2">ますCounter()

function Counter() {

    let [count, setCount] = React.useState(0);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}> + </button>                    
            { count }
            <button onClick={() => setCount(count - 1)}> - </button> 
        </div>
    )
}
4

0 に答える 0