react与react DOM 混淆

IT技术 javascript reactjs
2021-03-29 06:16:22

我正在使用 ES6 babel 和 react，现在对于较新版本的 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'))
4个回答

React 从版本0.14开始分为两部分：React和ReactDOM。您正在使用ReactDOM to render you HTML element. 所以你import ReactDOM在你的组件中肯定是有意义的。但是就 React 而言，尽管您没有直接使用 React，但它被间接使用，因为无论您在return statement will be transpiled into React.createElement函数中编写什么都会创建实际的 DOM 元素。

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

react不存在

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

来自以下文档ReactDOM：

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

所以你ReactDOM是专门针对 DOM 相关路径进行渲染的。这曾经与 React 包本身紧密耦合，但 React 中的内置 DOM 已被弃用。

现在，Facebook 将 ReactDOM 作为自己的包单独发布，所以是的，如果您打算渲染任何 React.js，则需要将它包含在您的应用程序中。而且你肯定也需要React它自己——ReactDOM只是 DOM 方面。

这是一篇Reddit 帖子，解释了 React 和 ReactDOM 的分离。

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

有点有趣的事实，因为他们想要支持向后兼容性，所以他们保留了 React 的内部 DOM，但阻止人们以一种有趣的方式使用它。

它们与 0.14 版本分开，对于任何React项目，您都需要包含两者，ReactDOM位于React之上，而React没有ReactDOM无法渲染到DOM，因此答案是肯定的！

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

如果 react 库从未拆分过与 DOM 相关的代码，那么 react-native 项目的核心 react 代码会很重，然后需要使用摇树和死代码消除来删除您从未导入的module作为您应用程序的一部分。

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

其它你可能感兴趣的问题
上一篇在react-router中保留查询参数 下一篇如何为 MUI Chip 背景添加线性渐变颜色？