随着React Native的持续发展，越来越多的开发者开始探索如何在RN项目中使用一些前端现代化的技术，比如ES6/7和装饰器。而Babel则是其中极为重要的一环，它使我们可以在RN项目中使用ES6/7的新特性和语法。
在本文中，我们将介绍如何使用Babel7和装饰器在RN项目中创建一个简单的TodoList，以及实现它的过程中的一些技巧和坑点。通过本文的学习，读者可以了解到Babel7和装饰器的基本用法，以及如何在RN项目中使用它们来提升开发效率和代码质量。
安装必要的依赖包
首先，在开始之前，我们需要确保我们的RN项目已经使用了Babel7，并且安装了以下几个必要的依赖包：
npm install --save-dev @babel/plugin-proposal-decorators npm install --save-dev @babel/plugin-proposal-class-properties npm install --save-dev babel-eslint
其中，@babel/plugin-proposal-decorators和@babel/plugin-proposal-class-properties是Babel7中支持装饰器和class property语法的两个重要插件。而babel-eslint则是一个Babel和ESLint之间的桥接器，用于让ESLint支持Babel处理后的代码。
在 Babel 配置文件中启用插件
接下来，在Babel的配置文件中，我们需要启用上述两个插件。假设我们的Babel配置文件为.babelrc，那么我们需要在其中加入如下配置：
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}这里我们分别启用了@babel/plugin-proposal-decorators和@babel/plugin-proposal-class-properties插件，并设置了它们的一些选项（legacy和loose）。
顺便说一下，配置Babel7的方式也可以是通过.babelrc.js文件或babel.config.js文件，这里我们就不再过多赘述了。
创建 TodoList 组件
接下来，我们开始创建一个简单的TodoList组件，该组件的结构如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ---------- ------ - ---- ---------------
------ - ---------- - ---- -------
------ - -------- - ---- -------------
---------
------ ------- ----- -------- ------- --------- -
----------- ---- - ---
----------- ---- - ---
------- - -- -- -
-------------------- -
--------------------------
--------- - ---
-
-
-------- -
------ -
------
---------------------
----------
-----------------
-------------------- -- --------- - -----
--
-------
-----------
----------------------
--
--------------------- ------ -- -
----- -------------------------
---
-------
--
-
-在上面的代码中，我们使用了ES7的装饰器语法@observer和@observable，以及类属性的语法@observable list和@observable text。这些语法的目的是让我们更方便地使用Mobx进行状态管理，并提高代码可读性和可维护性。
编写 TodoList 测试用例
接下来，我们编写一些测试用例来验证我们的TodoList组件的正确性。我们使用Jest作为测试框架，并安装了mobx-react、enzyme和enzyme-adapter-react-16等必要的依赖包。
假设我们的测试用例文件为TodoList.test.js，那么我们可以编写如下测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
---------- --- ---- ---- -- ---- ---- ----- --- -------- -- -- -
----- ------- - ----------------- ----
------------------------------------------------ ----- ---- ----
-----------------------------------------
------------------------------------------------------- ---- ----
---
---------- --- --- ---- ---- -- ---- ---- ----- -- ------- -- -- -
----- ------- - ----------------- ----
------------------------------------------------ ----
-----------------------------------------
-----------------------------------------------
---
---在上述测试用例中，我们分别测试了“添加一项Todo项目”和“输入为空时不能添加Todo项目”的场景，并使用Jest的expect断言语法进行断言。同时，我们也使用了Enzyme的shallow函数来进行组件测试。
当然，这里的测试用例只是简单的demo，有了Babel和装饰器，我们可以更方便地编写更复杂和更高质量的测试用例。
总结
通过本文的阅读，我们了解到了如何在React Native项目中使用Babel7和装饰器，以及如何使用Mobx进行状态管理，同时，我们也介绍了如何使用Jest和Enzyme进行组件测试。
我们相信，学习并掌握这些技术，可以让我们在RN项目中更高效、更可靠地开发，同时也会给我们带来更令人愉悦的开发体验。希望读者们能够在此基础上进一步深入学习，并在实践中不断总结和改进。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64686a51968c7c53b08a250d