ReactJS 是一个流行的 JavaScript 库，用于构建用户界面。在 ReactJS 中，我们经常使用 this.state 和 this.setState 来管理组件状态。虽然它们看起来很相似，但它们之间有一些重要的区别。
this.state
this.state 是一个对象，用于存储组件的状态。当组件的状态发生变化时，ReactJS 将重新渲染组件并更新 DOM。例如，以下代码定义了一个简单的计数器组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
-------- -
------ ------------------------------
-
-在这个组件中，this.state 变量被用来存储当前的计数值，并且在 render 方法中被引用渲染出来。
this.setState
与 this.state 不同，this.setState 是一个方法，用于更新组件的状态。当调用 this.setState(newState) 时，ReactJS 将合并 newState 中的状态变化到组件的当前状态，并重新渲染组件以反映这些更改。例如，以下代码定义了一个点击按钮后增加计数器的组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
-----------------------------
------- -------------------------------- ------------
------
--
-
-在这个组件中，当按钮被点击时，handleClick 方法调用 this.setState({ count: this.state.count + 1 }) 来更新计数器的值。ReactJS 然后重新渲染组件以反映新的计数器状态。
区别
现在我们来看一下它们之间的区别。this.state 只能在组件的构造函数中初始化，如上面的第一个例子所示，而不能直接更改。您必须使用 this.setState(newState) 来更改组件的状态。这是因为 ReactJS 需要跟踪每个组件的状态变化，并在状态发生更改时更新视图。
此外，由于 ReactJS 将多次调用 setState() 合并为单个批处理更新，因此在使用异步操作或处理大量数据时，可能不会立即看到新状态的变化。在这种情况下，您可以使用回调函数作为 setState() 的第二个参数，在状态已经更新后执行一些操作，如以下代码所示：
this.setState({ count: this.state.count + 1 }, () => {
console.log(`Count is now ${this.state.count}`);
});总结
在 ReactJS 中，this.state 用于存储组件的状态，而 this.setState() 用于更新状态并触发重新渲染。它们之间的区别在于 this.state 只能在构造函数中初始化，而 this.setState() 用于更改状态。因此，在进行状态更改时，请始终使用 this.setState() 来确保 ReactJS 能够正确地跟踪状态变化，并在必要时更新视图。
希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31261
