React 性能优化技巧总结

这里因为为了决定 Foo 是否要被渲染出来，我们需要将 isFooVisible 放在 App中维护，因此也就不能将状态拆出放到更低的层级。不过，在 isFooVisible 发生变化时重新渲染 Bar 仍然是不必要的，因为 Bar 并不依赖 isFooVisible。我们只希望 Bar 在传入属性 name 变化时重新渲染。

那我们该怎么搞呢？两种方法。

其一，对 Bar 做记忆化（memoize）：

const Bar = React.memo(function Bar({name}) {  
  return <h1>{name}</h1>;  
});  

这就能保证 Bar 只在 name 发生变化时才重新渲染。

此外，另一个方法就是让 Bar 继承 React.PureComponent 而非 React.Component：

class Bar extends React.PureComponent {  
 render() {  
   return <h1>{name}</h1>;  
 }  
}  

是不是很熟悉？我们经常提到使用 React.PureComponent 能带来一定的性能提升，避免不必要的 render。

总结：避免组件不必要的渲染的方法有：React.memo 包裹的函数式组件，继承自 React.PureComponent 的 class 组件。

为什么不让每个组件都继承 PureComponent 或者用 memo 包呢？

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!