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 theprecautionswhen using Component and PureComponent? The following is a practical case, let's take a look.

I started switching to usingPureCompoentbecause it was a more performant version ofComponent. While this turns out to be true, this increase in performance comes with a few caveats. Let’s dig deeper intoPureComponentand understand why we should use it.

There is one difference between Component and PureComponent

In addition to providing you with ashouldComponentUpdatemethod with a shallow comparison,PureComponentandComponentBasically identical. Whenpropsorstatechanges,PureComponentwill perform a shallow comparison betweenpropsandstate. On the other hand, Component does not compare thepropsandstateof the current and next states. Therefore, the component will be re-rendered by default whenevershouldComponentUpdateis called.

Shallow Comparison 101

When comparing the previous and nextpropsandstate, the shallow comparison will check whether the original values have the same Value (for example:1 == 1orture==true), whether the array andobjectreferenceare the same.

Never change

You may have heard, don't change objects and arrays inpropsandstateif 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 previouspropsreference 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 extensionoperatoror 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 theirpropsandstatethan 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:

 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 inlikeComment. This will have the side effect of changing thepropsof 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'slikeCommentproperty will always have the same reference, so there won't be unnecessary re-renders.

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 totopTenevery time the component re-renders, even ifpostshas 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'sstateso 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!