如何使用生命周期方法getDerivedStateFromProps而不是componentWillReceiveProps


142

看起来它将componentWillReceiveProps在即将发布的版本中完全淘汰,取而代之的是新的生命周期方法getDerivedStateFromPropsstatic getDerivedStateFromProps()

经过检查,看来您现在无法在this.props和之间进行直接比较nextProps,就像您可以在componentWillReceiveProps。有没有办法解决?

而且,它现在返回一个对象。我是否正确假设返回值本质上是this.setState

以下是我在网上找到的示例:状态源自props / state

之前

class ExampleComponent extends React.Component {
  state = {
    derivedData: computeDerivedState(this.props)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.someValue !== nextProps.someValue) {
      this.setState({
        derivedData: computeDerivedState(nextProps)
      });
    }
  }
}

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someMirroredValue !== nextProps.someValue) {
      return {
        derivedData: computeDerivedState(nextProps),
        someMirroredValue: nextProps.someValue
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

Answers:


96

有关删除的componentWillReceiveProps:你应该能够与组合来处理它的用途getDerivedStateFromPropscomponentDidUpdate,看到的阵营博客文章,例如迁移。是的,返回的对象getDerivedStateFromProps的状态更新与传递给的对象类似setState

万一您确实需要道具的旧值,可以随时使用以下内容将其缓存在状态中:

state = {
  cachedSomeProp: null
  // ... rest of initial state
};

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.someProp and prevState.cachedSomeProp
  return {
    cachedSomeProp: nextProps.someProp,
    // ... other derived state properties
  };
}

任何不影响状态的东西都可以放入componentDidUpdate,甚至有一个getSnapshotBeforeUpdate用于底层的东西。

更新:要了解新的(和旧的)生命周期方法,react-lifecycle-visualizer软件包可能会有所帮助。


1
gh,我搞砸了这个问题。我的意思是componentWillReceiveProps
安德鲁(Andrew)

2
我曾考虑过使用状态来保存先前的道具,但我确实想避免实现它所需要的额外代码和逻辑。我将研究您提出的其他一些内容。非常感谢!
安德鲁

4
必须在状态中存储先前的道具只是这种难以理解的React API更改的样板变通办法。在许多开发人员看来,这看起来像是反模式和回归更改。不是批评您Oblosys,而是React团队。
AxeEffect

2
@AxeEffect这是因为getDerivedStateFromProps它从未真正用于记忆。请参阅下面的答案,其中我描述了推荐的方法
Dan Abramov

那是错字吗?你想念...吗?那就是我们应该返回整个状态对象还是仅返回我们关心的部分。
程序员

51

正如我们最近发布的博客作出反应在绝大多数情况下,你并不需要getDerivedStateFromProps在所有

如果只想计算一些派生数据,请执行以下任一操作:

  1. 就在里面做 render
  2. 或者,如果重新计算比较昂贵,请使用类似的备忘录助手memoize-one

这是最简单的“之后”示例:

import memoize from "memoize-one";

class ExampleComponent extends React.Component {
  getDerivedData = memoize(computeDerivedState);

  render() {
    const derivedData = this.getDerivedData(this.props.someValue);
    // ...
  }
}

查看博客文章的此部分以了解更多信息。


45
如果它不是在需要广大大多数情况下,我很惊讶,这是这样一个急需改变,一个将打破成千上万的工作项目。看来React团队是从工程开始的。
Ska

39
从componentWillReceiveProps更改为getDerivedStateFromProps。这样做不是中断,而是强制重构所有现有代码,这非常耗时。而且似乎没有什么好处,因为您说您在绝大多数情况下都不应该使用它。为什么要为一开始就不应该使用的东西而经历更改API的麻烦。
Ska '18

4
我希望Dan Abramov对这一评论做出回应。
Louis345 '18 -10-20

6
@DanAbramov关于此更改为何的任何答案?
Petros Kyriakou

3
实际上,在我们的项目中,这已被大量使用。用于在屏幕上显示诸如Snackbars之类的东西的新数据何时出现,这是一个示例。componentWillReceiveProps很简单,而且有效。为什么要为这个静态垃圾删除它呢?
Oliver Dixon

6

正如丹·阿布拉莫夫(Dan Abramov)所述

在渲染内部执行

实际上,我们将这种方法与备注一起用于任何用于状态计算的代理道具。

我们的代码看起来像这样

// ./decorators/memoized.js  
import memoizeOne from 'memoize-one';

export function memoized(target, key, descriptor) {
  descriptor.value = memoizeOne(descriptor.value);
  return descriptor;
}

// ./components/exampleComponent.js
import React from 'react';
import { memoized } from 'src/decorators';

class ExampleComponent extends React.Component {
  buildValuesFromProps() {
    const {
      watchedProp1,
      watchedProp2,
      watchedProp3,
      watchedProp4,
      watchedProp5,
    } = this.props
    return {
      value1: buildValue1(watchedProp1, watchedProp2),
      value2: buildValue2(watchedProp1, watchedProp3, watchedProp5),
      value3: buildValue3(watchedProp3, watchedProp4, watchedProp5),
    }
  }

  @memoized
  buildValue1(watchedProp1, watchedProp2) {
    return ...;
  }

  @memoized
  buildValue2(watchedProp1, watchedProp3, watchedProp5) {
    return ...;
  }

  @memoized
  buildValue3(watchedProp3, watchedProp4, watchedProp5) {
    return ...;
  }

  render() {
    const {
      value1,
      value2,
      value3
    } = this.buildValuesFromProps();

    return (
      <div>
        <Component1 value={value1}>
        <Component2 value={value2}>
        <Component3 value={value3}>
      </div>
    );
  }
}

它的好处是,你不需要代码吨比较样板里面的getDerivedStateFromProps或者componentWillReceiveProps你可以跳过复制粘贴初始化一个构造函数中。

注意:

如果您有一些内部状态逻辑,则此方法仅用于将道具代理到状态,它仍需要在组件生命周期中进行处理。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.