使用props来反应getInitialState

Question

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

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

或者只是做安全......

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

Answer 1

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

最好考虑采用不同的方法。您可以直接访问道具，并在更改道具时更新组件。

Answer 2

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

道具纯粹初始化状态

从{em>特殊初始状态道具中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引入了静态功能，允许您将常规道具映射到状态（替换componentWillReceiveProps）。有几点需要注意：

1. 重要这是静态功能：您无法直接访问this，但您可以访问状态。在一些不寻常的情况下，人们可能会发现自己将实例值（例如refs）放入状态，这样就可以在那里访问它们了。
2. 在装载上运行并且每次改变