Skip to main content

render 及 React 渲染机制

一、render 函数​

render 函数在 React 中有两种形式：

1、类组件中的 render 函数​

在类组件中，指的是 render 方法：

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

基本语法如下：

ReactDOM.render(element, container[, callback])

render 函数把元素挂载到实例中，并且返回这个 DOM 实例（即 refs 引用），当组件装载完毕时，会调用 callback 函数，如果无状态组件则 render 返回 null。

类组件 render 触发时机：只要执行了 setState 方法，就一定会触发 render 函数执行。

2、函数组件中的 render 函数​

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

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

在 render 中，JSX 通过 babel 编译后会转化成以下格式：

// 编译前
return (
  <div className="cn">
    <Header> hello </Header>
    <div> start </div>
    Right Reserve
  </div>
)

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

函数组件 render 触发时机：使用 useState 更改状态不一定导致重新 render。

二、React 的渲染机制​

React 的渲染机制就是 React 会调用 render() 函数构建一棵 DOM 树，当 state / props 的值发生变化时，React 不会把整个组件重新渲染，而是用它高效的 diff 算法做局部的更新，减少对 DOM 的频繁操作，提升性能。

三、总结​

render 函数中可以编写 JSX，转成 createElement 形式，用于生成虚拟 DOM，最终转为真实 DOM。

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

可以使用纯组件提升渲染性能