React知识点总结（五）

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中去。