javascript - React 存储数据以进行复杂处理

Question

我对 ReactJS 有点陌生。

我想在 ReactJS 中存储用于复杂计算的数据。由于setState是异步的，我不必费心将所有需要的数据存储在里面state，因为几乎不可能做我想做的事。

我正在考虑执行以下操作：将所需的变量存储在状态本身的对象中。例如，构造函数中定义的状态是以下对象

constructor(props){
    this.state = { complicated_storage: { x : 123, y : 324 } }
}

这样我就可以操作this.state.compicated_storage.xor this.state.compicated_storage.y，并做类似的事情this.state.compicated_storage.x = 4而不必担心异步行为。

这是在 ReactJS 中做事的坏方法吗？我注意到这样你可以绕过整个setState机制，只需将我的所有变量存储在state.

谢谢你

标签： javascriptreactjs

Answer 1

这是在 ReactJS 中做事的坏方法吗？我注意到，通过这个，您可以绕过整个 setState 机制，只需将我的所有变量都存储在状态内的对象中。

状态的全部目的是在组件发生变化时重新渲染组件。如果你直接修改它，比如state.someVariable = 2，React 不会知道你的更改，并且它不会在更改后重新渲染您的组件（但是，如果以后有其他事情导致重新渲染，更改将被反映）。

如果您需要更改某些数据触发重新渲染并更新视图，请使用 state 和setState.

如果没有，您可以简单地使用类字段，而不是将其存储在状态中。

此外，我不确定你认为异步会以何种方式阻碍你的目标，所以也许你应该更清楚一点。状态是异步的只是意味着在调用函数后“稍后”对状态进行更改（这是另一个主题），因此 React 可以出于性能原因批量更新。

最后但同样重要的是，您应该研究钩子 (useState)，而不是使用类组件。