个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我知道它只是将 HTML 呈现为文本，所以说到类组件，只有 contructor()和 render()在 renderToString() 期间调用方法.但是我注意到了一些关于函数组件的奇怪行为。考虑以下组件示例:
function MyComponent() {
console.log(1);
return(
<React.Fragment>
Some text
</React.Fragment>
)
}
console.log()在函数组件内部，我猜这相当于
constructor()类组件内部的方法。
renderToString()在快速路由处理程序中调用:
import { ServerStyleSheets, ThemeProvider } from '@material-ui/core/styles';
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import theme from 'mui/theme';
import App from 'components/App';
const SERVER_PORT = 8081; // Port for Express to listen
const app = express();
app.get('*', async (req, res) => {
const sheets = new ServerStyleSheets();
const inlineApp = renderToString(
sheets.collect(
<Provider store={exampleStore}>
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
</Provider>,
),
);
const css = sheets.toString();
const renderedHTML = `
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style id="jss">${css}</style>
<title>Repl.it</title>
</head>
<body>
<div id="root">${inlineApp}</div>
<script>
window.STATE = ${JSON.stringify(exampleStore.getState())};
</script>
<script src="app.js"></script>
</body>
</html>
`;
res.send(renderedHTML);
});
app.listen(SERVER_PORT, () => {
console.log(`Listening at http://localhost:${SERVER_PORT}`);
});
ReactDOMServer.renderToString() 时两次获得控制台输出一次。我不在服务器端使用双重渲染。
renderToString() 期间只运行一些代码一次?最佳答案
这里发生的事情可能是 React 的 Strict 模式的作用。
React 应用程序在严格模式下运行时，故意重复调用某些函数(例如在这种情况下组件的构造函数)，以便在开发阶段更容易发现和识别容易遗漏的副作用，这可能会在生产中产生问题.
您可以在此处详细了解 react 严格模式 - Strict Mode
然而，重要的是要知道严格模式仅在开发环境中而不是在生产环境中双重调用函数。
关于reactjs - ReactDOMServer.renderToString() - 它到底是做什么的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66390315/
25
4
0
我知道它只是将 HTML 呈现为文本，所以说到类组件，只有 contructor()和 render()在 renderToString() 期间调用方法.但是我注意到了一些关于函数组件的奇怪行为。考
我在服务器上渲染 react 组件，当转到路由时收到错误消息: const renderToString = ReactDOMServer.renderToString const fac =
如果我这样做 const clicked = () => console.log(“click”); renderToString(Click here 当我打印出呈现的字符串时，我只看到 Click
我为react16创建了新的样板。 https://github.com/jasonvillalon/react16-boilerplate 它在开发中运行时可以使用: npm start npm s
我有一个脚本，它读取reactjs文件，然后使用renderToString将其渲染为html。但是 renderToString 使我的组件 className 和所有其他 pascalCased
为什么问这个问题？ 我正在学习有关 js 性能和 Web 渲染的知识。 This post非常有用。 如果您点击一些链接，您将登陆 here并阅读以下内容: User code in Node.js
我一直在思考如何优化 React 服务器端渲染，尤其是我应用程序中的瓶颈部分，即同步 renterToString 调用。因为这是一个阻塞调用，所以长函数 renderToString 调用会导致我的
在 React 中，有 renderToString 和 renderToStaticMarkup。 据我所知，renderToString 保留了所有的react-id 属性，这使得加载速度变慢。那
我注意到reactDOM.renderToString()在服务器上渲染大型组件树时，方法开始显着减慢。 背景 一些背景知识。该系统是一个完全同构的堆栈。最高级别App组件渲染模板、页面、dom 元素
在 WebWorker 中，我使用 ReactDOMServer.renderToString 然后我将该字符串传递回主 UI 线程: lines = lines.map(function(l
我正在寻找与 react-dom/server.renderToString 等效的 Angular 2 import { renderToString } from 'react-dom/serve
我正在尝试复制这个 fiddle : http://jsfiddle.net/jhudson8/135oo6f8/ (我也试过这个例子 http://codepen.io/adamaoc/pen/wB
我有一个应用程序，其中 webpack 配置为模块 bundler ，babel 作为我的 js 编译器。全部都在 Node 引擎上。我设置当我运行 npm run dev 时，将会发生以下流程: w
我正在为我的 React/Express 应用程序设置服务器端渲染，但遇到与调用 react-dom/server 相关的语法错误。 renderToString()方法。我正在大致遵循本教程 - h
我正在尝试使用 React 和 React-router 进行服务器端渲染。到目前为止，它只是来自各种来源的复制粘贴代码。但是当我尝试使用 Node 运行应用程序时出现语法错误(不是运行时错误)。下面
我正在尝试使用 Webpack 设置同构服务器端渲染 React 应用程序，但是当我尝试使用 renderToString 将我的 React 代码转换为字符串时出现此错误: Warning: Rea
我正在使用 React v.16.12.0 和 @MaterialUI/core v4.8.1。 我正在尝试为 React Leaflet Marker 创建自定义图标。图标是 Fab Materia
我有一个常规的 React 应用程序 (CRA)。在应用程序的一部分中，我使用 Mapbox 来显示 map ，并且要呈现弹出窗口，我需要传入要呈现的 html 内容字符串。我仍然想使用 React
React 有一个新的候选版本，v 15.0.0。由于 renderToString 方法现在在库中已被弃用，并且显然在未来版本中将不再使用，那么在新版本中如何支持 React 的服务器端渲染呢？ 在
我正在使用Leaflet开发一个应用程序(通过react-leaflet)。 Leaflet直接操作DOM。 React-leaflet 库不会改变这一点，它只是为您提供 React 组件，您可以使用
我是一名优秀的程序员,十分优秀！