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

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

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。

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文件并找到divwithclass="container"或任何它是根节点。我们所要做的就是传递对该容器的引用，如下所示：

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

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

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

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