Method 1: Use the life cycle function shouldComponentUpdate()
import React, {
Component } from 'react'
class Foo extends Component {
shouldComponentUpdate(nextProps, nextState) {
//两个参数nextProps和nextState，表示下一次props和一次state的值
//生命周期函数shouldComponentUpdate()默认返回ture，返回false时不会渲染render
if (nextProps.name === this.props.name) {
return false
}
return true
}
render() {
console.log('Foo render')
return null;
}
}
export default class App extends Component {
state = {
count: 0
}
render() {
return (
<div>
<button onClick={
() => this.setState({
count: this.state.count + 1 })}>Add</button>
{
/* 每次点击之后，state改变导致子组件也要重新进行不必要的渲染 */}
<Foo name="Mike" />
</div>
);
}
}
Method 2: Use React.PureComponent
import React, {
Component, PureComponent } from 'react'
class Foo extends PureComponent {
//React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()
render() {
console.log('Foo render')
return null;
}
}
export default class App extends Component {
state = {
count: 0,
}
render() {
const {
preson } = this.state
return (
<div>
<button onClick={
() => this.setState({
count: this.state.count + 1 })}>Add</button>
{
/* 每次点击之后，state改变导致子组件也要重新进行不必要的渲染 */}
<Foo name="Mike" />
</div>
);
}
}
React.PureComponent may produce false negative judgments due to the inconsistency of deep data, so the result of shouldComponentUpdate returns false, and the interface cannot be updated.
Method 3: Use react.memo (for functional components)
import React, {
Component, memo } from 'react'
//react.memo适用于函数式组件
//使用方式：只需将函数组件作为参数传入React.memo中
const Foo = memo(function Foo(props) {
console.log('Foo render')
return null;
});
export default class App extends Component {
state = {
count: 0,
}
render() {
const {
preson } = this.state
return (
<div>
<button onClick={
() => this.setState({
count: this.state.count + 1 })}>Add</button>
{
/* 每次点击之后，state改变导致子组件也要重新进行不必要的渲染 */}
<Foo name="Mike" />
</div>
);
}
}
React.memo will return a purified component MemoFuncComponent, which will be rendered in the JSX markup. When the parameter props and state state of the component change, React will check whether the previous state and parameter are the same as the next state and parameter. If they are the same, the component will not be rendered. If they are different, the component will be re-rendered. .