【雷火UX数据挖掘】React Hooks：原理和实践

「Hooks are functions that let you “hook into” React state and lifecycle features from function components」官方文档是这么介绍的，翻译过来就是：Hook是一些可以让你在函数组件里“钩入” React state及生命周期等特性的函数。

再简单一点就是：给函数注入状态(state)

在之前 React 的函数组件都是无状态的，如果需要给一个函数注入状态，我们应该怎么实现呢？下面是我们自己实现的一个简单的 useState hook。其实就是利用闭包的形式去处理。

上面只是简单的处理一个 Hook 的情况，但是 React Hooks 是支持多个 Hook 的，所以要支持多个 Hook 注入多个状态该怎么处理呢，原理也很简单就是利用函数执行栈 先入后出的原则，按照顺序来一一对应多个 Hook 函数的状态。下面是 Preact 库的简单实现。

这也印证了 React Hooks官方的一个结论：Hook 在每次渲染时都按照相同的顺序被调用。

也是因为需要保证顺序能对应上，所以 React Hook不能在条件语句或者嵌套函数里使用。

React 的本质是一个 Model 到 View 的映射：(props, state, context) => view。因为前端是强交互的，所以这个模型函数不能只执行一次，需要引入响应式规则，就是每次 props/state 变化的时候，重新执行，View 会 Rerender。React 需要引入生命周期的概念，在 View 渲染的流程中处理一些逻辑，在之前 class 组件的时候，React 提供了几个生命周期对应的方法来做对应的事情。

假如你没用过 class 组件，那么建议你忘记之前那套生命周期的逻辑，如果没用过当然最好了。因为 React Hooks 是没有和 class 组件那种专门的生命周期 API 的。Hooks 有一个处理副作用的 useEffect 可以做相同的事情。

我不建议把 useEffect 当作生命周期 API 的使用来理解，相反你应该忘记那一套，不要想着像 class 组件在某个生命周期内我需要做什么。而是要想着 当某个状态变化时，我要做什么。

1、从 props 传来的值

2、从 URL 里获取到的参数

useMemo：如果某个数据是通过其他数据计算得到的，那么只有当其他数据(依赖的数据)发生变化的时候，才应该需要重新计算。关于 useMemo/useCallback 的使用网上争议很多，我个人的建议是用之前问一下自己是不是真的有必要用，可用可不用的情况下就不要用了。

关于 内置 Hooks 使用官方已经有文档和教程，就不做多介绍了。

React Hooks 真正强大的地方在于自定义 Hooks。

●  自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性。

●  自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 use 开头，这样可以一眼看出其符合 Hook 的规则。

●  尽量避免过早地增加抽象逻辑。既然函数组件能够做的更多，那么代码库中函数组件的代码行数可能会剧增。这属于正常现象 —— 不必立即将它们拆分为 Hook。

自定义 Hooks 的使用场景，总结了一下有以下几个情况：

这个其实很好理解，平常我们业务里会遇到有些接口在不同页面都要调用，可能就是参数和页面展示的不一样，但是核心数据请求逻辑是一样的，所以我们可以把数据请求逻辑封装成一个 Hooks。理论上所有的 get 请求都可以封装成自定义 Hook，具体还是结合业务来看有没有需要。比如有一个请求页面列表的接口，有几个地方用到这接口，可以这样封装一下：

使用

像一些异步请求这些通用的方法就可以结合自己的业务封装成通用的 Hooks。相比普通的通用函数自定义 Hook 可以管理当前组件的状态，可以做到更多。

像常见的页面滚动，点击事件等都可以封装成自定义 Hooks 来用

其实可以理解为普通函数的拆分，保持函数的短小。

本文没有详细的 Hooks API 讲解，仅从 React Hooks 的实现原理和生命周期理解，和实践几个方向出发，希望帮大家对 Hooks 有一个更深入的理解。

最后欢迎大家投递雷火UX设计部面向2022届毕业生的校招岗位