React在什么情况下会render

React在什么情况下会render

参考链接：https://blog.csdn.net/u012131835/article/details/85091437

1、初始化

react生命周期
1.componentWillMount 在渲染前调用,在客户端也在服务端。

2.componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

3.componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

4.shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。

5.componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

6.componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

7.componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

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的重渲染进行优化。