React（五）：React在什么情况下会render

React中组件进行render的情况

1、初始化

React在应用初始化的时候，会渲染全部组件，组件的挂载过程见文章《React（三）：组件生命周期》中的介绍。

2、setState()在任何情况下都会导致组件的重新渲染，即使state未发生变化

当一个组件调用了setState()函数时，不论state是否发生了变化，该组件都将被重新渲染。

例如：

import React from 'react';

class Test extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            strTest:"render测试"      //初始化state中strTest值
        }
    }

    //这里调用了setState但是并没有改变setState中的值
    handleClick = () => {
        const prestrTest = this.state.strTest;
        this.setState({
            prestrTest:this.state.strTest
        })
    }

    render(){
        //当render函数被调用时，打印当前的strTest
        console.log(this.state.strTest)
        return(
            <h1 onClick = {this.handleClick}>
                {this.state.strTest}
            </h1>)
    }
}
export default Test;

初始化该组件，页面显示“render测试”，控制台也输出"render测试“，点击页面字符串”render测试“，页面UI未发生变化，但是控制台输出了10次"render测试"，可见setState()会导致组件重新渲染，即使state未发生改变。

3、只要父组件重新渲染了，那么子组件就会重新渲染

即使组件未发生变化，并且从父组件接收的props也没有发生变化，但是只要父组件重新渲染了，那么子组件就会重渲染。

假设父组件中的state设置了一个数组，该数组通过函数传递至四个子组件中，每个组件分别显示内容1,2,3,4。当点击子组件1，更改对应的state，会导致父组件state中的数组发生改变，父组件重新渲染，继而导致所有的子组件全部重新渲染，即使子组件2,3,4自身并未发生变化，接收到的props也未发生变化。

import React from 'react';

class Son extends React.Component{
    render(){
        const {index,number,handleClick} = this.props;
        console.log(number);
        return(
            <h1 onClick ={() => handleClick(index)}>
                {number}
            </h1>
        )
    }
}
class Father extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            numberArray:[1,2,3,4]
        }
    }
    //点击后使numberArray中数组下标为index的数字值发生变化，重渲染对应的Son组件
    handleClick = (index) => {
        let preNumberArray = this.state.numberArray;
        preNumberArray[index] += 4;
        this.setState({
            numberArray:preNumberArray
        })
    }
    render(){
        return(
            <div>{
                this.state.numberArray.map(
                    (number,key) => {
                        return(
                            <Son
                                key = {key}
                                index = {key}
                                number ={number}
                                handleClick ={this.handleClick}/>
                        )
                    }
                )
            }
            </div>
        )
    }
}
export default Father

React的组件重渲染机制，是一个严谨的做法，因为它避免了，状态更新后，手动去重渲染相关组件的操作。但是有些时候我们更新了某个组件的数据，但是并不想让与其相关的其他组件被重渲染，因为反复的重渲染未变化的组件，既耗时也会影响性能，此时就需要对React的重渲染进行优化，详细的介绍见文章《React（六）：重渲染优化》。

欢迎关注公众号“洁儿的漫漫求学路”，互相学习，共同进步~