在 React 中，组件可以是有状态和无状态的。有状态组件可以使用 state 属性来保存和修改组件的状态。然而，为了创建一个有状态组件需要大量的代码，这并不方便。
为此，有一个 npm 包叫做 react-stateful-component，它可以让你轻松地创建有状态组件并减少代码量。在本篇文章中，我们将会学习如何使用 react-stateful-component 包。
安装
首先，在项目中需要安装 npm 包 react-stateful-component，通过以下命令来安装：
--- ------- ------ ------------------------
接着，我们就可以开始使用它了。
使用
我们先来看一个使用 react-stateful-component 的例子。
------ ----- ---- --------
------ --------- ---- ---------------------------
----- ----------- ------- --------------- -
-------- -
----- ------ -------- - -----------
------ -
-----
-------------
------- ----------- -- -------------- --------------- ------------
------
--
-
-
------ ------- ---------------- --------- -------------在上面的例子中，我们使用 react-stateful-component 将组件 MyComponent 转换成有状态组件。我们使用了 withState 高阶组件将 MyComponent 转化成了有状态组件，并将 text 作为初值传递给了它。
组件状态
withState 接受一个对象作为参数，这个对象包含了组件的状态。在上面的例子中，我们设置了 text 为 'Hello'。现在，我们可以像平常一样在组件中修改它：
------- ----------- -- -------------- --------------- ------------
当用户点击按钮时，setText 方法被调用，并将 text 设置成 'Hello World!'。
你可以在组件中使用其他的状态值，例如 counter：
------ ------- ---------------- -------- -------- --- -------------
然后在组件中使用：
----- ------ -------- -------- ----------- - -----------
支持函数方式的 setState
在 1.0.0 版本之前，react-stateful-component 只支持对象方式的 setState，但是现在，它也支持函数方式的 setState。这意味着我们可以用函数来更新组件的状态。例如：
--------------------------------- -- ----------- - ---
这将会将 counter 加一。
事件处理
react-stateful-component 并不影响你在组件中的事件处理。我们可以像往常一样在按钮上添加 onClick 事件：
------- ----------- -- -------------- --------------- ------------
当触发 onClick 事件时，setText 将会被调用，修改组件的状态。
总结
在本篇文章中，我们学习了如何使用 react-stateful-component 包来创建有状态组件。现在，你可以更轻松地创建有状态组件，并减少代码量。你可以在你的项目中尝试使用一下 react-stateful-component，它将会为你的开发带来很多便利。
完整代码
------ ----- ---- --------
------ --------- ---- ---------------------------
----- ----------- ------- --------------- -
-------- -
----- ------ -------- - -----------
------ -
-----
-------------
------- ----------- -- -------------- --------------- ------------
------
--
-
-
------ ------- ---------------- --------- -------------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f8c238a385564ab6e89