react 与 react DOM 混淆答案

【问题标题】：react vs react DOM confusionreact 与 react DOM 混淆
【发布时间】：2016-09-29 03:12:34
【问题描述】：

我正在使用带有 react 的 ES6 babel，现在对于更新版本的 react，react DOM 不再是它的一部分。我对以下代码的怀疑是，它是第一行需要吗？因为我没有地方需要 React，但最后一行我需要 ReactDOM。

const React = require('react')
const ReactDOM = require('react-dom')

const App = () => {
    return (
        <div className='app-container'>
            <div className='home-info'>
                <h1 className='title'>sVideo</h1>
                <input className='search' type='text' placeholder='Search' />
                <button className='browse-all'> or Browse All</button>
            </div>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('app'))

【问题讨论】：

是的，它是必需的。 return 语句被编译成React.createElements 和其他语句。 ReactDOM 也依赖于 React。

标签： javascript reactjs

【解决方案1】：

从0.14 开始的 React 分为两部分：React 和 ReactDOM。 您正在使用 ReactDOM to render you HTML element。因此，在组件中使用 import ReactDOM 绝对是有意义的。但就 React 而言，尽管您没有直接使用 React，而是间接使用了它，因为您在 return statement will be transpiled into React.createElement 函数中编写的任何内容都会创建实际的 DOM 元素。

现在你可以看到如果你在你的代码中省略 React，你会看到一个错误

反应不存在

它会给你React is not recognised in React.createElement.希望你理解它。

【讨论】：

【解决方案2】：

来自ReactDOM的文档：

这个包作为 DOM 相关渲染路径的入口点。它旨在与同构 React 配对，后者将作为 react 发送到 npm。

因此，您的 ReactDOM 专门用于渲染 DOM 相关路径。这曾经与 React 包本身紧密耦合，但 React 中内置的 DOM 已被弃用。

现在，Facebook 将 ReactDOM 作为自己的包单独提供，所以是的，如果您计划渲染任何 React，则需要将其包含在您的应用程序中。而且你也肯定需要React 本身——ReactDOM 只是 DOM 方面。

这是reddit post that explains the separation from React and ReactDOM。

React 团队正致力于将所有与 DOM 相关的内容提取到一个名为 ReactDOM 的单独库中。 0.14 是第一个拆分库的版本。

有趣的事实，因为他们想要支持向后兼容性，他们保留了 React 的内部 DOM，但阻止人们使用它in a funny way。

【讨论】：

【解决方案3】：

它们与 0.14 版本是分开的，对于任何 react 项目，您都需要包含两者，ReactDOM 位于 React 和 React ，没有ReactDOM就无法渲染到DOM，所以答案是大大的Yes！

【讨论】：

【解决方案4】：

React 需要分离与生成 Web 应用程序（HTML DOM）无关的核心反应代码。特别是 react-native，React Native 需要一组不同的包，react-dom 不是其中之一。

如果 react 库从未拆分过与 DOM 相关的代码，那么 react-native 项目的核心 react 代码将是死重的，然后需要使用 tree-shaking 和死代码消除来删除你所在的模块从未作为您的应用程序的一部分导入。

让 react 拆分这段代码很有意义。

【讨论】：