Component and PureComponent analysis

Official documentation

React.PureComponentVery similar to React.Component. The difference between the two is that is React.Componentnot implemented shouldComponentUpdate(), but React.PureComponentimplements this function in a shallow way of comparing prop and state.

The official explanation is also easy to understand. It implements one more method React.PureComponentthan React.Componentin the middle, which means that when the component data changes, React.PureComponentit will be compared with the previous time. If it is the same, it will not be updated anymore.

There is no proof in words, you still have to experience it through the code.

Compared

Let’s first look at the code where the two are the same:

class Box1 extends React.Component {render() {console.log('Box1 update');return <div>Box1: {this.props.count}</div>;}
}

class Box2 extends React.PureComponent {render() {console.log('Box2 update');return <div>Box2: {this.props.count}</div>;}
}

First make two contrasting components Box1 and Box2, then make a parent component to introduce them, and set a method

export default () => {const [count, setCount] = React.useState(1);console.log('parent update');return (<div><Box1 count={count}/><Box2 count={count}/><button onClick={() => setCount(count + 1)}>+1</button></div>);
};

At this time, when the button button is clicked, the above two Box components will be updated.

This is also the most basic component update.

Cancel external data import

class Box1 extends React.Component {render() {console.log('Box1 update');return <div>Box1</div>;}
}
class Box2 extends React.PureComponent {render() {console.log('Box2 update');return <div>Box2</div>;}
}
export default () => {const [count, setCount] = React.useState(1);console.log('parent update');return (<div><Box1 /><Box2 /><button onClick={() => setCount(count + 1)}>+1</button></div>);
};

Cancel the introduction of external count in the Box component

At this time the page is updated to

At this time, you will find that only Box1 has been refreshed, but Box2 has not reloaded the component, that is, the PureComponent will not be updated if it is the same after a shallow comparison.

Why is it called shallow comparison?

Shallow comparison refers to comparing value types, and for slightly more complex reference types (Object), it is impossible to judge. Updates within react are all shallow comparisons.

export default () => {const [count, setCount] = React.useState({ num: 1 });console.log('parent update');const click = () => {const newCount = count;newCount.num = count.num + 1;setCount(newCount);console.log('update:', count)};return (<div><Box1 /><Box2 /><button onClick={click}>+1</button></div>);
};

At this time, the count inside the parent component is of object type. When updated at this time, the page will not trigger any update, and the parent component will not be refreshed (because it is a reference type, when newCount changes data, the count has actually changed. But the page will not respond).

As can be seen from the picture, the child component and parent component are not refreshed and neither printed.

Little knowledge points

The immutable definition of const is only for value types, and it is still mutable for reference types. The above code Yunqing will not report an error.

illustrate

All the above codes are based on the update of the parent component itself, and the child component will be refreshed. If I change setCount(count + 1)it to setCount(count + 0), then the parent component itself will not be refreshed, and the child component will naturally not have any changes.

Alternative ones are not updated

There is an exception where the refresh of the parent component drives the refresh of the child component. code show as below

const Parent = ({ children }) => {const [count, setCount] = React.useState(1);console.log('parent update');return (<div>{children}<button onClick={() => setCount(count + 1)}>box2</button></div>);
};

export default () => {return (<Parent><Box1 /><Box2 /></Parent>);
};

Extract the parent component and introduce the child components in the form of children. At this time, the changes that occur when the page is clicked are:

You will find that no matter how you click, only the Parent component is refreshed, and all sub-components are unresponsive.

I don't know the reason for this. It may be due to a problem when react generates DOM. I will answer this after in-depth study.

Summarize

PureComponent is mostly used to extract drop-down box components made from local cache or display components generated based on data dictionary. This fixed component basically does not change when the user uses it, and is only generated at the beginning of login and page loading.

at last

I compiled a set of "Interview Guide for Front-End Major Companies", which includes HTML, CSS, JavaScript, HTTP, TCP protocol, browser, VUE, React, data structure and algorithm. There are 201 interview questions in total, and I have made an answer for each question. Answer and analysis.

Friends in need can click on the card at the end of the article to receive this document and share it free of charge