reactjs - 当属性更改并首次安装在 React 上时更改状态 - 缺少功能？

Question

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

场景

我有一个组件父组件，它创建将属性传递给子组件。子组件根据收到的属性使用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);
},
/*...*/

我觉得自己有点傻，我想我失去了一些东西......我想还有另一种解决方案可以解决这个问题。

是的，我已经知道了: https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

Answer 1

我发现这种模式通常不是很有必要。 在一般情况(并非总是如此)，我发现根据更改的属性设置状态有点反模式；相反，只需在渲染时导出必要的本地状态即可。

render: function() {
  var currentResponses = this.state.candidatesResponses.filter(function (elem) {
    return elem.questionId === this.props.currentQuestion.id;
  });

  return ...; // use currentResponses instead of this.state.currentResponses
}

但是，在某些情况下，缓存这些数据是有意义的(例如，计算它的成本可能非常昂贵)，或者您只需要知道何时因其他原因设置/更改 Prop 。在这种情况下，我基本上会使用您在问题中编写的模式。

如果您真的不喜欢输入它，您可以将这个新方法形式化为 mixin。例如:

var PropsSetOrChangeMixin = {
  componentWillMount: function() {
    this.onPropsSetOrChange(this.props);
  },

  componentWillReceiveProps: function(nextProps) {
    this.onPropsSetOrChange(nextProps);
  }
};

React.createClass({
  mixins: [PropsSetOrChangeMixin],

  onPropsSetOrChange: function(props) {
    var currentResponses = this.state.candidatesResponses.filter(function (elem) {
        return elem.questionId === props.currentQuestion.id;
    });

    this.setState({
      currentResponses: currentResponses,
      activeAnswer: null
    });
  },

  // ...
});

当然，如果您使用基于 class 的 React 组件，您需要找到一些替代解决方案(例如继承或自定义 JS mixin)，因为它们不支持 React-现在就设计 mixin。

(就其值(value)而言，我认为使用显式方法代码会更清晰；我可能会这样写:)

componentWillMount: function () {
  this.prepareComponentState(this.props);
},

componentWillReceiveProps: function (nextProps) {
  this.prepareComponentState(nextProps);
},

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