学习React(22) - 介绍Pure components

今天，就介绍一下pure components, 博主也不知道怎么翻译成中文才正确，就先用英文吧！

这个得创建三个文件：
第一个文件

// PureComponent.js 文件
import React, { PureComponent } from 'react'class PureComp extends PureComponent {render() {console.log("Pure component")return (<div>Pure Component {this.props.name}</div>)}
}export default PureComp

第二个文件

// RegularComponent.js 文件
import React, { Component } from 'react'class RegularComponent extends Component {render() {console.log("This is the Regular component")return (<div>Regular Component {this.props.name}</div>)}
}export default RegularComponent

第三个文件

// ParentComponent.js 文件
import React, { Component } from 'react'
import PureComp from './PureComponent'
import RegComp from './RegularComponent'class ParentComponent extends Component {constructor(props) {super(props)this.state = {name: "World"}}componentDidMount() {setInterval(() => {this.setState({name: "World"})}, 2000)}render() {console.log("*******This is the parent component*********")return (<div>Parent Component<RegComp name={this.state.name}/><PureComp name={this.state.name}/></div>)}
}export default ParentComponent

在App.js 文件里

// App.js 文件
import React from 'react';
import './App.css';
import Parentcom from './ParentComponent'function App() {return (<div className="App"><Parentcom/></div>);
}export default App;

结果如下：

在Chrome的console里显示：

Pure Component 只出现一次

Regular Component: A regular component does not implement the shouldComponentUpdate method. It always returns true by default.

Pure Component: A pure component on the other hand implements shouldComponentUpdate with a shallow props and state comparison.

Shallow Comparison (SC)
Primitive Types: a (SC) b returns true if a and b have the same value and are of the same type.

Complex Types: a (SC) b returns true if a and b reference the exact same object.

Pure Component:
A pure component implements shouldComponentUpdate with a shallow prop and state comparison.
Pure components by preventing unnecessary renders can give you a performance boost certain scenarios.

总结：
We can create a component by extending the pureComponent class.

A pureComponent implements the shouldComponentUpdate lifecycle method by performing a shallow comparison on the props and state of the component.

If there is no difference, the component is not re-rendered-performance boost.

It is a good idea to ensure that all the children components are also pure to avoid unexpected behavior.

Never mutate the state. Always return a new object that reflects the new state.

如果觉得不错的话，就用点赞来代替五星好评吧！