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

2020/11/14 04:22 · javascript ·  · 0评论

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

经检查,它看起来像你现在无法作出直接比较this.propsnextProps,就像你可以在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;
  }
}

有关删除的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软件包可能会有所帮助。

正如我们最近发布的博客作出反应在绝大多数情况下,你并不需要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);
    // ...
  }
}

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

正如丹·阿布拉莫夫(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你可以跳过复制粘贴初始化一个构造函数中。

注意:

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

每当您要在渲染之前更新状态并使用prop的条件进行更新时,都将使用getDerivedStateFromProps

GetDerivedStateFromPropd借助props值更新统计信息值

阅读https://www.w3schools.com/REACT/react_lifecycle.asp#:~:text=Lifecycle%20of%20Components,Mounting%2C%20Updating%2C%20and%20Unmounting

本文地址:http://javascript.askforanswer.com/ruheshiyongshengmingzhouqifangfagetderivedstatefrompropserbushicomponentwillreceiveprops.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!