React Hook 提升代码复用性

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

什么是 React Hook？

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

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

举个例子

这个例子是经过 create-react-app 来建立的，因为 Hook 还没发布正式版，因此须要手动安装 react 和 react-dom 的 alpha 版本：

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，既能够避免更新失效的问题，又方便后期的扩展和维护。

感谢阅读

参考：

Simple Code Reuse with React Hooks

React Hooks in Action: Building a Todo App (hint: no classes)