React Hook 提高代码复用性

代码复用一直是 程序员 所追求的，本文主要讲解如何利用 React Hook 提高代码的复用性。

什么是 React Hook？

Hook 是 React 新特性，让你不用写 class，也可以使用 React 的 state 以及其他功能。目前该特性发布在 v16.7.0-alpha 版本中，所以还不推荐在生产环境中使用。

想用 React 的 state，讨厌写 class，被 this 搞得晕头转向？Hook 来帮你。不仅如此，Hook 还可以帮你优雅的复用代码。

举个例子

yarn add react@16.7.0-alpha.2 react-dom@16.7.0-alpha.2
复制代码

我们来写一个组件，取名叫 ColoredBanner ，它可以通过点击按钮随机改变背景颜色：

很明显，要实现这个组件，需要一个状态来存储颜色，以及一个点击事件来改变状态，实现背景颜色的切换。

在没有 Hook 之前，我们需要创建一个类，然后通过 this.state 和 this.setState 实现状态管理。那么用 Hook 怎么实现呢？直接看代码：

可以看到在函数中也可以使用 React 的状态机制。通过调用 React 提供的 useState() 方法，传入参数为初始值，返回一个数组，包含两个对象，一个是 color ，另一个是 setColor ，类似于 this.state 和 this.setState 。

还定义了一个方法 changeColor() ，随机选择一个颜色，然后通过 setColor 更新颜色。

如何复用代码呢？

假如我们还需要写另外一个组件，他的功能和 ColoredBanner 组件几乎一样，唯一区别是不需要用户点击，而是设置一个定时器来自动改变背景。

我们不能直接使用 ColoredBanner 组件，因为里面有点击事件的逻辑，只需要 ColoredBanner 中随机更新颜色状态的功能。

很明显需要把 ColoredBanner 组件中随机更新颜色状态的逻辑抽离出来。

怎么做呢？

自定义 Hook。类似于 Higher Order Components （高阶组件）和 Render Props 的处理方式。

随机更新颜色状态的自定义 Hook：

创建一个名为 useRandomColor 的函数，接收两个参数， colors 和 initialColor ，在 changColor() 方法中调用 setColor 钩子函数实现颜色的更新。这样自定义 Hook 就实现了。

在 ColoredBanner 组件中使用：

调用自定义 Hook useRandomColor ，传入颜色数组和初始化颜色，解构返回 color 和 changeColor 。 ColoredBanner 组件就可以通过这个自定义 Hook 来随机改变背景颜色了。

同理，利用这个 Hook 来实现自动更换随机背景颜色的组件。达到代码复用的目的。

自定义 Hook 除了能提高代码复用性，还带来了另一个好处，可以把项目中嵌套很深的 state，拆成一个个小的 Hook，既可以避免更新失效的问题，又方便后期的扩展和维护。