React render方法的原理和触发时机

1. 原理

首先，render函数在react中有两种形式：
在类组件中，指的是render方法：

class Foo extends React.Component {
    render() {
        return <h1> Foo </h1>; 
    } 
}

在函数组件中，指的是函数组件本身：

function Foo() {
    return <h1> Foo </h1>;
}

在render中，我们会编写jsx,jsx通过babel编译后就会转化成我们熟悉的js格式，如下：

return ( 
    <div className='cn'>
         <Header> hello </Header> 
         <div> start </div>
         Hello World
    </div> 
)

babel编译后

return (
    React.createElement(
    'div', 
    {
        className : 'cn'
    },
    React.createElement(
        Header,
        null,
        'hello'
    ),
    React.createElement(
        'div',
        null,
        'start'
    ),
    'Hello World'
    ) 
)

从名字上来看，createElement方法用来创建元素的 在react中，这个元素就是虚拟DOM树的节点，接收三个参数：

• type:标签
• attributes:标签属性，若无则为null
• children:标签的子节点

这些虚拟DOM树最终会渲染成真实DOM

在render过程中，React将新调用的render函数返回的树与旧版本的树进行比较，这一步是决定如何更新DOM的必要步骤，然后进行diff比较，更新DOM树

2. 触发时机

render的执行时机主要分成了两部分：
● 类组件调用setState修改状态

class Foo extends React.Component {
    state = { count: 0 };
    increment = () => {
        const { count } = this.state;
        const newCount = count < 10 ? count + 1 : count;
        this.setState({ count: newCount });
    };
    render() {
        const { count } = this.state;
        console.log("Foo render");
        return ( 
            <div> 
                <h1> {count} </h1> 
                <button onClick={this.increment}>Increment</button>
            </div> 
        );
    }
}

点击按钮则调用setState方法，无论count发生变化与否，控制台都会输出Foo render ,证明render执行了

● 函数组件通过useState hook修改状态

function Foo() {
    const [count, setCount] = useState(0);
    function increment() {
        const newCount = count < 10 ? count + 1 : count;
        setCount(newCount); 
    }
    console.log("Foo render");
    return (
         <div> 
            <h1> {count} </h1> 
            <button onClick={increment}>Increment</button>
        </div> 
    ); 
}

函数组件通过useState这种形式更新数据，当数组的值不发生改变了，就不会触发render

● 类组件重新渲染

class App extends React.Component {
    state = { name: "App" };
    render() {
        return ( 
            <div className="App"> <Foo /> 
                <button onClick={() => this.setState({ name: "App" })}>
                    Change name
                </button>
            </div>
        ); 
    } 
}
function Foo() {
    console.log("Foo render");
    return (
         <div> <h1> Foo </h1></div>
    );
}

只要点击了App组件内的Change name按钮，不管Foo其体实现是什么,都会被重新render渲染

● 函数组件重新渲染

function App(){
    const [name,setName] = useState('App')
    return (
         <div className="App"> <Foo />
            <button onClick={() => setName("aaa")}> { name }</button>
        </div> 
    )
}
function Foo() {
    console.log("Foo render");
    return (
         <div> <h1> Foo </h1></div> 
    ); 
}

可以发现，使用useState来更新状态的时候，只有首次会触发Foo render ,后面并不会导致Foo render

3. 总结

render函数里面可以编写JSX,转化成createElement这种形式，用于生成虚拟DOM,最终转化成真实DOM

在React中，类组件只要执行了setState方法，就一定会触发render函数执行，函数组件使用useState更改状态不一定导致重新render

组件的props改变了，不一定触发render函数的执行，但是如果props的值来自于父组件或者祖先组件的state
在这种情况下，父组件或者祖先组件的state发生了改变，就会导致子组件的重新渲染

所以，一旦执行了setState就会执行render方法，useState会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染