ReactDOM.render与React Component呈现差异

Question

我已经开始学习React了.render()方法用于两个地方:

1. 使用ReactDOM.render()

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

2. 其他是扩展组件的内部类.

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

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

Answer 1

render()React 中有两种不同的方法。一个是ReactDOM.render()，另一个是Component.render()。

Component.render()

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

ReactDOM.render()

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

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

在此处阅读有关 ReactDOM.render() 的更多信息

Answer 2

域名注册地址：

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

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

ReactDOM.render两者都做。它创建（或更新）虚拟 DOM，然后将其额外添加到实际的浏览器 DOM。