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