Hooks - FAQ

React 是如何把对 Hook 的调用和组件联系起来的？

Hook 规范规定了 Hook 只会在 React 组件中被调用（或自定义 Hook —— 同样只会在 React 组件中被调用）。由于 React 保持对当前渲染中的组件的追踪，因此 React 同样也能够间接保持对 Hook 的追踪。

每个组件内部都有一个「记忆单元格」列表。

用于存储一些数据的 JavaScript 对象。

当你用 useState() 调用一个 Hook 的时候，它会读取当前的单元格（或在首次渲染时将其初始化），然后把指针移动到下一个。这就是多个 useState() 调用会得到各自独立的本地 state 的原因。

如何避免向下传递回调？

在大型的组件树中，我们推荐的替代方案是通过 context 用 useReducer 往下传一个 dispatch 函数。

这么做的原因是：React 保证了 dispatch 函数不会在组件重新渲染时改变。
// 创建 context 对象
const TodoDispatch = React.createContext(null);

// 创建 reducer function todoReducer(state, action) { switch (action.type) { case 'eat': // ... case 'jump': // ... } }

function TodoApp () { // useReducer 返回一个稳定的 dispatch 方法 const [todo, dispatch] = useReducer(todoReducer);

return ( // 在组件树中共享 dispatch 方法

) } function DeepChild(props) { // 从 context 中获取 dispatch，执行一个 action。 const dispatch = useContext(TodosDispatch); function handleClick() { dispatch({ type: 'eat', payload: 'fish' }); } return ( ); } ``` 得益于 dispatch 一旦被创建就稳定存在的特性，以及 context 实现组件树内部变量共享。我们可以利用 context + reducer 实现组件树的深度更新，避免层层传递回调的问题。

jtwang7 / React-Note

Hooks - FAQ #10

Hooks - FAQ

React 是如何把对 Hook 的调用和组件联系起来的？

如何避免向下传递回调？