- To-do
- 我未深入了解 React 提供的 additional hooks。
React hook 的 官方文档 写得非常好。看完之后看这篇 帖子,把 hook 设计上的理念讲得很清楚。
Class component 的问题在于:
- Huge components that are hard to refactor and test.
- Duplicated logic between different components and lifecycle methods.
- Complex patterns like render props and higher-order components.
这个视频可以直接地看出一些问题,class component 没法做到 separation of concerns,比如 componentDidMount
和 componentWillUnmount
中经常有好几套逻辑揉在一起:
Hooks are fully encapsulated — each time you call a Hook, it gets isolated local state within the currently executing component.
Unlike render props or higher-order components, Hooks don’t create a “false hierarchy” in your render tree. They’re more like a flat list of “memory cells” attached to a component. No extra layers.
核心思想
useState
加强了封装性:- 各逻辑和其 state 变量在同个 hook 中(比如
useWindowWidth
,把 width 及 width 变化的处理封装在一起), - 不再需要把不同逻辑的变量揉合进一个大的 state 变量中(像 class component 那样)
- 各逻辑和其 state 变量在同个 hook 中(比如
useEffect
:- 组件 mount / unmount 时的 hook
- 执行副作用(修改 DOM、发起 AJAX 请求等)
- 通过监听某些变量有无修改来判断是否重新执行
难点
- 对于
useState
的 理解 - 通过 state 变量的传递 复用 hook
useState
返回的 setter,并不自动合并 object 字段useEffect
基础- 使用
useEffect
时 注意组件是否被 unmount
最佳实践
React 将 hook 引入进来,是为了让某些逻辑更容易复用,更容易在 componendDidMount
函数们中间拆分出来。因此 custom hook 的逻辑应该尽量简单、可复用,而不是让使用者想用时需要花很大精力搞懂里面做了什么逻辑。