javascript - nextProps 始终与 componentWillReceiveProps 中的 this.props 相同，即使 props 已更改

Question

我的 React 应用程序中有一个组件可以为用户呈现总值。当该值上升时，我想发出声音。我认为在显示总数的组件中是播放噪音的好地方。

所以我在组件中添加了一个componentWillReceiveProps方法，在其中，我计算了两个总数:total是从this.props计算的nextTotal 是根据 nextProps 计算的。

令我惊讶的是，即使值发生变化，总计也发生变化，nextTotal 和 total 始终 相同。所以我想在总数上升时开火的条件永远不会发生。

我编写了一个简单的单组件示例。 JSfiddle .

var Hello = React.createClass({
  componentWillReceiveProps: function(nextProps) {
    var total = 0;
    this.props.vals.forEach(val => total+= val);

    var nextTotal = 0;
    nextProps.vals.forEach(val => nextTotal+= val);

        console.log(total, nextTotal)

    if (nextTotal > total) {
            //never runs
            console.log('moving up');
        }
  },
  render: function() {
    var total = 0;
    vals.forEach(val => total+= val)
    return (
        <div>{total}</div>
    )
  }
});

var vals = [1, 21, 452, 123];

setInterval(renderReact, 1000)

function renderReact() {
    vals.push(10);
  ReactDOM.render(
    <Hello
      vals={vals}
    />,
    document.getElementById('container')
  );
}

如您所见，它每秒将 10 添加到 vals 数组，这意味着总数增加 1。但是如果您打开控制台，您可以看到 total 和 nextTotal 始终相同，向上移动 永远不会被记录。

我显然误解了某事，如果有人能解释我的误解是什么，以及我应该如何实现我的目标，那就太好了。

Answer 1

如评论中所述(@PitaJ)，您的问题是您第一次传入数组，然后更改数组 - 而不是使用新属性调用。您已经进入了您的组件将引用作为其现有属性持有的对象并更改了它的内容。

在你的 fiddle 中，试试这个:

function renderReact() {
    vals.push(10);
  ReactDOM.render(
    <Hello
      vals={vals.concat([])}
    />,
    document.getElementById('container')
  );
}

每次将数组的副本作为 prop 传入，您会发现它们有适当的不同。

这实际上是使用 react 时的一个重要错误来源，如果不仔细编写 reducer，即使将 redux 与它一起使用也会突然出现。使用不可变数据结构是避免这种情况的一种方法。