React render 方法的原理

最新推荐文章于 2025-08-07 13:15:00 发布

原创最新推荐文章于 2025-08-07 13:15:00 发布 · 795 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#react.js #javascript #前端

本文详细解释了React中render函数的不同形式，介绍了virtualDOM的概念以及如何通过setState和useState触发render。重点讨论了类组件与函数组件的渲染规则差异，以及何时会重新渲染DOM。

一、原理

首先，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>
  );
}