Question

我已经开始学习React了。 render（）方法用于两个地方：

使用ReactDOM.render（）

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

其他是扩展组件的内部类。

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

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

Answer 1

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

Component.render（）

组件的render()方法不带参数，并返回该组件的相应React元素树。当道具或组件的状态发生变化并且Component.render()返回true时，将调用shouldComponentUpdate()。根据新的道具和状态，从Component.render()方法返回新的元素React元素树。

ReactDOM.render（）

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

在将任何DOM元素安装到容器之前，React在传递的元素树和当前安装的DOM之间执行区分，以确定当前安装的DOM中的哪个DOM节点必须更新才能匹配新传递的元素树。

详细了解ReactDOM.render（）here

Answer 2

TLDR：

React在创建虚拟DOM之前，先将其添加（安装）到实际的浏览器DOM中，然后再显示它。两种方法中的一种仅执行第一个操作，另一种则同时执行。

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

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

Answer 3

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

在页面上显示“Hello，world”。

ReactDOM.render与React Component呈现差异

3 个答案: