[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;

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













主目录

与歌谣一起通关前端面试题