React-MVP 是一款基于 React.js 的 MVP 模式实现库，它可以帮助前端开发人员更加简单快速地构建组件和应用程序。本篇文章将介绍 react-mvp 使用教程，带着你深入了解这个 npm 包。
安装依赖
在开始使用 react-mvp 之前，需要先安装相应的依赖。在命令行中输入以下命令进行安装：
npm install react react-dom react-mvp
初始化项目
新建一个项目，引入 react-mvp，先构建一个简单的 MVP 模式页面
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ - ---- ------------
----- ------- - -- ----------- -- -- -
-----
---------- -----------
------- --------------------------- -----------
------
--
----- ------------ - -- -- -
----- ----------- - -- -- -
------------- -----------
--
------ -------- ------------------------- ---
--
----------------------------- ------------------------ --- ---------------------------------这是一个最基本的 MVP 模式页面，MVP 由 View（视图层）、Presenter（展示逻辑层）、Model（数据模型层）三部分组成，每部分各自有着不同的职责。在这个例子中，我们只涉及到了视图层和展示逻辑层。Presenter 负责将 View 和 Model 进行绑定，将 View 与 Model 的状态和数据进行交互。
使用 React-MVP 构建组件
现在，我们通过 react-mvp 来实现一个具体的组件。
首先，我们在项目中创建一个名为 PeopleList 的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- ------------
----- -------------- - -- ------ -- -- -
----
-------------------- -- -
--- ----------------------------------
---
-----
--
----- ------------------- - -- -- -
----- -------- ---------- - ----------
- --- -- ----- ----- --
- --- -- ----- ------- --
---
------ --------------- --------------- ---
--
------ ------- -- -- ------------- ------------------------------- ---在上面的代码中，我们实现了一个 PeopleList 组件。这个组件有两部分组成：视图层 PeopleListView 和展示逻辑层 PeopleListPresenter。Presenter 负责提供初始化数据和处理组件内部的事件，根据数据渲染视图。View 负责展示数据。
接下来，我们在 AppPresenter 中引入 PeopleList：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ - ---- ------------
------ ---------- ---- ---------------
----- ------- - -- ----------- -- -- -
-----
---------- -----------
----------- --
------- --------------------------- -----------
------
--
----- ------------ - -- -- -
----- ----------- - -- -- -
------------- -----------
--
------ -------- ------------------------- ---
--
----------------------------- ------------------------ --- ---------------------------------最后，我们完成了一个具有添加数据功能、还有数据列表展示的组件。
结语
React-MVP 提供了一种方便的开发模式，让前端开发者更加专注于实现组件和应用功能。通过上面的例子，我们可以很好地理解和学习使用 react-mvp，并将其应用到自己的项目中。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562cb81e8991b448e0140