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