component和 purecomponent

久光

于 2019-04-29 17:08:29 发布

阅读量292

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Charlene_lx/article/details/89678811

本文探讨了React中组件的优化技巧，特别是PureComponent的使用，它可以避免不必要的渲染，提高应用性能。通过对比Component，解释了PureComponent的工作原理及其限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

componet

是 react的组件对象，这个对象有一些自己的内置属性和方法：例如componentWillMount 这种，我们一般用的时候，就是重写这个函数。

class App extends React.Component  //写组件时候,就是继承这个对象.

PureComponent

React15.3中新加了一个 PureComponent 类，只要把继承类从 Component 换成 PureComponent 即可，可以减少不必要的 render操作的次数，从而提高性能.

但是PureComponent 不能重写 shouldComponentUpdate函数。

<CommentItem likeComment={this.likeComment} userID={user.id} />
class CommentItem extends PureComponent {
  ...
  handleLike() {
    this.props.likeComment(this.props.userID)
  }
  ...
}

原理:

当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM
的生成和比对过程