javascript - 关于getDerivedStateFromProps的想法

根据有关what's news in React 16.3的帖子，在下一次更新中，componentWillReceiveProps将替换为getDerivedStateFromProps(替换仅在17.0中发生)。

有趣的是，这种全新的静态生命周期方法



我很困惑。因此，从现在开始，我应该拆分构造函数并将创建状态逻辑放到这个新函数中吗？我的意思是，第一次创建组件时创建状态的逻辑与从API Prop 创建状态的逻辑是不同的。用一种方法将它们组合在一起似乎不是很理想。

还有一件事是，如果我选择从构造函数创建状态，无论如何仍将调用此新方法。真是个 SCSS !

你怎么看？

最佳答案

让我们说我们有一个列表组件，它通过向API提供从其父级接收到的一些参数来呈现一些列表项。

首先，我们将this.state.data变量初始化为[]。

然后，使用 Prop ，我们在componentDidMount()中执行API调用，以将其分配给this.state.data。

现在，来自父级的这些参数可能会发生变化，因此您必须在componentWillReceiveProps中重复该过程。

我认为这是getDerivedStateFromProps针对的可能方案。现在，无需从props更新状态两次，只需在函数getDerivedStateFromProps中编写一次即可。顾名思义，当状态必须从 Prop 派生时，请使用。

注意事项:

您仍然需要在构造函数中设置初始状态。从 Prop 的初始状态和派生状态的逻辑可能非常不同。例如，如果您没有将data变量初始化为[]，并且您正在this.state.data上进行映射，则该API将失败，因为API尚未返回要在getDerivedStateFromProps中设置的结果。

即使getDerivedStateFromProps不能使用this，它的工作方式也与this.setState相同。

也就是说，如果您返回

{
  data: response.data
}

它不会更新您在构造函数中设置的其他状态变量。另外，您还可以选择返回null以表示未更改。

从:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      externalData: []
    }
  }
  componentWillMount() {
    asyncLoadData(this.props.someId).then(externalData =>
     this.setState({ externalData })
    );
  }
  componentWillReceiveProps() {
    asyncLoadData(this.props.someId).then(externalData =>
     this.setState({ externalData })
    );
  }
}

至:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      externalData: []
    }
  }
  static deriveStateFromProps(props, state, prevProps) {
    if (prevProps === null || props.someValue !== prevProps.someValue) {
      return {
        derivedData: computeDerivedState(props)
      };
    }

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

注意:我只是从纯React Angular 注意到一个实例。

还可以从React Blog阅读You Probably Don't Need Derived State。

关于javascript - 关于getDerivedStateFromProps的想法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48863450/