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

相关推荐
今天也想MK代码4 小时前
ReFormX:现代化的 React 表单解决方案 - 深度解析与最佳实践
前端·react.js·性能优化
yanyu-yaya4 小时前
第三章 react redux的学习之redux和react-redux,@reduxjs/toolkit依赖结合使用
javascript·学习·react.js
dleei4 小时前
react入门(上)
前端·react.js·前端框架
哟哟耶耶5 小时前
React-02初学hello_react(JSX,创建React根节点,引入对应React库,render渲染DOM)
前端·javascript·react.js
lbh5 小时前
React + PDF.js 实战:构建一个带打印/下载功能的 PDF 查看器
javascript·react.js
代码小学僧6 小时前
如何优雅地重构一个企业官网 Nextjs 前端项目
前端·react.js·前端工程化
三小河6 小时前
自定义VITE插件,生成可修改配置项,用于不同项目部署
前端·javascript·react.js
小钰能吃三碗饭11 小时前
第一篇:【前端翻身计划】从菜鸟到高手,JavaScript ES6+实战秘籍揭秘!
前端·javascript·react.js
蓉妹妹12 小时前
AntDesign下,Select内嵌Menu标签,做一个多选下拉框,既可以搜索,还可以选择下拉项
前端·react.js