React 的工作流程
-
React 的工作流程大致可以分为几个阶段：Render 阶段、Commit 阶段、Effect 执行阶段。
-
Render 阶段本质就是调用一次组件函数，用当前的状态计算一次当前的 UI 快照，该阶段不会实际修改 DOM 元素，生成的产物为 Fiber 节点组成的 Virtual DOM 树。
-
Commit 阶段本质上就是通过利用 diff 算法比较虚拟 DOM 树之间的差别，一次性修改 DOM 从而减少频繁修改 DOM 的开销。
-
在 Commit 阶段执行完后，会执行 effect。
-
什么会导致 Rerender：状态的改变会导致持有该状态的组件及其子组件重新渲染。状态包括 useState、useContext、useReducer 及三方库等形式。
- diff 算法发生在 Render 阶段，因为 diff 算法的需要，React 同一时刻通常有两颗 Fiber Tree，一颗反应当前 UI 界面的树以及一颗正在构建反应后续更新 UI 界面的树。
useMemo、useCallback、memo 的使用
- useMemo 是用来缓存昂贵的计算，因为组件每次重渲染都会重新运行一遍组件函数，如果组件函数中有昂贵的计算，对性能影响会较大，但昂贵的计算并不一定涉及所有状态，这时候我们可以用 useMemo 装饰，并仅将涉及到的状态放到依赖数组中，这时候非依赖状态变更时这个计算就不会执行了。
- useCallback：用于缓存函数引用。依赖不变时返回同一个函数，常与
memo配合，避免因父组件每次创建新函数而导致子组件重复渲染。 - memo：用于缓存组件渲染结果。父组件重渲染时，会浅比较子组件的新旧 props；若 props 未变化，则跳过该子组件的重新渲染。
