ReactDOM.render与React组件render的区别

Question

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

1. 使用 ReactDOM.render() 方法。

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

2. 另一个是在继承组件的类内部。

2. 另一个是在继承组件的类内部。

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

这两种渲染方法的确切区别是什么？

- Priyanka

---

ReactDOM.render 与组件的 render 方法无关。 ReactDOM.render 将您的组件渲染到DOM中，而组件的 render 方法则返回组成该组件的元素。 - Andrew Li

Answer 1

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

Component.render()

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

ReactDOM.render()

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

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

详细了解ReactDOM.render()请点击此处。

- TheBaj

Answer 2

TLDR：

React在将内容添加到浏览器DOM之前创建虚拟DOM以显示。其中两种方法分别执行第一只和两个操作。

`component.render`仅创建虚拟DOM而不将其添加到实际的浏览器DOM中。

`ReactDOM.render`则执行两个操作。它创建（或更新）虚拟DOM，然后将其添加到实际的浏览器DOM中。

- imagineerThat