javascript - 为什么渲染后调用componentWillMount？

Question

我正在使用 React，我正在尝试了解生命周期。我正在做 componentWillMount方法以获得props我需要在渲染发生之前。我需要知道如何在加载 View 时更新状态。

我想做的就是 GET请求以获得赌场游戏的经销商列表。基本上，我缺少用于在 DOM 中呈现经销商列表的 1 或 2 个步骤

我会展示我用我的代码做了什么，然后我会解释我想要什么

Action 部分

getDealerActions.js

class GetDealersActions {

  constructor () {
    this.generateActions('dealerDataSuccess', 'dealerDataFail');
  }

  getDealers (data) {
    const that = this;
    that.dispatch();
    axios.get('someroute/get-dealers/get-dealers')
      .then(function success (response) {
        that.actions.dealerDataSuccess({...response.data});
      })
  }
};

然后我们去商店

getDealersStore.js

class GetDealersStore {

  constructor () {
    this.state = {
      dealerData : null,
    };
  }

  @bind(GetDealersActions.dealerDataSuccess)
  dealerDataSuccess (data) {
    this.setState({
      dealerData : data,
    });
   console.log(this.state.dealerData);
  }
}

在这种情况下 console.log(this.state.dealerData);返回这样的东西，这正是我需要的

Object {dealersData: Array[3]}

问题出在组件部分，老实说，因为我不知道如何处理这里的数据

@connectToStores
export default class Dealers extends Component {

  static contextTypes = {
    router : React.PropTypes.func,
  }

  constructor (props) {
    super(props);
    this.state = {}
  }

  static getStores () {
    return [ GetDealersStore ];
  }

  static getPropsFromStores () {
    return GetDealersStore.getState();
  }

  componentWillMount () {
    console.log('@@@', this.props);
    GetDealersActions.getDealers();
  }

  render () {
    console.log('>>>', this.props);
    let content;
    if (this.state.dealerData) {
      content = this.state.dealerData.map((item) => {
        return <div key={item.CardId}>{item}</div>;
      });
    } else {
      content = <div>Loading . . .</div>;
    }

    return (
      <div>
        <div>{content}</div>
      </div>
    );
  }

}

所有我到这里<div>{content}</div>是Loading . . .因为this.state就这样来了Object {}

我遇到了一个奇怪的情况，这个 View 渲染了两次，第一次是渲染，console.log('>>>', this.props);返回此 >>> Object {params: Object, query: Object}第二次渲染时，触发这个 >>> Object {params: Object, query: Object, dealerData: Object}这就是我需要的。

那么，为什么 componentWillMount正在等待渲染方法以便被解雇？

Answer 1

一点都不奇怪。 componentWillMount 将在渲染之前触发，在第一遍中，您将调用一个操作来获取经销商 GetDealersActions.getDealers();，这基本上是一个异步命令。由于它是异步的，组件在获取数据之前会渲染一次，然后在商店发布 changed 事件后再次渲染，这将重新触发渲染。

这是您的示例中发生的操作顺序的近似值:

1. componentWillMount 调用 getDealers 命令(异步)
2. 使用默认组件状态初始render
3. 在 action creator 和 store 中完成的异步操作是用 dealer 数据设置的
4. store 发布一个 changed 事件，重新触发渲染
5. 第二个 render 使用组件状态中的 dealer 数据调用。

问题是 React 会按特定顺序运行它的生命周期方法，而不关心你调用了一些异步方法。所以基本上你没有办法仅仅因为你调用了一个命令来获取 dealers 就停止 rendering。这是 react(或功能)的局限性，当与异步编程结合使用时会出现这种局限性，您应该按原样接受它。

如果您接受 React 会渲染两次这一事实，您可以利用它，所以在第一次渲染时您可以只显示一个 loading 指示器(例如一个纺车)以及何时加载数据加载您只需在第二个 render 中显示它。

但是，如果您不相信并且仍然想避免在初始加载时出现双重渲染，您可以在安装应用程序组件之前预取数据，这将确保在加载之前将初始数据加载到存储中首先 render，这意味着您不必在 componentWillMount 中调用 getDealers，因为数据已经在第一个存储中渲染。

提醒一下，双重渲染并不是一个严重的性能问题，就像在 Angular.js 或 Ember.js 中一样，因为 React 在 DOM 操作方面非常高效，但如果处理不当，它可能会产生一些 UX 问题.