使用道具反应 getInitialState答案

【问题标题】：React getInitialState using props使用道具反应 getInitialState
【发布时间】：2015-02-07 05:08:25
【问题描述】：

在设置组件的初始状态时，使用通过 props 传入的数据，我是否应该创建一个新对象，执行类似...

getInitialState: function () {
    return {
        fieldData: JSON.parse(JSON.stringify(this.props.data))
    };
}

或者这样做是否安全......

getInitialState: function () {
    return {
        fieldData: this.props.data
    };
}

【问题讨论】：

您需要提供更多信息。这个问题太模糊了。你是否以某种方式改变了 fieldData ？您是否仅在用户单击保存时才发送它？等

标签： reactjs

【解决方案1】：

将 props 转移到组件的状态被认为是一种不好的做法： http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

最好考虑另一种方法。你可以直接访问 props，当 props 改变时组件会更新。

【讨论】：

获取初始状态是可以接受的：“但是，如果你明确表示同步不是这里的目标，这不是反模式：”
uiexplorer 的示例怎么会在 react native repo 中做到这一点？
为什么这是不好的做法？
@KennethWorden per this Q/A：“将初始状态作为道具传递给组件是一种反模式，因为 getInitialState 方法仅在组件第一次渲染时被调用。再也不会了。这意味着，如果您重新渲染该组件并传递不同的值作为道具，该组件将不会做出相应的反应，因为该组件将保持第一次渲染时的状态。这很容易出错。“
有关为什么这是一个反模式以及如何替代的更多详细信息，请参阅You probably don't need derived state。这在代码和框中有代码 sn-ps 的链接，演示了所讨论的内容。

【解决方案2】：

距离被接受的答案已经很多年了，我想补充一些在 2014 年可能不太清楚的观点：

纯粹初始化状态的道具

seed state 从 特殊初始状态 道具被认为是好的。在上面的示例中，您将拥有initialFieldData

class Form extends React.Component {
   state = { fieldData: this.props.initialFieldData };
   resetFieldData = () => 
      setState( () => ({ fieldData: this.props.initialFieldData }));

`static getDerivedStateFromProps()` (docs)

React 16.3-alpha 引入了 static 函数，它允许您将 regular 道具映射到状态（以替换 componentWillReceiveProps）。需要注意的几点：

重要的是这是静态函数：你不能直接访问this，但你可以访问状态。在一些不寻常的情况下，人们可能会发现自己将实例值（例如refs）放入状态，以便在那里可以访问它们。
在装载和每个道具变化时运行

【讨论】：

纯粹初始化状态的道具

static getDerivedStateFromProps() (docs)

`static getDerivedStateFromProps()` (docs)