Noi*_*art 180 reactjs react-dom
我有点新的反应.我看到我们必须导入两件事才能开始,React并且ReactDOM,任何人都可以解释它们之间的区别.我正在阅读React文档,但它没有说.
Dav*_*lsh 236
React和ReactDOM最近才分成两个不同的库.在v0.14之前,所有ReactDOM功能都是React的一部分.这可能会引起混淆,因为任何稍微过时的文档都不会提及React/ReactDOM的区别.
顾名思义,ReactDOM是React和DOM之间的粘合剂.通常,您只会将它用于一件事:安装ReactDOM.render().ReactDOM的另一个有用功能是ReactDOM.findDOMNode()可以用来直接访问DOM元素.(你应该在React应用程序中谨慎使用的东西,但它可能是必要的.)如果你的应用程序是"同构的",你也可以ReactDOM.renderToString()在你的后端代码中使用.
对于其他一切,都有React.您可以使用React来定义和创建元素,生命周期钩子等,即React应用程序的内核.
React和ReactDOM分成两个库的原因是由于React Native的到来.React包含Web和移动应用程序中使用的功能.ReactDOM功能仅在Web应用程序中使用.[ 更新:经过进一步研究,很明显我对React Native的无知表现出来了.让网络和移动通用的React包更像是一种渴望,而不是现实.React Native目前是一个完全不同的包.]
请参阅宣布v0.14版本的博客文章:https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
Dan*_*nce 48
当我们看到像包
react-native,react-art,react-canvas,和react-three,它很清楚,美和本质作出反应无关,与浏览器或DOM.为了使这一点更加清晰,并且更容易构建React可以渲染的更多环境,我们将主反应包分成两部分:react和react-dom.
从根本上说,React的概念与浏览器无关,它们恰好是渲染组件树的众多目标之一.ReactDOM包允许开发人员从React包中删除添加非必要代码并将其移动到更合适的存储库中.
所述
react包中包含React.createElement,React.createClass并且React.Component,React.PropTypes,React.Children,和与元件和组件类的其它辅助函数.我们将这些视为构建组件所需的同构或通用助手.该
react-dom软件包包含ReactDOM.render,ReactDOM.unmountComponentAtNode和ReactDOM.findDOMNode,并且在react-dom/server我们的服务器端渲染支持中使用ReactDOMServer.renderToString和ReactDOMServer.renderToStaticMarkup.
这两段解释了核心API方法v0.13最终的位置.
lif*_*foo 11
TL;TR 该react包需要创建和使用组件和钩子，react-dom包含react-dom/client并react-dom/server在浏览器的 DOM 中或服务器上的字符串（或流）中呈现您的应用程序。您可以使用react-nativeReact 为 Android 和 iOS 创建本机应用程序。
\n\n这个问题几乎七年前就被问过，从那时起发生了很多变化。\n大多数答案不再正确或包含过时的信息。\n我将尝试为您提供一个完整但简单的答案，并提供最新的信息可用的日期信息。
\n
2022 年 3 月，React 18 已发布。它在其公共 API 中带来了一些有趣的变化。
\nreact正如 React 文档中所述：
\n\n\nReact 是 React 库的入口点。如果您从
\n<script>标签加载 React，则这些顶级 API 在 React 全局上可用。
事实上，它公开了大多数常见的 React 功能来创建和使用组件。其中一些是：
\nReact.createElement()，用于将 JSX 代码从 转换<Page title="Home page" />为React.createElement(Page, { title: "Home page" }, null)<></>它来创建片段。\n\n\n
react-dom，react-native下面列出的其他是React 渲染器。他们管理 React 树如何转变为底层平台调用。
react-dom\n\nReact-dom 包提供了特定于 DOM 的方法，可以在应用程序的顶层使用这些方法，并在需要时作为脱离 React 模型的逃生舱。
\n
该包本质上是一个容器，用于从单个包中公开客户端和服务器子包。事实上它只公开了两个函数：
\ncreatePortal()，用于创建门户并在父组件的 DOM 层次结构之外渲染子组件flushSync()这是您可能从未听说过的事情，并且是有原因的。因为它会严重损害性能。从 React 18 开始，这些函数已被标记为“legacy”，因此它们将在未来的版本中被弃用：
\nrender()hydrate()findDOMNode()unmountComponentAtNode()\n\n如果你在想“天哪，他们已经弃用了 React 中的 \xc2\xb4ReactDOM.render\xc2\xb4 方法”，别担心，请阅读下面的内容。
\n
弃用背后的原因是：
\n\n\n有机会重新设计我们公开的用于在客户端和服务器上渲染的 API。这些更改允许用户在升级到 React 18 中的新 API 的同时，继续使用 React 17 模式下的旧 API。
\n
请记住，如果您继续使用这些旧版API，新的 React 18 功能将被禁用。
\n\nreact-dom/client\n\nreact-dom/client 包提供了用于在客户端上初始化应用程序的特定于客户端的方法。大多数组件不需要使用此模块。
\n
React DOM Client 模块仅公开两个方法：
\ncreateRoot()是在您的应用程序所在位置创建根目录的新方法。这是替代品ReactDOM.render- 请参阅下面的示例hydrateRoot()是 的替代品ReactDOM.hydrate，需要水合服务器渲染的应用程序现在渲染应用程序的惯用方法createRoot是使用并render链接在一起：
import React from \'react\';\nimport * as ReactDOM from \'react-dom/client\';\n\nReactDOM\n .createRoot(document.getElementById(\'root\'))\n .render(<h1>Hello, world!</h1>);\n或者，如果您不喜欢链接，则使用常量，这只是风格问题：
\nimport React from \'react\';\nimport * as ReactDOM from \'react-dom/client\';\n\nconst root = ReactDOM.createRoot(document.getElementById(\'root\'))\nroot.render(<h1>Hello, world!</h1>);\nreact-dom/client包公开的 API 的完整列表
react-dom/server\n\nReactDOMServer 对象使您能够将组件渲染为静态标记。通常，它\xe2\x80\x99s在节点服务器上使用
\n
使用 ReactDOMServer 你可以在服务器端渲染 React 组件。它提供了多种方法来实现这一目标 - 每个环境都有专用的功能：
\nrenderToPipeableStream()，使用 Node.js StreamsrenderToNodeStream()（已弃用），使用 Node.js StreamsrenderToStaticNodeStream()，使用 Node.js StreamsrenderToReadableStream()，使用浏览器中可用的 Web Streams，Deno，...此外，还有一些渲染可以在不支持流的环境中使用：
\nrenderToString() 不鼓励React 18renderToStaticMarkup()\n\n您可以使用它们，但它们对Suspense支持有限。
\n
这是您自己尝试 ReactDOMServer 的最小工作示例：
\nimport React from \'react\';\nimport * as ReactDOMServer from \'react-dom/server\';\n\nconst html = ReactDOMServer.renderToString(<h1>Hello, world!</h1>);\nreact-dom/server包公开的 API 的完整列表
react-native\n\n通过 React Native，React 原语呈现到本机平台 UI，这意味着您的应用程序使用与其他应用程序相同的本机平台 API。
\n
React Native现在本身已经拥有一个庞大的生态系统，并且不仅仅局限于渲染组件。
\n今天不再建议您react-native自行安装该模块。相反，您可以使用 expo -cli来利用其自动化来开发应用程序。
\n\n这些是当今 React 可用的一些最有趣的渲染器（还没有死）
\n
react-canvas项目已经死了，但类似的功能可以在react-konva中找到。使用它你可以在 HTML 画布中渲染你的 React 组件。
react-three已被 取代react-three-fiber。它允许您从 React 以声明方式构建您的Three.js场景。
ink是 CLI 的 React 渲染器。使用它，您可以使用组件构建 CLI 输出。
react-figma是 Figma 的 React 渲染器。您可以使用 React 组件作为您的设计来源。
react-pdf是一个 React 渲染器，用于在浏览器和服务器上创建 PDF 文件。
prop-types？随着React 15.5的发布，该prop-types库已从 React 移出到专用包中。
在v0.14之前，它们是ReactJs主文件的一部分，但是在某些情况下，我们可能不需要两者，它们将它们分开，并且版本从0.14开始，这样，如果我们只需要其中一个，则我们的应用程序会变小，因为仅使用其中之一：
var React = require('react'); /* importing react */
var ReactDOM = require('react-dom'); /* importing react-dom */
var MyComponent = React.createClass({
render: function() {
return <div>Hello World</div>;
}
});
ReactDOM.render(<MyComponent />, node);
React包包含：React.createElement，React.createClass，React.Component，React.PropTypes，React.Children
React-dom包包含：ReactDOM.render，ReactDOM.unmountComponentAtNode，ReactDOM.findDOMNode和react-dom / server，其中包括：ReactDOMServer.renderToString和ReactDOMServer.renderToStaticMarkup。
看起来他们已经将 React 分为react和react-dom包，因此您不必将与 DOM 相关的部分用于您希望在非 DOM 特定情况下使用它的项目，例如https:// github.com/Flipboard/react-canvas
他们导入的地方
var React = require('react');
var ReactCanvas = require('react-canvas');
如你看到的。没有react-dom.
ReactDOM模块公开特定于DOM的方法,而React具有旨在由React在不同平台(例如React Native)上共享的核心工具.
http://facebook.github.io/react/docs/tutorial.html
更简洁地说，react 用于组件，而 react-dom 用于渲染 DOM 中的组件。'react-dom' 充当组件和 DOM 之间的粘合剂。您将使用 react-dom 的 render() 方法来渲染 DOM 中的组件，这就是您开始使用它时所需要知道的全部内容。
| 归档时间： |
|
| 查看次数： |
51395 次 |
| 最近记录： |