React Hook 提高代码复用性

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

什么是 React Hook？

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

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

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文手册
专注分享前端知识，你想要的，在这里都能找到

举个例子

这个例子是通过 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)

作者：缪宇
链接：https://juejin.im/post/5c0e1338e51d4567ca054794