服务器端渲染中的 ComponentDidMount()

Question

服务器端渲染中的 ComponentDidMount()

我正在尝试在服务器端渲染我的网页以获得更好的性能，但遇到了一个问题，即我的页面的组件componentDidMount()没有被调用。

例如，这是我的主模板文件：

import React from 'react';
import Cube from './components/Cube/Cube.jsx';

class Index extends React.Component {
  render() {
    return (
          <html>
            <head>
              <title>{this.props.title}</title>
            </head>
            <body>
              <Cube />
            </body>
          </html>
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

还有我的 Cube.jsx：

import React from 'react';

class Cube extends React.Component {
    componentDidMount() {
        console.log("Hey!");
    }

    render() {
        return (
            <div>
                <h1>Hello</h1>
            </div>
        );
    }
}

export default Cube;

Run Code Online (Sandbox Code Playgroud)

我没有看到“嘿！” <h1>Hello</h1>即使我看到页面加载时，也会在我的 pm2 日志和 chrome 控制台中注销。这阻止了我为我的组件建立任何逻辑。

如何解决这个问题并让我的子组件componentDidMount()被调用？请注意，我用于express-react-views服务器端渲染。

Answer 1

tys*_*skr 5

我认为唯一被称为服务器端的生命周期钩子如下componentWillMount所述

即使如此，您也不会在 Chrome 的控制台上看到输出。您只可能在节点日志中看到它。

如果这能回答您的问题，请告诉我。

归档时间：	8 年，2 月前
查看次数：	6046 次
最近记录：	4 年，2 月前