10

React 文档说：

React 如何将 Hook 调用与组件关联起来？

React 跟踪当前呈现的组件。由于 Hooks 的规则，我们知道 Hooks 只能从 React 组件调用（或自定义 Hooks——也只能从 React 组件调用）。每个组件都有一个内部“存储单元”列表。它们只是 JavaScript 对象，我们可以在其中放置一些数据。当你调用 useState() 之类的 Hook 时，它会读取当前单元格（或在第一次渲染期间对其进行初始化），然后将指针移动到下一个单元格。这就是多个 useState() 调用各自获取独立本地状态的方式。

首先……这个“记忆细胞”是什么？我们可以自己打印出来看看它的价值吗？

其次，该函数只有一个实例（Counter()如下例所示）。所以如果我们<Counter />在 DOM 中渲染两次，一次 to <div id="root1">，第二次 to <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