使用 React Hooks 分离可重用代码

简评：React Hooks 提供了一种非常简便的方法来实现代码重用。本文介绍如何使用 React Hooks 重用代码，并简单介绍和 HOC 实现方式的区别。

什么是React Hooks？

Hook 是一项新功能提案，可以在 Functional React Component 中使用 state 和其他 React 功能（React Component 生命周期函数，React Context），这大大简化了 React 的使用。目前还处于 React v16.7.0-alpha 中，不太建议在生产环境中使用它。

使用 Hooks 分离可重用的功能

假设需要创建一个组件 ColoredBanner ，ColoredBanner 可以在点击按钮的时候随机设置一种背景颜色，效果如下：

很明显我们需要使用 state 来持有当前 color，并使用 this.state.color 为 banner 指定颜色和使用 setState 来更新 color。使用 React Hooks 的代码如下：

如果想要给其他组件添加 changeColor 功能，需要将这部分功能分离出来，在使用 React Hooks 之前可以使用 HOC 来实现这个功能，如果使用 React Hooks 来拆分这部分逻辑也很简单。

前面我们使用 userState 为 functional Component 添加 state 功能。我们还可以把对 state 的操作移到 Functional Component 外部。这里创建一个新的函数 userRandomColor，接收 color 列表，和初始化状态，并返回 color state 和更新 color 的方法。

重构后的 ColoredBanner 代码如下：

可以比较一下 React Hooks 和 HOC 分离复用代码的区别，React Hooks 只需要对 useState 进行封装，不需要新建一个类 （不需要处理 this 问题），相对来说简单很多。还有一点例子没有体现出来，我们可以将 state 拆分，新的组件不再需要维护一个大的 state 对象，可以按功能划分成多个细小的 state 放到 React Hooks 中来维护，每个 Hook 处理自己独立的状态，这样还可以避免 state mergin 覆盖的问题。

---

原文链接：Simple Code Reuse with React Hooks
推荐阅读：给 console 添加颜色