react重新渲染问题

小木
  • 295

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组件函数重新执行一次,是这么理解吗?

回复
阅读 986
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...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏