[react] react中怎样阻止组件渲染？

class组件

使用shouldComponentUpdate生命周期，return false
继承React.PureComponent只要prop没有改变(浅比较)，就不会执行render函数

函数式组件

使用React.memo包裹组件函数，props没有改变就不会执行函数
使用React.memo包裹函数的同时传入比较函数作为第二个参数，return true，组件函数就不会执行

通用

在jsx的属性（包括事件）定义中，讲能提取的属性值提到外层，保证其引用地址不会发生改变,如下

import React from 'react';class Child extends React.PureComponent {render () {console.log('child render')return <h2 style={this.props.style}>Child</h2>}
}// 优化前:每次按钮的点击，都会引起Child组件的rener方法执行
class Demo extends React.Component {onClick = () => {this.setState({})}render () {return <><button onClick={this.onClick}>test</button><Child style={{color: 'red'}} /></>}
}// 优化后:按钮的点击不会引起Child组件的rener方法执行
class Demo extends React.Component {childStyle = {color: 'red'}onClick = () => {this.setState({})}render () {return <><button onClick={this.onClick}>test</button><Child style={this.childStyle} /></>}
}export default Demo;

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论