当前位置: 首页 > 面试题库 >

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

阴宏爽
2023-03-14
问题内容

看起来它将componentWillReceiveProps在即将发布的版本中完全淘汰,取而代之的是新的生命周期方法getDerivedStateFromProps:static
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
软件包可能会有所帮助。



 类似资料:
  • 问题内容: 我是React / Redux的新手,状态有问题。 TrajectContainer.jsx 当reducer返回新状态时,组件将使用新数据重新呈现。 但是:如果删除componentWillReceiveProps函数,则render()函数将具有旧状态。 我检查了mapStateToProps中收到的数据,这是新的新状态。所以我不明白为什么我需要componentWillRecei

  • 方法的标注和函数类似: struct Owner(i32); impl Owner { // 标注生命周期,就像独立的函数一样。 fn add_one<'a>(&'a mut self) { self.0 += 1; } fn print<'a>(&'a self) { println!("`print`: {}", self.0); } } fn

  • 用法 组件和虚拟 DOM 节点都有生命周期方法,也叫钩子,它们会在 DOM 元素的生命周期的对应时期被调用。 // 组件中的钩子 var ComponentWithHook = { oninit: function(vnode) { console.log("initialize component") }, view: function() { return "hello

  • 问题内容: 在哪里进行调用将使我的状态失水的API调用的最佳位置是哪里?构造函数或生命周期方法之一,例如ComponentWillMount? 问题答案: 最好从生命周期方法进行api调用,反应文档也建议相同。 根据DOC: componentDidMount: 挂载组件后立即调用componentDidMount()。需要DOM节点的初始化应该在这里进行。 如果需要从远程端点加载数据,这是实例化

  • 注:本文档提供的生命周期指的是 Universal App 的生命周期,它依赖 rax-app 提供的 runApp方法。 App 级生命周期 launch  在 App 启动时触发 使用生命周期 你可以使用 rax-app 提供的 useAppLaunch 来注册 App 级别的生命周期。 示例: import { useAppLaunch } from 'rax-app'; useAppLa

  • 我们大致为WebAPplication设计了4个生命周期: 请求初始化其实就是从URL中解析提取出{module}, {action}, {method}; 然后再根据{module}, {action}, {method}找到对应的Controller文件; 然后再调用对应的{method},完了之后再发送响应。当然响应的过程中肯定是要顺带着解析下模板标签啦。 恩,这就完了,貌似感觉很简单啊。