React - 如何使用生命周期方法答案

【问题标题】：React - how to use the lifecycle methodsReact - 如何使用生命周期方法
【发布时间】：2015-12-22 14:06:29
【问题描述】：

我在使用 React 时一直遇到同样的问题。我觉得我应该使用生命周期方法。（不仅仅是 componentWillMount 和 componentWillReceiveProps）。但他们似乎从来没有达到我的目的。这里有两个例子：

异步加载

我的父组件使用 AJAX 加载一些数据。孙子组件需要这些数据——通过 props 传递。由于时间的关系，当子组件安装或不安装时，数据可能可用。我不知道是否将代码放在我的孙子组件中，这取决于 componentWillMount() 或 componentWillReceiveProps() 中的这些道具。我最终不得不把它放在两者中。（或者在他们都调用的方法中）。

在初始渲染时调用或不调用生命周期方法。我希望他们都被召唤。

我的组件获取了一些数据。（使用 getStateFromFlux - Fluxxor 提供的一个 mixin）。这在加载数据的循环中发生了好几次，其中设置了各种标志到检索到的数据对象上：比如说卸载、加载和加载。这种状态变化会导致重新渲染。

如果有要显示的内容，我只想渲染和显示数据。所以 - 我的渲染方法有第一行：

if data.loadState != 'loaded'
  return '<span />'

好的。好。我想 - 必须有一个生命周期方法来解决这个问题。所以我这样做了：

shouldComponentUpdate: function (nextProps, nextState) {
    if nextState.loadState == 'loaded'
      return true
    else
      return false //stops the render. Good. 
}

最后我想到了——我使用了生命周期方法。

但是，唉，虽然这确实会在某些情况下停止调用渲染 - 当没有数据时 - 我仍然无法删除关于 hacky 的行

if data.loadState != 'loaded'
  return '<span />'

这是因为 shouldComponentUpdate 在初始渲染时没有调用。当这个组件第一次渲染时，没有数据。 loadState 是“卸载”。渲染方法仍然被调用。而且我仍然需要避免显示 UI（带有空数据字段）。

一般而言 - 生命周期方法要么仅在初始渲染时调用，要么仅在后续渲染时调用。对于我的大多数用例来说，这非常无用。我想要一种与它是第一次渲染还是后续渲染无关的方法。

我对 React 缺少什么？（我唯一能想到的是，当您可以确定您的数据时，它被设计为与初始渲染服务器端一起使用 - 然后一旦在浏览器中，生命周期方法就是关于检测更改）。

谢谢

【问题讨论】：

标签： reactjs

【解决方案1】：

不知道加载，但我建议卸载；

if (this.props.data.loadstate == 'unloaded') return null;

将其作为渲染的第一行。如您所述， shouldComponentUpdate 仅适用于更新。

【讨论】：

【解决方案2】：

您是对的，您应该使用生命周期方法，它们很棒，可以让您以更深入的方式连接到您的组件。但我认为你目前的情况并非如此

只有在父级加载数据并传递给子级时，您才能有条件地渲染孙级。然后你只需要检查孩子。它看起来像这样：

// Child render method that has been passed data loaded by the parent
render: function() {
  var grandChild = null;
  if (this.props.data) {
    grandchild = <GrandChild data={this.props.data} />
  }
  return (
    <div>
      {grandchild}
    </div>
  )
}

在这种情况下，您只需在数据加载后将 data 属性传递给子组件。因此，您可以保证当孙组件渲染时，它将拥有它需要的数据。虽然我不知道您为什么如此反对显示空数据字段，但这应该可以解决问题。

你是对的，无论是否是初始渲染，都不会触发 React 生命周期方法。话虽这么说，如果你必须同时做这两个，你总是可以组合componentDidMount和componentDidUpdate或componentWillReceiveProps。我不是 100% 确定他们为什么这样做，但我想到了几个原因：
- 确保 React 在初始渲染之前不需要重新渲染组件（即更改 componentWillReceiveProps 中的状态，在初始渲染之前触发更新）。我对代码库不太熟悉，但我很容易看出这会导致问题。
- 初始渲染的性能提升，让您的内容在虚拟 DOM 初始化时加载得更快

我希望这有助于解决您的问题并阐明生命周期方法！

【讨论】：