最佳实践案例篇：React useEffect 、性能优化
最佳实践案例篇：React useEffect 、性能优化
2023年11月16日修改
How to useEffect correct
问题：没有理解依赖的更新原理
Bad:
代码块
function A() {
function dep() {
}
// let dep = {}
useEffect(() => {
// do some effect
return function cleanup() {}
}, [dep])
return <>...</>
}
Good:
代码块
function A() {
let dep = useCallback(function dep() {
// ...
}, [])
// let dep = useMemo(() => ({}), [])
useEffect(() => {
// do some effect
return function cleanup() {}
}, [dep])
return <>...</>
}
问题：没有理解副作用是什么
Bad:
代码块
function A() {
let [a, setA] = useState('a')
let [b, setB] = useState('b')
let [all, setAll] = useState('')
useEffect(() => {
if(a === 'b' && b === 'a') setAll(a + b)
}, [a, b])
return <>...</>
}