个人中心
文章发布
退出
作者热门文章
- 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
这对你们来说可能很简单，但由于我是java新手，所以我想知道实际上什么是 接下来的部分会发生什么？ if (args.length > 0) { file = args[0]; } publi
在我的 View Controller 中，我将 UITapGestureRecognizer 添加到 self.view。我在 self.view 之上添加了一个小 View 。当我点击小 View
我今天尝试从 Obj-C 开始并转到 Swift，我正在阅读文档。我试图在 Swift 中创建一个简单的 IBOutlet，但它不断给我这些错误。 View Controller 没有初始化器 req
我正在尝试使用 VIM 完成(字典和当前缓冲区)，但我遇到了问题？和 !在方法名称的末尾。我能以某种方式向 vim 解释方法名称(基本上是单词)最后只能有它，而且只有一个，即 method_name
我是一名优秀的程序员,十分优秀！