React.render() 和 ReactDOM.render() 之间有什么区别吗？答案

【问题标题】：Is there any difference between React.render() and ReactDOM.render()?React.render() 和 ReactDOM.render() 之间有什么区别吗？
【发布时间】：2015-10-08 05:36:12
【问题描述】：

我注意到他们在文章中使用的一些地方React.render()和一些地方ReactDOM.render()。这两者有什么具体的区别吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

这是 0.14 引入的最新更改。他们将 React 拆分为核心库和 DOM 适配器。现在通过ReactDOM.render 完成渲染。

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

【讨论】：

【解决方案2】：

React.render 自 React 0.14 起已被弃用。使用 react-native、react-art、react-canvas 和 react-three 等包，很明显 React 的美丽和本质与浏览器或 DOM 无关。

为了更清楚地说明这一点并更容易构建更多 React 可以渲染的环境，主要的 react 包被分成两个：react 和 react-dom。

这为编写可在 Web 版本的 React 和 React Native 之间共享的组件铺平了道路。

react 包包含 React.createElement、.createClass、.Component、.PropTypes、.Children 以及其他与元素和组件类相关的助手。将这些视为构建组件所需的同构或通用帮助器。

react-dom 包有 ReactDOM.render、.unmountComponentAtNode 和 .findDOMNode。

【讨论】：

【解决方案3】：

React.render 自 React 0.14 起已被弃用。 React 分为两个独立的库。核心库知道如何使用 React 组件，将它们嵌套在一起等等，但是要获取组件并将其渲染到 DOM 是一个名为 ReactDOM 的单独库。所以要渲染一个组件，不要使用React，而是使用ReactDOM。

import React from 'react';
import ReactDOM from 'react-dom';

然后你会像这样应用它：

ReactDOM.render(App);

如果您尝试这样运行它，那么您可能会收到一条错误消息：

无效的组件元素。不要传递组件类，而是确保通过将其传递给 React.createElement 来实例化它。

如果你得到那个错误，它有点神秘，想想下面的函数是创建一个组件的实例到 DOM：

const App = function() {
  return <div>Howdy!</div>;
}

我将App 作为类传递给ReactDOM.render()，而不是组件的实例。所以它的意思是请确保您创建组件的实例然后传递它，或者我们需要实例化它然后将它传递给 DOM。

所以你可以通过像这样传递一个实例来修复它：

ReactDOM.render(<App />);

这样会创建一个App 的实例并将其传递给ReactDOM.render()，但您可能还没有到达那里，因为您可能会收到以下错误消息：

目标容器不是 DOM 元素。

所以 React 说我正在尝试渲染它，但我不知道在哪里渲染它，因为 ReactDOM 接受第二个参数，它是对页面上现有 DOM 节点的引用。当您渲染这个 <App /> 组件时，将该 HTML 插入到我们的 HTML 文档中已经存在的这个元素中。你会去你的index.html 文件并找到div 和class="container" 或任何它是根节点。我们所要做的就是像这样传递对该容器的引用：

ReactDOM.render(<App />, document.querySelector('.container'));

然后您将组件渲染到屏幕上。最后，五年前我们得到了 ES6 语法，因此上面的 App 组件可以这样重写：

const App = () => {
  return <div>Howdy!</div>;
}

因此，使用这样的粗箭头与使用 function 关键字相同。

【讨论】：