React--组件更新机制&组件性能优化

1.1setState{}的两个作用：

• 修改state
• 更新组件（UI）

1.2过程：父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其所有子组件）

 2.减轻state

class Hello extends Component{
    componentDidMount(){
//timeId存储到this中，而不是state中
        this.timeId = setInterval(()=>{},2000)
    }
    commponentWillUnmount(){
        clearInterval(this.timerId)
    }
    render(){...}
}

• 减轻state：只存储跟组件渲染相关的数据（比如：count/列表数据/loading等）
• 注意：不用做渲染的数据不要放在state中，比如定时器id等
• 对于这种需要在多个方法中用到的数据，应该放在this中

3.避免不必要的重新渲染

• 组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
• 问题：子组件没有任何变化时也会重新渲染
• 如何避免不必要的重新渲染呢？
• 解决方法：使用钩子函数shouldComponentUpdate（nextProps，nextState）
• 作用：通过返回值决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染 
• 触发时机：更新阶段的钩子函数，组件重新渲染前执行（shouldComponentUpdate-->render）
• 随机数案例

import { number } from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
// import MyEditor from './components/MyEditor';

class App extends React.Component{
    state={
        number:0
    }
    handleClick = () =>{
        this.setState(()=>{
            return{
                number: Math.floor(Math.random()*3)
            }
           
        })
    }

    shouldComponentUpdate(nextprops,nextState){
        console.log('最新的state：',nextState)
        console.log('this.state:',this.state)
        //返回false，阻止组件重新渲染
        return false
    }
    render(){
        return(
            <div>
                <h1>随机数：{this.state.number}</h1>
                <button onClick={this.handleClick}>重新生成</button>
            </div>
        )
    }
}


ReactDOM.render(<App></App>,
document.getElementById('root'))

改进：

import { number } from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
// import MyEditor from './components/MyEditor';

class App extends React.Component{
    state={
        number:0
    }
    handleClick = () =>{
        this.setState(()=>{
            return{
                number: Math.floor(Math.random()*3)
            }
           
        })
    }

    shouldComponentUpdate(nextprops,nextState){
        console.log('最新的state：',nextState)
        console.log('this.state:',this.state)
        // //返回false，阻止组件重新渲染
        // return false
        if(nextState.number === this.state.number) return false
        else return true
    }
    render(){
        console.log('重新渲染')
        return(
            <div>
                <h1>随机数：{this.state.number}</h1>
                <button onClick={this.handleClick}>重新生成</button>
            </div>
        )
    }
}


ReactDOM.render(<App></App>,
document.getElementById('root'))

更加简洁的写法：if nextState.number !== this.state.number 

4.使用另外一个参数（nextProps） 

import { number } from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
// import MyEditor from './components/MyEditor';

class App extends React.Component{
    state={
        number:0
    }
    handleClick = () =>{
        this.setState(()=>{
            return{
                number: Math.floor(Math.random()*3)
            }
           
        })
    }

    render(){
        // console.log('重新渲染')
        return(
            <div>
                <NumberBox number={this.state.number}></NumberBox>
                <button onClick={this.handleClick}>重新生成</button>
            </div>
        )
    }
}


class NumberBox extends React.Component{
    shouldComponentUpdate(nextProps,nextState){
        console.log('最新的props：',nextProps,',当前props',this.props)
        return nextProps.number !== this.props.number
    }
    render(){
        console.log('重新渲染')
        return <h1>随机数：{this.props.number}</h1>
    }
}


ReactDOM.render(<App></App>,
document.getElementById('root'))