面试官：说说React render方法的原理？在什么时候会被触发？

╰半橙微兮° 2022-09-01 07:36 159阅读 0赞

![c5a3e6ec0a77a97e747b0c10a9e8022f.png][]

## 一、原理 ##

首先，`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>
        Right Reserve
      </div>
    )

`babel`编译后：

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

从名字上来看，`createElement`方法用来元素的

在`react`中，这个元素就是虚拟`DOM`树的节点，接收三个参数：

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

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

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

## 二、触发时机 ##

`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`

## 三、总结 ##

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

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

组件的`props` 改变了，不一定触发 `render` 函数的执行，但是如果 `props` 的值来自于父组件或者祖先组件的 `state`

在这种情况下，父组件或者祖先组件的 `state` 发生了改变，就会导致子组件的重新渲染

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

![fd4bd908adc28600289de201771c945d.png][]

## 参考文献 ##

*  https://zhuanlan.zhihu.com/p/45091185
 *  https://juejin.cn/post/6844904181493415950

\--The End--

系列正在更新：25/33

点击下方卡片解锁更多

![553db80ee08063c19a42837bae11b0bf.png][]

创作不易，星标、点赞、在看 三连支持

[c5a3e6ec0a77a97e747b0c10a9e8022f.png]: /images/20220829/201463eeb1bf4408b2e2b0b7b26f028f.png
[fd4bd908adc28600289de201771c945d.png]: /images/20220829/db560aed4024493b856cb8496f7e8f1e.png
[553db80ee08063c19a42837bae11b0bf.png]: /images/20220829/51ebead09dd24340b2a1b4986d26a071.png