React useEffect 执行时机

默认情况下，Effect 在每次渲染（包括初始渲染）后运行。
如果 React 的所有依赖项都与上次渲染时的值相同，则将跳过本次 Effect。

useEffect(() => {
  // 这里的代码会在每次渲染后执行
});

useEffect(() => {
  // 这里的代码只会在组件挂载后执行
  return () =>{
  	// 这里的 cleanup 清理函数，在组件卸载时执行
  }
}, []);

useEffect(() => {
  //这里的代码只会在每次渲染后，并且 a 或 b 的值与上次渲染不一致时执行
  return () =>{
  	// cleanup 清理函数
  	// 1. 在 React 执行该 Effect 之前，它会执行最近一次渲染的 Effect cleanup 函数。
  	// 2. 在组件卸载时执行
  }
}, [a, b]);

不必使用 Effect 来转换渲染所需的数据

当更新 state 时 （setState）：

1. React 首先会调用组件函数来计算应该显示在屏幕上的内容（渲染）
2. 然后会把这些变化“提交”到 DOM 中来更新屏幕（提交）
3. 然后 React 会执行 Effect
4. 如果 Effect 中 也立即更新了 state，就会重新执行整个流程。
   为了避免不必要的渲染流程，应在组件顶层转换数据。这些代码会在你的 props 或 state 变化时自动重新执行。

如何判断两次渲染时依赖是否相同
使用Object.is来进行比较
Object.is 介绍