开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么我们不能在一个库中包含React和React-DOM库呢？

在一个库中同时包含React和React-DOM库是因为它们的功能和用途不同。

React是一个用于构建用户界面的JavaScript库，它提供了一种声明式的编程模型，可以将界面拆分成可重用的组件。React库主要负责处理组件的渲染、状态管理和事件处理等功能。

而React-DOM是React库的一个特定实现，它提供了与浏览器DOM相关的功能，包括将React组件渲染到DOM中、处理DOM事件等。React-DOM库依赖于React库，因为它需要使用React提供的组件和生命周期方法。

将React和React-DOM库分开的主要原因是为了提高代码的可重用性和灵活性。通过将React库与特定平台（如Web、移动端）相关的功能分离出来，可以使得React库可以在不同的平台上使用，并且可以更容易地扩展和适应不同的需求。

在实际开发中，如果需要在Web平台上使用React，只需要引入React和React-DOM两个库即可。例如，在使用腾讯云的云服务器部署Web应用时，可以使用腾讯云的云服务器CVM产品（https://cloud.tencent.com/product/cvm）来搭建服务器环境，并使用腾讯云的云开发SCF产品（https://cloud.tencent.com/product/scf）来部署和运行React应用。

总结起来，不能在一个库中包含React和React-DOM库是因为它们的功能和用途不同，分开使用可以提高代码的可重用性和灵活性。

相关搜索:为什么@PreAuthorize和hasPermission (在自定义PermissionEvaluator中)在一个存储库中触发，而在另一个存储库中不触发？为什么Id返回null，而不返回数据库中的下一个Id？为什么不推荐在react，Angular中通过jQuery等外部库进行DOM操作为什么从数据库中删除某些数据后不插入到同一个表中为什么我们不能在Spring的具体类中自动绑定一个抽象类呢？为什么我们需要创建、打开和关闭数据库连接来检索多个结果集，而不是检索一个结果集？为什么我们需要在我们的分支存储库中创建一个分支来推送我们的更改，然后向上游存储库创建一个拉取请求？为什么我的程序在使用中输出一个参数两次([-d?]和[-d|--data])？(我正在使用popt库进行选项解析)为什么这个序列生成器不能在Spring Boot中创建一个数据库表？为什么这段代码不使用turtle库在python中打印一个圆圈呢？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

一文搞懂peerDependencies

为什么说奇怪呢？是因为这个工程之前是可以运行的，我重新装了一遍依赖之后就不能跑了，真是喜闻乐见了。...这么分析完应该就是我封装的组件中依赖的 react 和 react-dom 的版本号和主工程中所依赖的 react 和 react-dom 的版本号不一致导致的。...被安装到主系统中之后，就应该依赖于主系统中的 react 和 react-dom。...很好，这里出现了一个 package.json 中的配置项叫做 peerDependencies,正常开发中我们经常接触到 dependencies 和 devDependencies, 那么 peerDependencies...": ">=16.12.0" } } 这样在主系统中执行 $ npm install 之后，主系统和组件库就能共用主系统的 node_module 中安装的 react 和 react-dom 了

8202 0

React：不要动，否则你会被炒鱿鱼

为什么会有个这么唬人的属性？今天我们来聊聊。...所有Hook的具体实现在ReactFiberHooks.new.js方法中，该方法来自于react-reconciler这个包。那为什么我们项目中从来没有主动引入过这个包呢？...既然「Hooks的实现」被打包进react-dom（或其他宿主环境对应的包）中，那如何做到最终使用时是从react中导出的呢？...假设我们有2个项目：组件库项目A，负责开发组件业务项目B，依赖A B安装依赖后，A会出现在B的node_modules中。...为了调试方便，我们用npm link功能将B中依赖的A由「B的node_modules中的A」改为「组件库项目A」，当npm link后，B中业务代码使用的useState来自于「B的node_modules

7162 0

你必须了解的 React 18 新特性

最好使用库的最新版本，以获得尽可能好的性能。这篇文章将讨论 React 18 是什么，React 17 的问题，React 18 的新特性，以及为什么你应该使用最新版本。 1....React 17 的问题 React 社区已经注意到库中存在一些需要改进的问题。如果 React 17 功能完美，React 18 和更高版本就不需要发布了。...通常，我们导入一个组件，并使用 id="app" 在 div 元素中渲染它。...ReactDOM.render(, app); 在 React 18 中，就像下面的代码样例一样，我们使用了从 "react-dom/client" 导入的 createRoot()...(() => { // 不立即显示最后输入的内容 setSearchFinalValue(input); }); 在代码片段中，我们没有使用将延迟状态更新的 setTimeout()，而是使用

3.5K1 0

大佬，第三方组件的Hooks为啥报错了？

重复的React 载录自React文档：为了使 Hook 正常工作，你应用代码中的 react 依赖以及 react-dom 的 package 内部使用的 react 依赖，必须解析为同一个模块。...这样，当我们引入「组件库」时，「组件库」会使用我们项目中的react与react-dom，而不是自己安装一份。但是我没有这个「组件库」的权限，只能在自己项目中做文章。...不管是「组件库」还是我们的项目代码中的react与react-dom，都会指向同一个文件。现在问题是临时解决了，但是造成问题的原因是什么？让我们深入Hooks源码内部来寻找答案。...渐入佳境在浏览器环境，我们会引用react与reactDOM两个包。其中，在react包的代码中存在一个变量ReactCurrentDispatcher。...真相大白到这里我们终于知道开篇提到的问题发生的本质原因：由于「组件库」使用dependencies而不是peerDependencies，导致「组件库」中引用的react与reactDOM是「组件库

2.1K2 0

webpack 构建之 splitChunks 优化与 manifest

那么问题来了，为什么 page1.js 引入的 loadsh 被抽离出来了，而 page1.js 与 entry1.js 都引入的 react 却没有呢？...3.2.2 priority 从上面一个打包结果来看，为什么 react-dom 也满足 default 的规则，却生成的是 vendors-node_modules_react-dom 而不是 default-react_dom...vendors-loadsh 和 vendors-react-dom 作为第三方库，满足 minChunks=1，作为单独的 chunk 也没有问题。...，所以需要砍掉一个请求，而 react-dom 的优先级高于 jquery 和 orgchart，则只从 jquery 和 orgchart 中考虑。...也就是说要在一个项目中，导入另一个项目带有 hash 值的文件，那每次打包的 hash 值都不同，我们怎么知道要请求的文件的 hash 值呢？

2.1K1 0

87.精读《setState 做了什么》

但是 setState 函数是 react 包导出的，他们又是如何与 react-dom react-native react-art 这些包结合的呢？...但是 react 却可以和 react-dom react-native react-art 这些包打配合，甚至与 react-dom/server 配合在服务端运行，那可以肯定 react 包中不含有...3 精读与其他 React 分析文章不同，本文并没有过于刨根问题的上来就剖析 reconciler 实现，而是问了一个最基本的疑问：为什么 setState 来自 react 包，但实现却在 react-dom...React 是如何实现这个 magic 的？通过这个疑问，我们了解了 React 更上层的抽象能力，如何用一个包制定规范，用 N 包去实现它。...这个方案中，一套通用的查询语法就类似 React 定义的 API，执行阶段会转化为各数据库平台的 SQL 方言。小程序融合方案现在这种方案很火。

7272 0

使用TypeScript并升级到React 18

本文将讲述在TypeScript中如何升级到React 18 React 18和Definitely Typed 在alpha和beta测试经历了相当长的一段时间后，React 18 于2022年3月29...他还写了一个codemod来有利于进行这个代码迁移下面让我们开始将代码库的react升级到18吧！升级我将通过升级我阿姨的网站进行演示。...这是一个简单的网站，升级的pr 首先在package.json中升级React - "react": "^17.0.0", - "react-dom": "^17.0.0", + "react...在我们进行升级之前，所有React.Component和React.FunctionComponent都有一个children属性，它允许React用户在不声明children的情况下直接使用升级18...: boolean; children: string; } 但是，当可以让其他方式帮我们写代码的话，为什么还要写代码呢？我们可以使用Sebastian开发的codemod来替代手动修改代码。

9122 0

package.json 配置完全解读

/index.mjs" } } } 为什么要加一个层级，把 require 和 import 放在 "." 下面呢？因为 exports 除了支持配置包的默认导出，还支持配置包的子路径。...比如 react，vue，状态管理库以及组件库等。使用 npm install xxx 或则 npm install xxx --save 时，会被自动插入到该字段中。...", "react-dom": ">=16.9.0" } 表示如果你使用 Ant Design，那么你的项目也应该安装 react 和 react-dom，并且版本需要大于等于 16.9.0。...比如指定 react 和 react-dom 为打包依赖： "bundleDependencies": [ "react", "react-dom" ] 在执行 npm pack 打包生成 tgz...压缩包中，将出现 node_modules 并包含 react 和 react-dom。

2.3K2 2

React 面试必知必会 Day10

react 包包含 React.createElement()、React.Component、React.Children, 以及其他与元素和组件类相关的帮助函数。...react-dom 包包含 ReactDOM.render()，在 react-dom/server 中，我们有 ReactDOMServer.renderToString() 和 ReactDOMServer.renderToStaticMarkup...为什么 ReactDOM 要从 React 中分离出来？ React 团队致力于将所有与 DOM 相关的功能提取到一个单独的库中，称为 ReactDOM。React v0.14 是第一个分割库的版本。...为了建立更多 React 可以渲染的环境，React 团队计划将主 React 包分成两个：react 和 react-dom。...，我们可以使用 htmlFor 代替。

3.9K2 0

全网最优雅的 React 源码调试方式

调试 React 源码还有优雅和不优雅之分？别着急，我们先来听个故事：东东是一名前端工程师，主要用 React 技术栈，用了多年之后想深入一下，所以最近开始看 React 源码。...为什么呢？...那怎么办呢？不打包 react 和 react-dom 这俩包不就行了。...所以，如果想直接定位 react 源码项目的话，可以这样做：创建一个新的目录，把 react 源码项目和测试的项目放到一个 workspace 下，这样再调试的时候，map 到的文件就能在 workspace...如果想点击调用栈直接打开对应 React 源码项目的文件，那就新建一个 workspace，把测试项目和 React 源码项目包含就行了。

1.6K2 0

React 18 RC 版本发布啦，生产环境用起来！

React 为了完全支持服务端的 Suspense 和流式，改进了 react-dom/server 的 API，旧的 Node.js 流式 API 将会被完全弃用： renderToNodeStream...，由于设计问题，在 React 18 之前，React 只能在组件的生命周期函数或者合成事件函数中进行批处理。...用于第三方库的 API React 18 的更新机制对于很多第三方 React 库都是阻断性的，如果想要适配 React 18，这些库可能要通过下面这些 API 做一些改造： useId 是一个新的...useSyncExternalStore 是一个新的 Hook，它允许外部存储通过强制同步更新来支持并发读取。推荐把这个新的 API 推荐应用到任何与 React 外部状态集成的库。...useInsertionEffect 是一个新的 Hook，它可以解决 CSS-in-JS 库在渲染中动态注入样式的性能问题。

1.1K1 0

React 同构思想

那么上面这个Table组件是不是可以直接复用到服务端，实现数据拉取呢，不好意思，答案是“不”。...这是一个固定的过程，拉取数据和生成HTML过程是不可打乱顺序的，不存在先把内容吐给客户端，再拉取数据这样的异步过程。...搞了半天，这个东西只能在客户端用，说好的同构呢！别急，拉取数据，我们需要另外的方法。...我们想一想，就算服务端没有初始化HTML数据，仅仅依靠客户端的React也完全可以实现渲染我们的表格，那服务端生成了HTML数据，会不会在客户端React执行的时候被重新渲染呢？...React在服务端渲染的时候，会为组件生成相应的校验和(checksum)，这样客户端React在处理同一个组件的时候，会复用服务端已生成的初始DOM，增量更新，这就是data-react-checksum

1.4K1 0

如何升级到 React 18

复制代码更多信息可见 Replacing render with createRoot SSR API 更新在 React 18 中，为了支持服务端的 Suspense 和流式 SSR，优化了 react-dom...在 React 18 中，我们和三方库作者合作，定义了一些新的 API，以满足三方库在 concurrent 模式下特定场景的诉求。...为了支持 React 18，一些三方库可能需要用到下面的 API： useId 是一个新的 Hook，支持在客户端和服务端生成唯一的 ID，同时避免 hydration 的不兼容。...除非你已经构建了一个 CSS-in-JS 库，否则我们不希望你使用它。这个 Hook 执行时机在 DOM 生成之后，Layout Effect 执行之前。...当然，我们希望测试库会自动为您加上这个配置。例如，下一个版本的 React Testing Library 内置了对 React 18 的支持，无需任何额外配置。

2.2K3 0

React同构思想

那么上面这个Table组件是不是可以直接复用到服务端，实现数据拉取呢，不好意思，答案是“不”。...这是一个固定的过程，拉取数据和生成HTML过程是不可打乱顺序的，不存在先把内容吐给客户端，再拉取数据这样的异步过程。...搞了半天，这个东西只能在客户端用，说好的同构呢！别急，拉取数据，我们需要另外的方法。...我们想一想，就算服务端没有初始化HTML数据，仅仅依靠客户端的React也完全可以实现渲染我们的表格，那服务端生成了HTML数据，会不会在客户端React执行的时候被重新渲染呢？...React在服务端渲染的时候，会为组件生成相应的校验和(checksum)，这样客户端React在处理同一个组件的时候，会复用服务端已生成的初始DOM，增量更新，这就是data-react-checksum

1K2 0

React入门一：React简介及基本使用｜ 8月更文挑战

学习一次随处使用开发web应用开发移动端原生应用 react-native 开发VR react360 3.前端框架和库的区别框架（frameworks）向开发者提供了整套服务如MVC...库（librarys）专注于某一个点如dom操作或者异步请求。...更是一个封装好的特定集合，而且是特定于某一方面的集合（方法和函数）。...库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用两者本质区别在于控制权：你可以控制库，而框架会控制你。...安装完成后我们在package.json中可以找到两个包的依赖配置 4.4 html文件中引入react 引入文件创建元素渲染元素 <body

4222 0

React同构思想

那么上面这个Table组件是不是可以直接复用到服务端，实现数据拉取呢，不好意思，答案是“不”。...这是一个固定的过程，拉取数据和生成HTML过程是不可打乱顺序的，不存在先把内容吐给客户端，再拉取数据这样的异步过程。...搞了半天，这个东西只能在客户端用，说好的同构呢！别急，拉取数据，我们需要另外的方法。...我们想一想，就算服务端没有初始化HTML数据，仅仅依靠客户端的React也完全可以实现渲染我们的表格，那服务端生成了HTML数据，会不会在客户端React执行的时候被重新渲染呢？...React在服务端渲染的时候，会为组件生成相应的校验和(checksum)，这样客户端React在处理同一个组件的时候，会复用服务端已生成的初始DOM，增量更新，这就是data-react-checksum

1.1K9 0

像踢球一样玩转Redux和React

Redux对比Reflux 在众多的关于Flux思想的类库中，Reflux 也是一个比较好的框架，它使用起来甚至比Redux更简单。它的单向数据流模式主要由actions和stores组成。 ?...返回修改的store 组件获取数据将state合并到组件的props中直接修改组件的state 为什么会使用Redux，而不选择Reflux呢？...那么Redux和 React要怎么联系起来呢？我们需要Redux的React绑定库react-redux。 react-redux提供两个关键模块：Provider和connect。...Redux 的 React 绑定库包含了容器组件和展示组件相分离的开发思想。明智的做法是只在最顶层组件（如路由操作）里使用 Redux。...调用回调函数关于Redux和React的关系我们再举一个生动的例子：我们以足球举个例子，欧洲杯今天凌晨刚刚落幕，在球赛中，主要由球场，球员以及足球组成，足球运动员跟随着足球在球场上的位置是不断变化的

1.3K7 0

从零搭建基于react与ts的组件库（一）项目搭建与封装antd组件

在封装组件并生成umd代码过程中，踩了很多的坑，也更加系统的了解了babel。整体需求 react组件库，取名r-ui，能够导出r-ui.umd.js和r-ui.umd.css。...引入antd组件库作为底层原子组件库，并且r-ui.umd.js和r-ui.umd.css包含antd组件代码和样式代码。依赖的react、react-dom模块以外部引用方式。...如果不写任何配置项，env 等价于 latest，也等价于 es2015 + es2016 + es2017 三个相加(不包含 stage-x 中的插件)。...引入React相关库（externals方式）还记得我们的需求吗？依赖的react、react-dom模块以外部引用方式。什么是外部引用方式？...简单来讲，我希望react、react-dom等组件库的包，不会被打入到组件库中，而是在html中引入（Add React to a Website – React (reactjs.org)）：

8253 1

React 基础

/) React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。...项目目录结构说明和调整说明： src 目录是我们写代码进行项目开发的目录查看 package.json 两个核心库：react、react-dom（脚手架已经帮我们安装好，我们直接用即可）...调整：删除 src 目录下的所有文件创建 index.js 文件作为项目的入口文件，在这个文件中写 React 代码即可 React 的基本使用基本步骤使用步骤 - 导入react和react-dom...- 创建react元素(虚拟DOM) - 渲染react元素到页面中导入react和react-dom // 导入react和react-dom import React from 'react...使用步骤 - 导入react和reactDOM包 - 使用jsx语法创建react元素 - 把react元素渲染到页面中导入react和reactDOM // 导入react和react-dom import

2.1K2 0

一个经常被忽略的 single-spa 微前端实践

还有一些文章讲了，但是都是以晒代码为主，只讲是什么，不讲为什么。这对读者来说并不是一个很好的体验。那今天就跟大家深入分析一下 single-spa 的 React 版 Demo 吧。...webpack 打包虽然入口 JS 写的很简单，但是我们依然要把它打包成 SystemJS 的方式，这样才能在 index.html 里动态引入： // index.html <script type...诶，single-spa 也想到这一点，所以它也给我们提供了一个 webpack-config-single-spa-react 库来帮助我们更好地配置 Webpack： // webpack.config.js...普通组件其实刚刚的 people 和 plants 就是一个组件，只不过它们是页面级别的组件而已。.../button.component.js"; 看到这，你可能说会：为啥不用 npm 的导入方式呢？好像和微前端没关系呀？

1.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭