根据我的理解，服务器端呈现不会完成React生命周期，它只会在render()停止，因此不会调用componentDidMount()。要获得整个生命周期，您需要使用webpack之类的工具捆绑您的页面，并以某种方式包含页面中的捆绑文件，通常为<script>。
我尝试这样做并成功将bundle.js放入我的网页，但我仍然没有看到我设置的console.log()个componentDidMount()在我的组件中＆＃39; webpack.config.js。
服务器端呈现正确返回，因为我的页面包含所有静态内容，但我的组件中没有定义的行为正在发生。
这是我的const path = require('path');
const config = {
entry: ['babel-polyfill', './views/Index.jsx'],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public'
},
module: {
rules: [
{ test: /\.(jsx|js)$/, exclude: /node_modules/ , use: 'babel-loader' }
]
}
};
module.exports = config;
：
webpack.config.js
./views/Index.jsx import React from 'react';
import Layout from './Layout.jsx';
import Cube from './components/Cube/Cube.jsx';
class Index extends React.Component {
render() {
return (
<Layout title={this.props.title}>
<Cube />
</Layout>
);
}
}
export default Index;
指向我的主模板文件，如下所示：
Index.jsx
Layout.jsx其中<script src="/public/bundle.js">是我在哪里，包括import React from 'react';
class Layout extends React.Component {
render() {
return (
<html>
<head>
<title>{this.props.title}</title>
<script type="text/javascript" src="/public/bundle.js"></script>
</head>
<body>
{this.props.children}
</body>
</html>
);
}
}
export default Layout;
：
Layout.jsx
componentDidMount()最后，在我的Cube.jsx中，我有console.log() import React from 'react';
class Cube extends React.Component {
componentDidMount() {
console.log("SUHHH");
}
render() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
}
export default Cube;
：
Cube.jsx
componentDidMount()任何人都可以帮我理解为什么在我的Chrome控制台和pm2日志中都没有看到我的{{1}}被执行的任何迹象？
这是我的应用程序，如果有帮助：https://github.com/MarksCode/PersonalWebsite
谢谢！