Reactjs 属性更改时更改状态并首次装入React-缺少函数？

我遇到了一个关于基于属性的状态的问题

情景 我有一个组件父组件，它创建一个属性并将其传递给子组件。 子组件根据接收到的属性进行反应。 在React中，更改组件状态的“唯一”正确方法是使用我所看到的componentWillMount或componentDidMount和componentWillReceiveProps函数（除其他函数外，让我们关注这些函数，因为getInitialState只执行一次）

我的问题 如果我从父级接收到一个新属性，并且我想更改状态，则只会执行函数componentWillReceiveProps，并允许我执行setState。渲染不允许设置状态

如果我想在开始和接收新属性时设置状态，该怎么办？ 所以我必须将其设置为getInitialState或componentWillMount/componentDidMount。然后，您必须使用componentWillReceiveProps根据属性更改状态

当您的状态高度依赖于您的属性（几乎总是如此）时，这是一个问题。这可能会变得愚蠢，因为您必须根据新属性重复要更新的状态

我的解决方案 我创建了一个新方法，在componentWillMount和componentWillReceiveProps上调用它。我没有发现在渲染前更新属性之后以及在第一次装入组件时调用了任何方法。那么就没有必要做这种愚蠢的变通

无论如何，这里有一个问题：当收到或更改新属性时，是否有更好的选项来更新状态？

/*...*/
/**
 * To be called before mounted and before updating props
 * @param props
 */
prepareComponentState: function (props) {
    var usedProps = props || this.props;

    //set data on state/template
    var currentResponses = this.state.candidatesResponses.filter(function (elem) {
        return elem.questionId === usedProps.currentQuestion.id;
    });
    this.setState({
        currentResponses: currentResponses,
        activeAnswer: null
    });
},
componentWillMount: function () {
    this.prepareComponentState();
},
componentWillReceiveProps: function (nextProps) {
    this.prepareComponentState(nextProps);
},
/*...*/

我觉得有点傻，我想我失去了一些东西。。。 我想还有另一个解决办法

是的，我已经知道了：

---

我发现这种模式通常不是很必要。在一般情况下（并非总是），我发现基于更改的属性设置状态有点反模式；相反，只需在渲染时导出必要的局部状态

render:function（）{
var currentResponses=this.state.candidatesResponses.filter（函数（elem））{
返回elem.questionId===this.props.currentQuestion.id；
});
return…；//使用currentResponses而不是this.state.currentResponses
}

但是，在某些情况下，缓存这些数据是有意义的（例如，计算这些数据的成本可能过高），或者您只需要知道由于其他原因何时设置/更改道具。在这种情况下，我基本上会使用你在问题中所写的模式

如果你真的不喜欢把它打出来，你可以把这个新方法形式化为一个mixin。例如：

var-PropsSetOrChangeMixin={
componentWillMount:function（）{
this.onpropssectorchange（this.props）；
},
组件将接收道具：函数（下一步）{
此。OnPropseTorChange（下一步）；
}
};
React.createClass({
混合器：[propssectorchangemixin]，
OnPropseTorChange:功能（道具）{
var currentResponses=this.state.candidatesResponses.filter（函数（elem））{
返回elem.questionId==props.currentQuestion.id；
});
这是我的国家({
currentResponses:currentResponses，
activeAnswer:null
});
},
// ...
});

当然，如果您使用的是基于

class

的React组件，那么您需要找到一些替代解决方案（例如继承或自定义JS混合），因为它们现在没有得到React样式的混合

（值得一提的是，我认为使用显式方法的代码更清晰；我可能会这样写：）

componentWillMount:function（）{
this.prepareComponentState（this.props）；
},
组件将接收道具：函数（下一步）{
此.prepareComponentState（nextProps）；
},
prepareComponentState:功能（道具）{
//在状态/模板上设置数据
var currentResponses=this.state.candidatesResponses.filter（函数（elem））{
返回elem.questionId==props.currentQuestion.id；
});
这是我的国家({
currentResponses:currentResponses，
activeAnswer:null
});
},