前言
React 是一款极其流行的前端框架，它的基础是组件化，其中又分为函数组件和类组件两种。在 React 的早期版本中，类组件是主流，但随着 React Hooks 的出现，函数组件变得越来越受欢迎。在函数组件中，状态的管理使用 useState hook 进行，但是有些时候，使用类组件的 this.state 的方式更加符合开发者的使用习惯，这时候，你就可以通过 babel-plugin-stateful-functional-react-components 这个 npm 包来实现函数组件中的 this.state。
安装
在新建项目的根目录下，打开终端，输入以下命令：
npm install --save-dev babel-plugin-stateful-functional-react-components
接着，在项目根目录下新建 .babelrc 文件，内容为：
{
"plugins": ["stateful-functional-react-components"]
}当你在编译 jsx 语法的时候，babel-plugin-stateful-functional-react-components 就会帮你自动将函数组件中的状态加上 this。
使用
下面我们将用一个例子说明该插件的使用方法。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- -------- -
----- ------- --------- - ------------
------ -
------- ----------- -- -------------- - ----
------------------ ------
---------
--
-上面这个组件是一个简单的 Button 组件，它使用了 useState hook 来管理 count 状态，并在点击 button 的时候修改该状态，并显示当前的点击次数。
但是像这样直接使用的话，会报错：
ReferenceError: this is not defined
因为在函数组件中，this 是 undefined，无法使用 this.state。
使用 babel-plugin-stateful-functional-react-components 插件后，上面的代码可以这样写：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- -------- -
----- ------- --------- - ------------
------ -
------- ----------- -- -------------- - ----
------- ------
---------
--
-
------ ------- -------当你在编译 jsx 语法的时候，babel-plugin-stateful-functional-react-components 就会自动将上述代码转成如下代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
-------- -
------ -
------- ----------- -- --------------- ------ ---------------- - - ----
------------------ ------
---------
--
-
-
------ ------- -------这样，你就可以像使用类组件一样在函数组件中使用 this.state 了。
总结
babel-plugin-stateful-functional-react-components 是一个非常实用的 npm 包，它可以帮助开发者在函数式组件中实现类似类式组件的状态管理。在项目开发中，如果你需要使用函数组件，同时又需要使用 this.state，那么这个插件就非常适合你了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aeb81e8991b448d8913