ReactDOM.render 与 React 组件渲染区别

Posted 2023-02-23

【中文标题】ReactDOM.render 与 React 组件渲染区别

【英文标题】：ReactDOM.render vs React Component render difference

【发布时间】：2018-07-01 12:49:29

【问题描述】：

我已经开始学习 React。 render() 方法用在两个地方：

使用 ReactDOM.render()

ReactDOM.render( <
  Test / > ,
  document.getElementById('react-application')
);

Other 在扩展组件的类内部。

class Test extends React.Component 
  render() 
    return ( <
      div > Hello < /div>
    )
  

这两种渲染方法的具体区别是什么？

【问题讨论】：

ReactDOM.render 与组件的渲染方法无关。 ReactDOM.render 将组件渲染到 DOM，而组件的渲染返回构成组件的元素。

【参考方案1】：

TLDR：

React 在添加（挂载）到实际浏览器 DOM 之前创建一个虚拟 DOM，在它显示之前。这两种方法中的一种仅执行第一个操作，而另一种则同时执行。

component.render 只创建虚拟 DOM。它不会将它添加到实际的浏览器 DOM 中。

ReactDOM.render 两者兼而有之。它创建（或更新）虚拟 DOM，然后将其添加到实际的浏览器 DOM。

【参考方案2】：

React 中有两个独立的 render() 方法。一个是ReactDOM.render()，另一个是Component.render()。

Component.render()

组件的render() 方法不接受任何参数，并返回该组件对应的 React 元素树。 Component.render() 在组件的 props 或状态发生更改并且 shouldComponentUpdate() 返回 true 时被调用。基于新的 props 和 state 从 Component.render() 方法返回一个新的元素 React 元素树。

ReactDOM.render()

ReactDOM.render(element, container) 方法是一个*** API，它将元素树的 React 元素根和容器 DOM 元素作为参数。然后它将传递的 React 元素转换为相应的 DOM 元素（树），然后将该元素作为子元素挂载到容器 DOM 元素中。

不过，在将任何 DOM 元素挂载到容器之前，React 会在传递的元素树和当前挂载的 DOM 之间进行比较，以确定必须更新当前挂载的 DOM 中的哪些 DOM 节点才能匹配新传递的元素树。

阅读更多关于 ReactDOM.render() here