React.memo:这个高阶组件会记住 ChildComponent 的渲染输出。如果传递给 ChildComponent 的数据 prop 没有改变,则当父组件由于其他状态(如计数)的更改而重新渲染时,React.memo 将阻止 ChildComponent 重新渲染。 工作原理:单击“增加计数”按钮时,ParentComponent 中的计数状态将更新。通常,这会导致 ParentComponent 和 ChildComponent 都重新渲染。但是,使用 React.memo,ChildComponent 仅在数据 prop 更改时才会重新渲染。由于数据保持不变,控制台日志“ChildComponent 已渲染”仅出现一次,表明 ChildComponent 不会不必要地重新渲染。
useCallback:记忆 handleClick,这样它就不会在每次渲染时重新创建。这可确保 ChildComponent 仅在实际 props 发生变化时重新渲染。 React.memo:除非其 props 发生变化,否则防止 ChildComponent 重新渲染。
学习更多技能
请点击下方公众号