Question

我正试图显示一个仪表板组件，处理从redux存储中获取的许多数据。该组件需要花费很多时间来渲染，这主要是因为有一个复杂的方法。

在处理此方法时是否可以渲染某种加载程序或占位符？

我尝试通过使用ComponentDidMount来执行此操作，但由于该方法是我的render()方法的一部分，因此它似乎总是被第一手触发。

Answer 1

是的！查看this教程。

加载程序：

import React, {Component} from 'react';

const asyncComponent = (importComponent) => {
    return class extends Component {
        state = {
            component: null
        }

        componentDidMount() {
            importComponent()
                .then(cmp => {
                    this.setState({component: cmp.default});
                });
        }

        render() {
            const C = this.state.component;
            return C ? <C {...this.props}/> : null;
        }
    }
};

export default asyncComponent;

用法：

import React from 'react';
import asyncComponent from '../../hoc/asyncComponent';

const AsyncButton = asyncComponent(() => {
    return import('../Button');
});


const container = () => {
    return (
        <div>
            <h1>Here goes an async loaded button component</h1>
            <AsyncButton/>
        </div>
    );
};

export default container;

或检出this库。

React-等待复杂的方法完成再渲染

1 个答案: