javascript - 更新 props 后，this.props 始终 === nextProps/prevProps

Question

我在这里有一个解决此问题的 jsbin:http://jsbin.com/tekuluve/1/edit

在 onClick 事件中，我从模型中删除一个元素，并重新渲染应用程序。但奇怪的是，在 componentWillReceiveProps() (以及 componentWillUpdate 和 componentDidUpdate )中，nextProps 始终 === 到 this.props，无论我做什么。

/** @jsx React.DOM */
var Box = React.createClass({
  render: function() {
    return (
      <div className="box" onClick={ UpdateModel }>
        { this.props.label }
      </div>
    );
  }
});

var Grid = React.createClass({
  componentWillReceiveProps: function(nextProps) {      
    // WTF is going on here???
    console.log(nextProps.boxes === this.props.boxes)        
  },
  render: function() {
    var boxes = _.map(this.props.boxes, function(d) {
      return (<Box label={ d.number } />);
    });

    return (
      <div className="grid">
        { boxes }
      </div>
    );
  }
});

var model = [
  { number: 1 },
  { number: 2 },
  { number: 3 },
  { number: 4 },
  { number: 5 }
];

function UpdateModel() {
  React.renderComponent(
    <Grid boxes={ _.pull(model, _.sample(model)) } />,
    document.body
  );
}

React.renderComponent(
  <Grid boxes={ model } />,
  document.body
);

在 componentWillReceiveProps() 生命周期事件中通过 UpdateModel() 更新后，我需要 nextProps 与 this.props 不同。

Answer 1

我使用 Flux Stores 按照官方 Todo 列表教程 ( http://facebook.github.io/flux/docs/todo-list.html ) 建议的方式存储我的状态时发生了类似的事情。对于在学习完教程后发现这一点的其他人来说，TodoStore 的 getAll() 方法中似乎出现了问题，因为它返回对内部数据对象的直接引用:

getAll: function() {
  return _todos;
}

这似乎破坏了像 componentDidUpdate(prevProps) 这样的生命周期方法区分新旧 props 的能力。我认为原因是，通过将对 Store 的数据对象的直接引用传递到 View 中，当 Store 更改时，状态/ Prop 会立即有效地更改，而不是在通过生命周期方法传递新值之后，因此旧的和新的 Prop 总是包含相同的值。这可以通过传递内部数据对象 _todos 的副本而不是对象本身来解决，

例如，当_todos是一个对象时，

getAll: function() {
  return JSON.parse(JSON.stringify(_todos));
}

如果_todos是一个数组，可以使用return _todos.slice()代替。

一般来说，如果使用 Store 来包含状态信息并从 Controller View 中调用它，似乎建议返回数据的副本而不是对原始数据的引用，因为当状态更改时原始数据将会发生变化发生。