Question

React的组件生命周期与DOM紧密相关，因此当我尝试在异步操作后在服务器端进行渲染时，会遇到问题。

我有一个组件（我们称它为包含组件），它负责根据其属性传递的数据动态导入另一个组件（我们称其为内部组件）。

一旦解决了导入承诺，我想在包含组件内部渲染内部组件。

问题是，我无法访问包含组件的生命周期。

render（）仅在构建包含组件时触发一次。

由于无法调用componentDidMount（）的相同原因，因此无法通过forceUpdate（）和setState（）更新组件。

使用服务器渲染时，如何在服务器端执行异步操作后渲染组件？

到目前为止，我的代码：

import React from 'react';

export default class ComponentLoader extends React.Component<{ component: string }, { component: any }> {

    constructor(props) {
        super(props);

        this.state = {
            component: null
        }; //no-op
    }

    componentDidMount(): void {
        //never called
    }

    componentWillMount(): void {
        import('./' + this.props.component).then(module => {
            this.forceUpdate(); //no-op
            this.setState({ component: React.createElement(module.default) }); //no-op
        });
    }

    render() {
        //called only once during construction
        return this.state.component || null; //this.state won't be available, nor will it matter if I access component any other way since render() won't be called again once that component is resolved anyway.
    }

}

Answer 1

我最终使用了可加载组件，但实现方式与您在注释中看到的有所不同。

https://github.com/jamiebuilds/react-loadable

https://github.com/konradmi/react-loadable-ssr-code-splitting

在服务器端，它确保仅在所有依赖项异步加载后才渲染react组件。这样一来，渲染是同步的，因为这是目前唯一支持的功能（尽管有功能要求支持async react ssr），但是加载是异步完成的，因此它不会阻止任何其他操作。

React SSR-在异步操作后呈现组件

1 个答案: