想知道使用状态（this.state）react components（不是redux）的缺点答案

【问题标题】：want to know the disadvantages of using state (this.state) react components (not redux)想知道使用状态（this.state）react components（不是redux）的缺点
【发布时间】：2019-08-14 07:00:50
【问题描述】：

我只是想知道这个。状态json对象绑定和普通json对象绑定是否相同？下面是例子。

第一个例子

state = { name: "Default", email: "" };

binding data : this.state.name

this.setState({ name: e.currentTarget.value })

第二个例子

const data= {name: "Default", email: ""}

binding data to control: data.name

onchange={e=>data.name=e.value}

两者都运行良好，但想知道哪个性能更好？

我的应用程序需要任何不可变数据，因为我没有动态显示数据，我需要在组件加载时从 api 获取数据，并在表单提交时将数据发布到 api。所以我使用的是第二种方法。我觉得状态会不必要地加载渲染对象。

那么有人能建议哪一个更好吗？

【问题讨论】：

第二个示例如何正常工作？如果你使用一个名为 data 的对象，React 怎么理解它应该在 onChange 上重新渲染组件，因为你没有更改状态来告诉 React 因为输入了输入而重新渲染 UI。你在页面中看到你的输入变化了吗？
嗨，是的，它不会重新渲染组件，我不希望我的应用程序在控制更改时重新渲染。这就是我使用第二种方法的原因。这样，只有我的 json 对象会更新，并且我在表单提交时使用 json。它正在使用变异的方式
但是当你输入的时候，你在输入中看到你输入的值了吗？
是的。我可以看到输入的值

标签： reactjs react-redux

【解决方案1】：

如果状态未与任何 UI 组件关联，则更改它不会重新渲染任何内容，因此在功能上两者将相同。

就性能而言，第二种方法会更快，因为它是直接的对象操作，而调用 setState 是一个函数调用，并不能保证立即执行。

但是，根本不要使用第二种方法，因为它会给下一个管理此类代码的开发人员造成混乱（在我看来）。从长远来看，当数据增长时，您将不得不保留一个单独的状态 obj 来管理数据和 UI。因此，最好从一开始就将它们分开。

【讨论】：