写给自己看的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 通常都会造成更多的性能问题。

相关推荐
前端付豪7 小时前
🚀 2025 年 React 全攻略:40 个高频问题深度解析与实战指南
前端·react.js
洋338 小时前
[纯原创无Ai] 我把React调教成vue的模样了
vue.js·react.js
Aiolimp9 小时前
React JSX 基本用法
前端·react.js
高峰君主9 小时前
跨端时代的全栈新范式:React Server Components深度集成指南
前端·react.js·前端框架
萌萌哒草头将军11 小时前
🚀🚀🚀 神了!RedwoodJS 轻松碾压 NextJS,成了我的最爱❤️
前端·react.js·全栈
Aiolimp14 小时前
React Router V7 基本使用
前端·react.js
三思而后行,慎承诺14 小时前
详解React Fiber架构中,reconcile阶段的具体工作流程
javascript·react.js·ecmascript
进取星辰15 小时前
14、服务端组件:未来魔法预览——React 19 RSC实践
前端·react.js·前端框架
JiangJiang15 小时前
🧠 面试官:受控组件都分不清?还敢说自己写过 React?
前端·react.js·面试
喵爱吃鱼15 小时前
原来这就是react设计模式啊
前端·javascript·react.js