javascript - 根据另一个组件生命周期显示组件

Question

我最近遇到了一个关于使用我的服装组件的问题。我为我正在处理的项目创建了一个“Chargement”(法语加载)组件。

此组件是一个简单的圆形微调器，具有深色背景，显示时通知用户正在进行操作。

import React, {Fragment} from 'react';
import { CircularProgress } from 'material-ui/Progress';
import blue from 'material-ui/colors/blue';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

const styles = theme => ({
  chargement: {
    position: 'fixed',
    left: '50%',
    top: '50%',
    zIndex: 1
  }
});

class Chargement extends React.Component {
  render () {
    const { classes } = this.props;
    if (this.props.chargement) {
      return (
        <Fragment>
          <div className='loadingicon'>
            <CircularProgress size={80} style={{ color: blue[500] }}/>
          </div>
          <div className='loadingBackground'/>
        </Fragment>
      );
    } else {
      return null;
    }
  }
}

const mapStateToProps = (state) => {
  return {
    chargement: state.App.chargement
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
  }, dispatch);
};

Chargement.propTypes = {
  classes: PropTypes.object.isRequired
};

let ChargementWrapped = withStyles(styles)(Chargement);
export default connect(mapStateToProps, mapDispatchToProps)(ChargementWrapped);

此组件基于我的 redux Store 中名为“chargement”的 bool 变量显示。

每当我使用它进行 api 调用和加载数据时，它就像一个魅力。但是，我的 Web 应用程序中的一个组件需要相当长的时间来呈现(1-2 秒)。该组件通过扩展面板呈现了一个相当大的数据列表。我尝试根据 componentWillMount 和 componentDidMount 函数设置我的显示变量。

class ListView extends React.Component {
  componentWillMount () {
    this.props.setChargement(true);
  }
  componentDidMount () {
    this.props.setChargement(false);
  }

然而，在这种特殊情况下，“收费”部分永远不会显示。

我还尝试创建一个“Wrapper Component”，以防问题来自于我的“chargement”组件，该组件与作为子组件重新渲染的组件有些相关。 :

export default class AppWrapper extends React.Component {
  render () {
    return (
      <Fragment>
        <Reboot />
        <EnTete />
        <Chargement />
        <App />
      </Fragment>
    );
  }
}

“应用程序”组件是需要几秒钟才能呈现的组件，我正在尝试为其实现“收费”组件。我很确定这与组件生命周期有关，但到目前为止我尝试的一切都失败了。

我目前的技术栈是:React with Redux and MaterialUi

我错过了什么？

感谢您的帮助!

Ps:您可能需要检查我在主要答案评论中添加的解释和精确度，因为它们提供了进一步的上下文。

Answer 1

不确定我是否理解正确，但我认为问题只是您的 API 调用比您的组件安装周期花费更多时间，这是完全正常的。您可以通过稍微重新安排放置 IO 的位置​​来解决问题。

假设您从 AppWrapper 进行 API 调用，在 componentDidMount 中调度 Redux 操作，即 fetchListItems()。当 API 调用解析时，reducer 应将其内部 loading 值从 true 更改为 false。然后，AppWrapper 将收到 chargement 作为 Prop ，它的值将为 false。因此，您应该在 AppWrapper 的 render 方法中检查这个值是什么。如果该属性为真，则渲染 Chargement 组件，否则渲染 ListView。

此外，始终尝试将 IO 与 View 分离。您很可能需要在其他情况下重复使用 Chargement，对吧？然后，通过渲染 View 使其成为一个简单的通用组件。否则，如果您需要重用该组件，它将已经耦合到一个端点。为此，您可以使用无状态功能组件，如下所示:

const Chargement = () =>
    <Fragment>
        <div className='loadingicon'>
            <CircularProgress size={80} style={{ color: blue[500] }}/>
        </div>
        <div className='loadingBackground'/>
    </Fragment>