想用好 React Hooks，你该这么学

在我看来最重要的是准确地知道 Hooks 的功能边界，也就是知道它能做什么

Hooks 是如何诞生的？

Hooks 就是把某个目标结果钩到某个可能会变化的数据源或者事件源上，那么当被钩到的数据或事件发生变化时，产生这个目标结果的代码会重新执行，产生更新后的结果。

比起这样的代码

const handleIncrement = useCallback(() => setCount(count + 1), [count]);

下面的代码会更优秀一些

const handleIncrement = useCallback(() => setCount(q => q + 1), []);

表单

Antd Form

Antd Form 只能和 Antd 的 UI 库一起使用。Antd Form 最早是基于高阶组件实现状态逻辑的重用，在 Hooks 出现之后，也基于 Hooks 重构了 Form 的实现。

formik

formik 并没有使用 Hook

React Hook Form

区别于 antd 和 formik 的一个最大特点是，React Hook Form 是通过非受控组件的方式进行表单元素的管理。正如上文提到，这可以避免很多的表单重新渲染，从而对于复杂的表单组件可以避免性能问题。