最佳实践案例篇：React useEffect 、性能优化

用户429

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 <>...</>​
}​

Good:

代码块

function A() {​
    let [a, setA] = useState('a')​
    let [b, setB] = useState('b')​
    ​
    let all = ''​
    ​
    if(a === 'b' && b === 'a') all = a + b​
​
    ​
    return <>...</>​
}​

最佳实践案例篇：React useEffect 、性能优化​

最佳实践案例篇：React useEffect 、性能优化