本专栏致力于每周分享一个项目，如果本文对你有帮助的话，欢迎点赞或者关注☘️
React18 源码系列会随着学习 React 源码的实时进度而实时更新：约，两天一小改，五天一大改。
Hooks理念
React LOGO的图案是代表原子（atom）。与世间万物由原子组成的理念相似，在 React 的世界中，Component 就是一种原子单元，这些 Component 的属性与类型决定了 UI 的外观与表现。一般的，我们说ClassComponent是一类原子，而Hooks则是更贴近事物运行规律的电子。
React的架构遵循 schedule - render - commit 的运行流程，这个流程是 React 世界最底层的运行规律。ClassComponent作为 React世界的原子，他的生命周期（componentWillXXX/componentDidXXX）是为了介入 React 的运行流程而实现的更上层抽象，这么做是为了方便框架使用者更容易上手，相比于ClassComponent 的更上层抽象，Hooks 则更贴近 React 内部运行的各种概念（state | context | life-cycle）。
很多人总是习惯于总会拿 ClassComponent 的生命周期来类比 Hooks API 的执行时机，其实这两者的概念有很多割裂感，并不是同一抽象层次可以互相替代的概念，比如常见的，componentWillReceiveProps 是在render 阶段执行，而 useEffect 是在 commit 阶段完成渲染后异步执行。
Concurrent Mode 是 React 未来的发展方向，而 Hooks 是能够最大限度发挥 Concurrent Mode 潜力的Component 构建方式。
Hooks分类
- useEffect：组件渲染后执行副作用操作，如API调用或设置事件监听器； useEffect 是在 commit 阶段完成渲染后异步执行，可以通过传递空数组来模拟componentDidMount、componentDidUpdate、componentWillUnmount的行为，不过需要注意他们并不是属于同一抽象层次可以互相替代的概念。
- useState：允许你在函数组件中拥有状态；每当状态更新时，组件将重新渲染。
- useContext：订阅Context的变化；当Context值变化时重新渲染。
- useReducer：用于有复杂状态逻辑的组件；当action触发时重新渲染。
- useCallback：返回一个memo化的回调函数；当依赖项改变时更新。
- useMemo：将函数结果memo化；当依赖项改变时重新计算。
- useRef：获得对DOM元素的引用，或用于保存任何可变值；在整个组件生命周期内保持不变。
- useImperativeHandle：自定义实例值，让父组件控制子组件；通常与forwardRef一起使用。
- useLayoutEffect：与useEffect类似，但在所有DOM更新前同步执行；用于需要同步更新DOM的操作。理解 useEffect 和 useLayoutEffect 的区别。
- useDebugValue：用于调试，显示hook的当前值；仅在开发模式下有效。
- useDeferredValue：用于处理某些状态的延迟更新，以优化性能和用户体验。在useDeferredValue内部会调用useState并触发一次更新。这次更新的优先级很低，所以当前如果有正在进行中的更新，不会受useDeferredValue产生的更新影响
- startTransition： 允许将某些更新标记为低优先级，以提高页面的响应性能。
关于作者
作者：Wandra
内容：算法 | 趋势 ｜源码｜Vue | React | CSS | Typescript | Webpack | Vite | GithubAction | GraphQL | Uniqpp。
专栏：欢迎关注呀🌹
本专栏致力于每周分享一个项目，如果本文对你有帮助的话，欢迎点赞或者关注☘️
