javascript - ReactDOM.render 与 React Component 渲染差异

Question

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

1. 使用 ReactDOM.render()

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

1. Other 在扩展组件的内部类中。

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

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

Answer 1

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

Component.render()

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

ReactDOM.render()

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

尽管如此，在将任何 DOM 元素安装到容器之前，React 会在传递的元素树和当前安装的 DOM 之间执行差异，以确定必须更新当前安装的 DOM 中的哪些 DOM 节点以匹配新传递的元素树。

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