React.render() 和ReactDOM.render() 有区别吗？

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.render 已从 React 0.14 开始弃用。有了 react-native、react-art、react-canvas 和 react-three 这样的包，很明显 React 的美和本质与浏览器或 DOM.

为了使这一点更清楚并更容易构建更多 React 可以渲染的环境，主要的 React 包已分为两个：react 和 反应-dom.

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

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);

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

Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

如果你得到那个错误，它有点神秘，想想下面的函数正在为 DOM:

创建一个组件的实例

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

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

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

ReactDOM.render(<App />);

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

Target container is not a DOM element.

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

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

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

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

所以使用这样的粗箭头与使用 function 关键字相同。

React.render() 和ReactDOM.render() 有区别吗？

Is there any difference between React.render() and ReactDOM.render()?

reactjs