你了解 React Hooks Flow 吗？

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

理解“Hooks流程”非常重要，有时即使是经验丰富的React开发人员也会忽略一些要点。

感谢“Donavon”分享了这张精美的流程图。

React Hooks流程包括：

1. 山
2. 更新（当状态因任何事件而改变时）
3. 卸载

山：

1. 运行延迟初始化器（传递给 useState 或 useReducer 的函数）
2. 继续执行渲染函数的剩余部分
3. React 会更新 DOM。
4. 它运行布局效果
5. 浏览器绘制屏幕以反映
6. 运行效果

更新：（当用户执行任何事件时，状态都会更新）

1. 运行渲染阶段
2. React 更新 DOM
3. 首先清理布局效果
4. 运行布局效果
5. 浏览器绘制屏幕
6. 首先清理影响
7. 在渲染中运行特效

卸载：组件从屏幕上移除（导航到其他屏幕或用户事件触发）。

1. 清理布局效果
2. 清理效果

注意：切勿将它们与类组件中的生命周期方法混淆。

让我们在下面的评论区分享更多关于hook的内容吧。