React: Concept: Hook

 1st March 2021 at 9:54pm
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,比如 componentDidMountcomponentWillUnmount 中经常有好几套逻辑揉在一起:

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 请求等)
    • 通过监听某些变量有无修改来判断是否重新执行

难点

最佳实践

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

TOC