Detailed explanation of the difference between Component and PureComponent

This time I will bring you a detailed explanation of the difference between the use of Component and PureComponent. What are the precautions when using Component and PureComponent? The following is a practical case, let's take a look.

I started switching to using PureCompoent because it was a more performant version of Component. While this turns out to be true, this increase in performance comes with a few caveats. Let’s dig deeper into PureComponent and understand why we should use it.

There is one difference between Component and PureComponent

In addition to providing you with a shouldComponentUpdate method with a shallow comparison, PureComponent and Component Basically identical. When props or state changes, PureComponent will perform a shallow comparison between props and state. On the other hand, Component does not compare the props and state of the current and next states. Therefore, the component will be re-rendered by default whenever shouldComponentUpdate is called.

Shallow Comparison 101

When comparing the previous and next props and state, the shallow comparison will check whether the original values ​​have the same Value (for example: 1 == 1 or ture==true), whether the array and object reference are the same.

Never change

You may have heard, don't change objects and arrays in props and state if you Changing objects in the parent component, your "pure" child component will not update. Although the value has been changed, the subcomponent compares whether the previous props reference is the same, and no in-depth comparison is performed.

In contrast, you can return a new object by using the es6 assign method or the array extension operator or using a third-party library to achieve immutability.

Is there any performance issue?

Comparing primitive values ​​and object references is a low-cost operation. If you have a list of child objects and one of them updates, it's much faster to check their props and state than to re-render each child node

OthersSolutions

Don’t bind values ​​in the render function

Suppose you have a list of items, and each item passes a unique parameter to the parent method. To bind parameters, you might do this:

<CommentItem likeComment={() => this.likeComment(user.id)} />

This problem will cause a new function to be created every time the parent component render method is called, passing it in likeComment. This will have the side effect of changing the props of each child component, which will cause them all to re-render, even if the data itself has not changed.

To solve this problem, just pass the reference of the parent component's prototype method to the child component. The child component's likeComment property will always have the same reference, so there won't be unnecessary re-renders.

<CommentItem likeComment={this.likeComment} userID={user.id} />

Then create a class method in the child component that references the incoming properties:

class CommentItem extends PureComponent {
  ...
  handleLike() {
    this.props.likeComment(this.props.userID)
  }
  ...
}

Do not derive data in the render method

Consider how your configuration component will Display the user's ten favorite articles from a series of articles.

render() {
  const { posts } = this.props
  const topTen = posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  return //...
}

There will be a new reference to topTen every time the component re-renders, even if posts has not changed and the derived data is the same. This will cause unnecessary re-rendering of the list.

You can solve this problem by caching your derived data. For example, set derived data in your component's state so that it only updates when posts update.

componentWillMount() {
  this.setTopTenPosts(this.props.posts)
}
componentWillReceiveProps(nextProps) {
  if (this.props.posts !== nextProps.posts) {
    this.setTopTenPosts(nextProps)
  }
}
setTopTenPosts(posts) {
  this.setState({
    topTen: posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  })
}

If you are using Redux, consider using reselect to create "selectors" to combine and cache derived data.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of life cycle in React

Detailed explanation of the use of component communication in React

The above is the detailed content of Detailed explanation of the difference between Component and PureComponent. For more information, please follow other related articles on the PHP Chinese website!