Question

我正在使用ReactJS。

我有一个statefull组件（秒表容器）和多个子组件，它们是无状态的（秒表）。

在外部组件中，我正在做这样的事情：

// the outer component is a "container" for multiple stopwatches
tick: function() {
    for(var i = 0; i < this.state.stopwatches.length; i++)
    {
        // if a particular stopwatch is "started", I'll increase it's time
        if(this.state.stopwatches[i].status == "started")
        {
            this.state.stopwatches[i].time.seconds++;
            // do some processing
        }
    }
    // this is the suspicious code!
    this.setState(this.state);
}

请注意，我正在更改this.state属性，然后在setState()对象本身上调用state。这对我来说似乎是错的。但是，另一方面，为了不操纵state对象本身，我必须克隆它然后做setState(stateClone)，但我不确定如果可以在JS中有效地克隆对象，那么如果我真的应该这样做的话。

我可以继续setState(this.state)吗？

Answer 1

您可以拨打this.forceUpdate()。

，而不是拨打this.setState(this.state)

请记住，这不是推荐更新组件状态的方法。如果您不确定自己的修改，请查看Immutability Helpers。

Answer 2

这里只有我的两分钱：每次调用setState时，react都会重新渲染， boolean shouldComponentUpdate（object nextProps，object nextState）默认返回true。如果你不想重新渲染make，那么makeComponentUpdate（object nextProps，object nextState）将返回false。

从facebook文档引用：默认情况下，shouldComponentUpdate始终返回true以防止在状态发生变异时出现细微错误，但是如果您小心始终将状态视为不可变并且只读取render（）中的props和state，那么您可以使用实现覆盖shouldComponentUpdate将旧的道具和州与他们的替代品进行比较。

Answer 3

除了不变性（总是好的），第二好的是this.setState({stopwatches: this.state.stopwatches})。

对于不变的帮助者，它看起来像这样：

var stopwatches = this.state.stopwatches.map(function(watch){
  return update(watch, {
    time: {$set: watch.time + 1}
  });
});
this.setState({stopwatches: stopwatches})

或者使用es6，您可以保存几个字符。

var stopwatches = this.state.stopwatches.map(watch => update(watch, {
    time: {$set: watch.time + 1}
});
this.setState({stopwatches})

修改组件的状态然后调用“setState（this.state）”是一个好习惯吗？

3 个答案: