Javascript 关于getDerivedStateFromProps的思考

根据这篇关于的帖子，在下一次更新中，

componentWillReceiveProps

将有一个替换，即

getDerivedStateFromProps

（替换只会发生在17.0中）

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

在初始装入和重新呈现时调用 组件，所以您可以使用它，而不是基于道具创建状态 在构造函数中

我弄糊涂了。因此，从现在起，我是否需要拆分构造函数并将创建状态逻辑放到这个新函数中？我的意思是，第一次创建组件时创建状态的逻辑和从API道具创建状态的逻辑是不同的。用一种方法把它们放在一起似乎不是很理想

还有一件事，如果我选择从构造函数创建我的状态，这个新方法仍然会被调用。真是个混蛋

---

您认为呢？

关键区别在于，在React 16中，组件将接收道具，只有在收到新道具时，才会在初始渲染中调用。这意味着您将在构造函数中首次加载时创建派生状态，然后在更新时使用componentWillReceiveProps

使用新的getDerivedStateFromProps时，此逻辑只能在该函数中写入，因为它同时在初始装载和更新上运行

React不使用初始道具调用componentWillReceiveProps（） 在安装过程中。仅当某些组件的 道具可能会更新。调用此.setState（）通常不会触发 componentWillReceiveProps（）

关于API的问题，我认为这取决于组件的设置方式，在我看来，在父组件中调用API是合乎逻辑的，这样你就可以控制如何传递道具，并使接收道具的组件尽可能地愚蠢。在进行API调用后，仍然可以在方法中设置状态

正如丹·阿布拉莫夫所说，将道具传递给州政府通常是个坏主意，这个功能将不经常使用，因为它设计用于当你的州政府取决于道具如何随时间变化时使用

和

---

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

首先，我们将

this.state.data

变量初始化为

[]

然后使用这些道具，我们在

componentDidMount（）

中执行API调用，将其分配给

this.state.data

现在，来自父级的这些参数可能会发生更改，因此您必须在

componentWillReceiveProps

中重复此过程 我认为这可能是

getDerivedStateFromProps

所针对的场景。现在，不需要两次更新props中的状态，只需在函数中编写一次：

getDerivedStateFromProps

。顾名思义，当状态必须从道具派生时，使用它

要记住的要点：

您仍然需要在构造函数中设置初始状态。道具的初始状态和派生状态的逻辑可能非常不同。例如，如果不将

数据

变量初始化为

[]

，并且映射到

此.state.data

，它将失败，因为API尚未返回要在

getDerivedStateFromProps

中设置的结果

即使

getDerivedStateFromProps

不能使用

this

，它的工作方式与

this.setState

的工作方式相同

也就是说，如果你回来

{
  data: response.data
}

它不会更新您在构造函数中设置的其他状态变量。您还可以选择返回

null

，表示没有更改

发件人：

致：

注意：我只是从纯反应的角度来看一个实例

也请阅读React博客。

“你认为如何？”我认为你应该在React问题列表上对此提出反对意见，而不是在上面。这个问题要么太宽泛、不清楚、基于观点，要么就是以上所有问题。“我是说，当您第一次创建组件时创建状态的逻辑与从API道具创建状态的逻辑不一样。”是吗？来自Dan Abramov：“请等待博文。它会解释一切：-”他还说，

getDerivedStateFromProps

将很少使用。

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;
  }
}