【React】类组件渲染性能优化

背景：

• 实现一个功能：父组件变化了，子组件是静态的，不需要变化，所以render函数不想再次执行

PureComponnet

PureComponnet：如果接收到的新属性或者是更改后的状态和原属性、原状态相同的话，就不会去重新render了

在里面也可以使用shouldComponentUpdate，而且。是否重新渲染以shouldComponentUpdate的返回值为最终的决定因素

• 原始代码：

import React ,{Component} from 'react'
// PureComponent  和shouldComponentUpdate 功能一样
// PureComponent  和shouldComponentUpdate 都有，优先执行和shouldComponentUpdate
import ReactDOM  from 'react-dom'
// 子组件
class FooPure extends Component {
    // 初始化数据
    constructor(props){
        super(props);
        this.state = {};
    }
    render(){
        console.log("FooPure子组件渲染了");
        return(<div><h2>我是FooPure子组件</h2><br/></div>)
    }
}
class App extends Component {
    constructor(props) {
        console.log('constructor 运行了');
        super(props);
        this.state = {
            type: true
        };
    }
    changeType = () => {
        this.setState({ type:!this.state.type })
        console.log('按钮被点击了');
    }
    // 渲染数据
    render(){
        const { type} = this.state;
        return(
            <div>
                <button onClick={this.changeType}>点击按钮</button>{type}
                <FooPure />
            </div>
        )
    }
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)

---

• 使用PureComponnet实现需求：

import React ,{Component,PureComponent} from 'react'
// PureComponent  和shouldComponentUpdate 功能一样
// PureComponent  和shouldComponentUpdate 都有，优先执行和shouldComponentUpdate
import ReactDOM  from 'react-dom'
// 子组件
class FooPure extends PureComponent {
    // 初始化数据
    constructor(props){
        super(props);
        this.state = {};
    }
    // shouldComponentUpdate(){
    //     return true;
    // }
    render(){
        console.log("FooPure子组件渲染了");
        return(<div><h2>我是FooPure子组件</h2><br/></div>)
    }
}
class App extends Component {
    constructor(props) {
        console.log('constructor 运行了');
        super(props);
        this.state = {
            type: true
        };
    }
    changeType = () => {
        this.setState({ type:!this.state.type })
        console.log('按钮被点击了');
    }
    // 渲染数据
    render(){
        const { type} = this.state;
        return(
            <div>
                <button onClick={this.changeType}>点击按钮</button>{type}
                <FooPure />
            </div>
        )
    }
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)

shouldComponentUpdate

• 作用：阻止了未发生变化的组件的再次渲染，增加了性能
• 局限性：对于传递的参数是对象或数组时，判断不出来对象或数组的内部元素是否发生了变化
• nextProps ：将要从父组件传过来的props的值
• nextState ：将要改变的state的值
• 必须写返回值，需要更新返回true，不需要更新返回false

---

• 原始代码：

import React ,{Component} from 'react'
import ReactDOM  from 'react-dom'
// 子组件
class Foo extends Component {
    // 初始化数据
    constructor(props){
        super(props);
        this.state = {};
    }
    render(){
        console.log("Foo子组件渲染了");
        return(<div><h2>我是Foo子组件</h2><br/></div>)
    }
}
class App extends Component {
    constructor(props) {
        console.log('constructor 运行了');
        super(props);
        this.state = {
            type: true
        };
    }
    changeType = () => {
        this.setState({ type:!this.state.type })
        console.log('按钮被点击了');
    }
    // 渲染数据
    render(){
        const { type} = this.state;
        return(
            <div>
                <button onClick={this.changeType}>点击按钮</button>{type}
                <Foo />
            </div>
        )
    }
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)

---

• 使用shouldComponentUpdate实现需求：

import React ,{Component} from 'react'
import ReactDOM  from 'react-dom'
// 子组件
class Foo extends Component {
    // 初始化数据
    constructor(props){
        super(props);
        this.state = {};
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.type === this.props.type) {
            return false;
        } else {
            return true;
        }

    }
    render(){
        console.log("Foo子组件渲染了");
        return(<div><h2>我是Foo子组件</h2><br/></div>)
    }
}
class App extends Component {
    constructor(props) {
        console.log('constructor 运行了');
        super(props);
        this.state = {
            type: true
        };
    }
    changeType = () => {
        this.setState({ type:!this.state.type })
        console.log('按钮被点击了');
    }
    // 渲染数据
    render(){
        const { type} = this.state;
        return(
            <div>
                <button onClick={this.changeType}>点击按钮</button>{type}
                <Foo />
            </div>
        )
    }
}
ReactDOM.render(
 <App />,
  document.getElementById('root')
)