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.

- Makeing Sense of React Hooks

核心思想

• useState 加强了封装性：
  • 各逻辑和其 state 变量在同个 hook 中（比如 useWindowWidth，把 width 及 width 变化的处理封装在一起），
  • 不再需要把不同逻辑的变量揉合进一个大的 state 变量中（像 class component 那样）
• useEffect：
  • 组件 mount / unmount 时的 hook
  • 执行副作用（修改 DOM、发起 AJAX 请求等）
  • 通过监听某些变量有无修改来判断是否重新执行

难点

• 对于 useState 的 理解
• 通过 state 变量的传递 复用 hook
• useState 返回的 setter，并不自动合并 object 字段
• useEffect 基础
• 使用 useEffect 时 注意组件是否被 unmount

最佳实践

React 将 hook 引入进来，是为了让某些逻辑更容易复用，更容易在 componendDidMount 函数们中间拆分出来。因此 custom hook 的逻辑应该尽量简单、可复用，而不是让使用者想用时需要花很大精力搞懂里面做了什么逻辑。