React Hook 学习笔记
2020-07-14 06:13
429 查看
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。
相关文章推荐
- React学习笔记
- react-native学习笔记——简单尝试
- React学习笔记_按需加载
- HOOK钩子机制学习笔记(1)
- 我的学习笔记_Windows_HOOK编程 2009-12-03 11:19
- 我的Hook学习笔记
- React Native 学习笔记二十(关于ListView的使用)
- React学习笔记(Chapter4)
- react-router学习笔记之入门
- React Native 学习笔记八(文本输入的处理)
- ReactJS学习笔记——组件复合及表单的处理
- react简书项目学习笔记31模拟数据渲染,在项目中使用redux-thunk请求ajax数据
- React生命周期学习笔记
- React入门基础(学习笔记)
- React学习笔记之事件处理(二)
- 我的学习笔记_Windows_HOOK编程 2009-12-03 11:19
- react初入学习笔记
- react学习笔记之state以及setState的使用
- React 基础学习笔记【一】
- React Native 学习笔记之--布局