标签: react-dom

我有点新的反应.我看到我们必须导入两件事才能开始,React并且ReactDOM,任何人都可以解释它们之间的区别.我正在阅读React文档,但它没有说.

我正在将 React 与以下软件包一起使用：

{\n  "name": "demo",\n  "version": "0.1.0",\n  "private": true,\n  "dependencies": {\n    "@testing-library/jest-dom": "^5.16.4",\n    "@testing-library/react": "^13.0.1",\n    "@testing-library/user-event": "^13.5.0",\n    "h3-js": "^3.7.2",\n    "leaflet": "^1.7.1",\n    "react": "^17.0.1",\n    "react-dom": "^17.0.1",\n    "react-leaflet": "3.0.2",\n    "react-scripts": "5.0.1",\n    "web-vitals": "^2.1.4"\n  },\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "react-scripts build",\n    "test": "react-scripts test",\n    "eject": "react-scripts eject"\n  },\n  "eslintConfig": {\n    "extends": [\n      "react-app",\n      "react-app/jest"\n    ]\n  },\n  "browserslist": {\n    "production": [\n      ">0.2%",\n      "not dead",\n      "not op_mini all"\n    ],\n    "development": [\n      "last 1 chrome version",\n      "last 1 firefox version",\n      "last 1 …

我是React的新手,我想知道下面代码中registerServiceWorker()的目的是什么？

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

更新到 React 18 或从 创建新的 React 18 应用程序后create-react-app，当我运行该yarn test命令时，它会为任何测试中使用的console.error每个方法发出警告，如下所示：render

console.error
警告：ReactDOM.render 在 React 18 中不再支持。请改用 createRoot。在您切换到新 API 之前，您的应用程序的行为就像运行 React 17 一样。了解更多信息：https ://reactjs.org/link/switch-to-createroot

如屏幕截图所示：

由于 React 测试库目前似乎不支持 React 18 方法。

我注意到reactDOM.renderToString()在服务器上渲染大型组件树时,该方法开始显着减慢.

背景

一点背景.该系统是一个完全同构的堆栈.最高级别的App组件呈现模板,页面,dom元素和更多组件.查看反应代码,我发现它渲染了~1500个组件(这包括任何简单的dom标记,它被视为一个简单的组件,<p>this is a react component</p>.

在开发中,渲染~1500个组件需要大约200-300ms.通过删除一些组件,我能够在~175-225ms内获得~1200个组件.

在生产中,〜1500个组件上的renderToString大约需要50-200ms.

时间似乎是线性的.没有一个组件是慢的,而是它的总和.

问题

这会在服务器上产生一些问题.冗长的方法导致服务器响应时间过长.TTFB比它应该高很多.使用api调用和业务逻辑,响应应该是250ms,但是使用250ms renderToString它会加倍!SEO和用户不好.此外,作为同步方法,renderToString()可以阻止节点服务器并备份后续请求(这可以通过使用2个单独的节点服务器来解决:1作为Web服务器,1作为服务来单独呈现反应).

尝试

理想情况下,生产中需要5-50ms的renderToString.我一直在研究一些想法,但我不确定最好的方法是什么.

想法1:缓存组件

任何标记为"静态"的组件都可以缓存.通过使用呈现的标记保持缓存,renderToString()可以在呈现之前检查缓存.如果找到一个组件,它会自动抓取该字符串.在高级组件中执行此操作将保存所有嵌套子组件的安装.您必须使用当前的rootID替换缓存的组件标记的反应rootID.

想法2:将组件标记为简单/笨

通过将组件定义为"简单",react应该能够在呈现时跳过所有生命周期方法.反应已经这样做了芯反应,DOM组件(<p/>,<h1/>,等).很高兴扩展自定义组件以使用相同的优化.

想法3:在服务器端渲染上跳过组件

服务器上不需要返回的组件(没有SEO值)可以简单地跳过.客户端加载后,设置一个clientLoaded标志true并将其传递给强制重新渲染.

结束和其他尝试

到目前为止,我实现的唯一解决方案是减少服务器上呈现的组件数量.

我们正在研究的一些项目包括:

• React-dom-stream https://github.com/aickin/react-dom-stream(仍然致力于为测试实现此功能)
• Babel内联元素https://babeljs.io/docs/plugins/transform-react-inline-elements/(看起来像是Idea 2)

有人遇到过类似的问题吗？你有什么能做的？谢谢.

我已经阅读了文档,但我并没有真正理解React 16 hydrate()和之间的区别render().

我知道hydrate()用于组合SSR和客户端渲染.

有人可以解释什么是保湿,然后ReactDOM有什么区别？

从 react-router-dom 升级到 useParams () 中使用的版本 4 后，出现 typeScript 错误

"typescript": "^4.0.2"

import { useParams } from 'react-router-dom';

const { sumParams } = useParams();

Property 'sumParams' does not exist on type '{}'. 

该项目运行良好，只有在升级后才会引发错误

我有一个无法编译的 React Typescript 应用程序。许多组件都有一个 render 方法，其类型为返回React.ReactNode或React.ReactElement。编译时，会报很多类似如下的错误：

TS2786: 'MessagesWidget' cannot be used as a JSX component.
 Its instance type 'MessagesWidget' is not a valid JSX element.
 The types returned by 'render()' are incompatible between these types.
 Type 'React.ReactNode' is not assignable to type 'import("/home/node/app/node_modules/@types/react-calendar/node_modules/@types/react/index").ReactNode'.

为什么编译器期望ReactNode与捆绑的类型相同react-calendar？我确实已@types/react-dom安装为开发依赖项。

其他可能相关的信息：

1. 该项目直到几天前才进行编译，当编译开始失败时没有代码更改，因此我怀疑包更新触发了此问题（即使这不是根本原因）。当编译开始失败时，在时间窗口中更新的唯一依赖项是@types/react和@types/react-dom。然而，将这些软件包回滚到旧版本并没有解决问题。
2. 将我的组件渲染方法更改为 returnJSX.Element可以消除编译器错误，但应用程序中存在第三方组件，这是不可能的。

编译代码时无法解决此错误..！事实上我已经尝试了很多其他的实现方式

//索引.css

@tailwind base;
@tailwind components;
@tailwind utilities;

这是我对React的一个反复出现的问题.componentDidMount保证在第一次渲染组件时触发该方法,因此它似乎是一个自然的地方,可以进行高度和偏移等DOM测量.但是,很多时候,在组件生命周期的这个阶段,我收到了错误的样式读数.该组件是在DOM,当我与调试器打破,但它尚未在屏幕上绘制.我的问题是宽度/高度设置为100%的元素.当我进行测量时componentDidUpdate- 一切正常,但此方法不会在组件的初始渲染时触发.

所以我的问题是 - 什么时候被componentDidMount解雇,因为在完成所有浏览器绘制之后它显然没有被触发.

编辑: 此Stackoverflow问题处理相同的主题:

它还引用了这个解释会发生什么的github对话