react重新渲染问题

Question

react优化中重要的一部分是避免重新渲染，这里的渲染是指什么，是指真实dom更新还是函数组件执行，看这个例子：

const App=()=>{
  const [state,set]=useState({a:1,b:1})
 
  return <div>
    <A name={state.a} handle={handle}/>
    {useMemo(()=><B b={state.b}/>,[state.b])}
  </div>
  }
  
  const B=(props)=>{
  console.log('渲染')
  ...
  }

我的理解是组件state或者props变了，组件就会返回新的vdom或者说fiber,然后去diff收集差异，最后更新dom，这里加不加useMemo缓存优化，其实都会执行diff?B组件对应的真实dom其实不加useMemo也没有去重新渲染（生成的对象是一样的），所以这里的优化是指不让B组件函数重新执行一次，是这么理解吗？

Answer 1

你的理解是对的，如果只改变了state.a的情况下这里加不加useMemo都不会导致B组件实际对于dom的更新，只不过，如果不加useMemo react在进行diff是需要多做一些工作，react会diff B组件对应子树，但是并没有发现有什么更新，所有不会操作B组件扫对于的dom，而加了useMemo后react能直接发现B组件前后props是严格相等的可以直接进行其bailout逻辑，直接能省去B组件对于子树diff组件的逻辑

对应源码：
(判断props是否严格相等)
https://github.com/facebook/r...

(props严格相等执行bailout逻辑)
https://github.com/facebook/r...

(props不相等，继续diff其子树)
https://github.com/facebook/r...