React知识点总结
一、useEffect和useMemo的执行时机基相关问题
- useEffect
useEffect
钩子函数是在组件重新渲染后,官网将这个阶段称之为commit
阶段,这个阶段分为:DOM修改前,修改DOM和DOM修改后三个阶段。
useEffect
是在DOM修改前将回掉函数保存在组件对应的fiber对象中,然后在DOM修改后(其实还要等一段时间后)执行。执行useEffect
本身不会造成重新渲染,在项目中经常遇到在useEffect
中执行form.setFieldsValue
,这句本身会改变form
实例的状态,从而引发render
。 - useMemo
useMemo
钩子函数其主要的目的是对子组件做渲染优化,原理类似于React.PureComponent
。与useEffect
不同的是,useMemo
是一个同步执行的钩子函数,所以它的执行依赖于父组件的重新渲染,且自身也不会触发渲染。因此可以看出useMemo
是在DOM修改前就执行了,保证了得到的值可以和更新的状态同步渲染到DOM中去。