Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

可以用函数组件配合 Hook 来实现 class 组件的功能。

动机

Hook 解决了什么问题?

让代码变得内聚

在自定义 Hook 可以将散在 componentDidMount, componentWillUpdate, componentWillUnmount 等生命周期函数的业务聚在一起。详细介绍:聚集零散业务代码的解决方案 - React Hook

为共享状态逻辑提供更好的原生途径

共享状态一般会用 Context API,高阶组件,render props 等方式。但这些方式增加组件的嵌套层级。比如,做一个获取鼠标位置的 render props: withMousePos,需要多一个层级。

用 Hook 来实现共享状态,不会增加组件的嵌套层级。做一个获取鼠标位置的 Hook: useMousePos, 不需要多一个层级。

函数组件和类组件的不同

函数组件和类组件在写法上和理念上都不同。

在大部分情况下,函数组件用声明式(基于变化) 来写会比较好。推荐阅读:你可能不知道的流式 React Hooks