Before today, I was in the process of learning and developing projects with React. At first, I always thought that PureComponent and Component have the same functions, but PureComponent has improved performance compared with Component. But why it improves performance and what’s the difference between the two is not well understood. Recently, in the process of in-depth research on React, we discovered how the PureComponent achieves performance improvement optimization and conducted a data lookup study on it.

The difference between:

  • PureComponent shouldComponentUpdate with a shallow comparison of prop and state, which is updated when the value of prop or state or the reference address changes.

  • Component triggers updates whenever state changes, regardless of whether the value is the same as the previous one.

What is shallow comparison?

When comparing prop and state in current and next states, compare whether the basic data type is the same (e.g. ‘A’ === ‘a’), and compare whether the reference address of the reference data type is the same, regardless of the value content.

Note: In PureComponent, when a direct assignment is made to an object or array passed in, it does not cause a re-rendering because it does not change the reference address.

Example 1:

import React, { Component, PureComponent } from 'react';

class ComponentDiff extends Component {
  render() {
    return (
      <div>
        different between PureComponent and Component <br />
        please open console
        <div style={{ display: 'flex' }}>
          <div style={{ marginRight: 200}} >
            <ComponentDiffPure />
          </div>
          <ComponentDiffNormal />
        </div>
      </div>); }}export default ComponentDiff;

class ComponentDiffPure extends PureComponent {
  constructor() {
    super(a);this.state = { text: 'true' };
    console.log('pure-constructor');
  }

  changeState = () = > {
    this.setState({ text: 'false' });
  };

  render() {
    console.log('pure-render');
    return (
      <div>
        pure
        <button onClick={this.changeState}>Click</button>
        <div>{this.state.text}</div>
      </div>); }}class ComponentDiffNormal extends Component {
  constructor() {
    super(a);this.state = { text: 'true' };
    console.log('normal-constructor');
  }

  changeState = () = > {
    this.setState({ text: 'false' });
  };

  render() {
    console.log('normal-render');
    return (
      <div>
        normal
        <button onClick={this.changeState}>Click</button>
        <div>{this.state.text}</div>
      </div>); }}Copy the code

PureComponent executes the render method only once when state’s text value changes. Component executes the render method each time. This is where the light contrast function comes in;

Example 2:

This is a subtree of a component. In each node, SCU represents the value returned by shouldComponentUpdate, and vDOMEq represents whether the React elements returned are the same. Finally, the color of the circle indicates whether the component needs to be mediated.

C4 and C5 shouldComponentUpdate should not be called because C2’s shouldComponentUpdate should not be used.

For C1 and C3, shouldComponentUpdate returns true, so React needs to look down the child node. Here C6’s shouldComponentUpdate returns true, and React updates the DOM because the rendered element is different from the previous one.

The last interesting example is C8. React needs to render this component, but since it returns the same React element as previously rendered, there is no need to update the DOM.

As you can see, React only changes the DOM of C6. For C8, the render is skipped by comparing the React element to the render. For children of C2 and C7, render is not called due to shouldComponentUpdate. So they don’t need contrast elements either.

conclusion

  1. PureComponentIt affects not only itself, but also the child components.
  2. Use prop and state if they change each timeComponentWill be more efficient, because shallow comparison also takes time.
  3. If you have anyshouldComponentUpdate, the implementationshouldComponentUpdate, if notshouldComponentUpdateThe method will determine whether or notPureComponentIf so, make shallow comparisons

Note: Components that inherit from Component should not render if shouldComponentUpdate returns false. Components that inherit from PureComponent don’t need to manually determine prop and state. So use shouldComponentUpdate in PureComponent with the following warning: IndexPage has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

References:

React.docschina.org/docs/optimi…

Blog.csdn.net/weixin_3624…

www.jianshu.com/p/b7733dc8f…