useEffect
useEffect(effect, [])
- useEffect()在渲染完成后执行,而且是每次渲染完后都执行
- effect中能够返回一个函数,该函数将在组件卸载前执行,以实现与componentWillUnmount()类似的功能(一般用于清除副作用)
- 这个被返回的清除函数,事实上也是每次渲染后都执行,这会减少bug!
https://zh-hans.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update
在class组件中,为了避免在每次更新后都清理/执行effect,我们常这样利用componentDidUpdate()
componentDidUpdate(prevProps, prevState) {
if (prevState.count !== this.state.count) {
document.title = `You clicked ${this.state.count} times`;
}
}
控制useEffect
在组件更新完成后,如果当前的state、props与之前的相同,就不去做某些操作,因此能优化性能。
在函数组件中,运用useEffect()方法,我们一样能做到这一点,而且更简单:
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
即给useEffect()传入第二个参数:依赖列表,它是一个数组,里面存放需要进行比较的值,只要数组中的任一值与之前的不相等,就会执行effect,否则就跳过此次effect。