Question

我注意到他们使用的文章中的一些地方React.render()和一些地方ReactDOM.render()。这两者之间是否有任何具体差异？

Answer 1

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

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

Answer 2

自React 0.14起，React.render已被弃用。使用反应原生，反应艺术，反应画布和反应三等包，很明显React的美丽和本质与浏览器或DOM无关。

为了使这一点更加清晰，并且可以更容易地构建React可以渲染的更多环境，主反应包已分为两部分：反应和 react-dom。< / strong>

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

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

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

Answer 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 关键字相同。

React.render（）和ReactDOM.render（）之间有什么区别吗？

3 个答案: