ReactJS:为什么我不应该改变嵌套状态？

Question

我已经阅读了有关setState的ReactJS文档.具体来说,这一行:

永远不要直接改变this.state,因为之后调用setState()可能会替换你所做的突变.把this.state看作是不可变的.

但是在我的代码中,我做了这样的事情:

var x = this.state.x;
x.y.z.push("foo"); // z is a list
this.setState({x:x});

此代码似乎正常工作并正确更新状态.但根据文件,我违反了规则.这种方法有什么问题？有性能问题吗？比赛条件？我会被Facebook开发团队骂？理想情况下,我想避免不可变性助手和所有其他疯狂,并保持简单.

Answer 1

通过直接操纵状态,您正在绕过React的状态管理,这对React范例起作用.React的最大好处setState是它会立即触发重新渲染,将DOM中的DOM更改与shadow DOM合并到文档DOM中.因此,您捕获某些处理程序中所需的所有状态更改,然后在文字对象中构建所需的状态更改,然后将其传递给setState.这不是你上面的例子.

因此,尽管您提供的代码示例在技术上违反了此规则,但由于您setState在通过对状态对象属性的引用进行变更后直接调用,因此您的更改将立即通过React的状态管理进行管理.所以,一切都会按预期工作.这个想法是你不想养成以这种方式对状态进行许多更改的习惯,最好在新的文字对象或数组中捕获你想要的状态,然后将它设置为状态一次(即,没有先前的状态突变)通过调用setState,将触发单个重新渲染.

编辑:为了更明确地回答你的问题,我想补充一点,真正关心的是开发人员会在许多不同的地方或方法中直接操纵状态,而不需要调用setState,然后在稍后或其他代码,调用setState然后想知道为什么他们的渲染不会产生他们期望的结果.由于setState对象在已知的托管状态和作为参数传递的文字对象之间合并setState,因此如果您之前直接操作状态,结果可能不是您所期望的.