写给自己看的React注意事项

React 有一些看起来很奇怪的行为，尤雨溪还曾对此做过一些评价，🤭 这里记录一下我在项目中会遇到一些很奇怪的代码。

useEffect 的取消订阅函数，会在每次 callback 执行之前执行。

很多人都会认为，取消订阅函数只有在组件卸载的时候才会调用，但其实不是的，它会在每一次需要执行 callback 之前都会执行一次，这里举个例子

jsx 复制代码

function Test() {
  const [refersh, setRefersh] = useState(false)
  useEffect(() => {  
   console.log(refersh)  
   return () => {  
    console.log(refersh)  
   }  
  })  
  
return <button onClick={() => setRefersh(v => !v)}>按钮</button>
}

上面没有传入依赖数组，所以每次更新 state, useEffect 的回调每次都会执行，打印结果是下面这样的

arduino 复制代码

// 第一次点击
false
true

// 第二次点击
true
false

注意这个行为，避免出现一些性能浪费或者小bug

尽量避免使用 useEffect

新手写 React 非常容易在不需要 useEffect 的情况下使用 useEffect，这会让代码更复杂，更难理解

最容易出现的就是用 useEffect 维持多个不同的 state 进行一些同步操作，我曾经在项目中遇到过这样的代码

jsx 复制代码

function Test() {
  const [adNum, setAdNum] = useState(0)
  const [projectNum, setProjectNum] = useState(0)
  
  const [maxLength, setMaxLength] = useState(adNum * projectNum) 
  
  useEffect(() => {
    setMaxLength(adNum * projectNum)
  }, [adNum, projectNum])


}

实际上在项目中还有其他一别的的代码，被我简化掉了，但实际上面这些代码是非常容易碰到的，这样的写法非常不好理解。正确做法如下。

jsx 复制代码

function Test() {
  const [adNum, setAdNum] = useState(0)
  const [projectNum, setProjectNum] = useState(0)
  
  const maxLength = adNum * projectNum 
 

}

可以看到有时 useEffect 是没有必要使用的。

使用 key 重置组件的 State

当组件的 Key 改变的时候， React 对组件做的操作不是更新，而是直接卸载掉当前组件，然后再重新挂载一个全新的组件，随着这个过程的执行，组件的 State 会重新初始化。

jsx 复制代码

function Test() {
  const [currentKey setCurrentKey] = useState(0)
  return <SomeComponent key={currentKey}></SomeComponent>
}

但是有一个地方要注意的就是，既然组件是卸载，那么如果这个组件的卸载带动画的话就不可以采用这种方式，不然动画效果会受到影响。

复杂应用不要在组件中写 useEffect 获取数据

如果你想在接口请求中做更多复杂的行为，比如缓存，封装重复请求，或者避免一次请求太多的接口，可以使用社区更推荐的做法（例如使用 react query），自己写的 useEffect 通常都会造成更多的性能问题。

写给自己看的React注意事项

useEffect 的取消订阅函数， 会在每次 callback 执行之前执行。

尽量避免使用 useEffect

使用 key 重置组件的 State

复杂应用不要在组件中写 useEffect 获取数据

useEffect 的取消订阅函数，会在每次 callback 执行之前执行。