前言
在前端开发中，React 是最流行的框架之一。在使用 React 进行开发时，我们经常需要处理各种弹框、列表等界面元素的显示与隐藏等操作，而这些操作需要耗费大量的时间和精力。为了提高开发效率，很多开发者会选择使用一些类库或者组件库。而 npm 包 "react-view-manager" 就是一个非常实用的工具，它可以帮助我们快速创建和管理多个视图。
简介
"react-view-manager" 是一个帮助 React 开发者快速开发并管理多个视图的轻量级 npm 包。使用该包可以方便地控制多个组件的显示与隐藏，并进行状态管理和自定义事件绑定。该插件支持 React 16.x 及以上版本，使用 ES6 语法开发，完全模块化且无任何依赖。
安装和使用
您可以使用 npm 包管理器来安装 "react-view-manager"，在命令行终端中输入以下命令：
npm i react-view-manager
"react-view-manager" 的使用非常简单，只需要通过 import 引入组件，即可使用其中的 API。以下是一个简单的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ ---- - ---- ---------------------
------ ------- -------- ----- -
----- --------- ----------- - ----------------
----- ----------------- - -- -- -
---------------------
--
------ -
-------------
-----
------- -------------------------------------------
------
----- -------------- ------------------
------ -- --- -----------
-------
--------------
--
-在该示例代码中，我们首先通过 useState hook 定义了一个名为 visible 的状态，并将它的初始值设置为 false。然后我们创建了一个 ViewManager 组件和一个包含一个隐藏 View 组件的 ViewManager。在点击按钮后，我们通过 setState 方法改变了 visible 状态，从而使 View 组件显示出来。
API 文档
"react-view-manager" 包含两个 React 组件：ViewManager 和 View。
ViewManager
ViewManager 组件是 "react-view-manager" 的核心组件，它用于管理多个视图。以下为 ViewManager 的 props 属性：
| Props | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children | ReactNode | 组件包含的视图组件集合 | |
| defaultView | string | 默认显示的视图 | |
| className | string | 组件的 class | |
| style | object | 组件的 style | |
| onInit | function | 初始化时会触发此函数，函数会传递已注册的视图信息 |
以下是 ViewManager 组件的方法：
| 方法 | 说明 |
|---|---|
| registerView | 注册一个视图，接受一个字符串类型的 name 和一个 ReactNode 类型的 view(视图内容) |
| unregisterView | 撤销一个已注册的视图，接受一个字符串类型的 name |
| isActiveView | 判断一个视图是否处于激活状态，接受一个字符串类型的 name |
| setActiveView | 设置一个视图为激活状态，接受一个字符串类型的 name。当激活一个视图时，ViewManager 会遍历所有的视图组件，如果该组件的 name 属性与指定 name 相同，则显示该组件；否则隐藏该组件。 |
| getActiveViewName | 返回当前激活的视图名称 |
| getViewNames | 返回已注册的所有视图名称 |
| getViewByName | 根据 name 返回已注册的视图内容，接受一个字符串类型的 name，返回一个 ReactNode 类型的视图内容 |
| getViewManager | 返回一个 ViewManager 实例 |
| on | 定义自定义事件监听，函数接受一个字符串类型的事件名称和一个回调函数。当事件被触发时，回调函数将被调用。回调函数的第一个参数是当前 ViewManager 实例，所有的跟随参数会传递给事件 emit 函数。返回一个函数，调用该函数可以用于取消监听 |
| off | 撤销事件监听，函数接受一个字符串类型的事件名称和对应的回调函数。当注册位置的名称与对应名称相同时，将通过正则表达式进行匹配，以便于卸载不同声明周期的监听。如果不传递回调函数，则删除指定事件的所有监听函数，如果不传递事件名称，则删除所有的监听函数 |
| emit | 触发一个自定义事件，函数接受一个字符串类型的事件名称作为第一个参数，后跟任意数量的参数。除了第一个参数外，所有的参数将传递给事件监听器的回调函数。注意，如果您传递的事件名称未被监听，则不会执行任何操作。 |
View
View 组件用于表示一个视图，可以通过控制 visible 属性实现视图的显示和隐藏。以下为 View 的 props 属性：
| Props | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | string | 视图名称 | |
| visible | bool | false | 是否显示视图 |
| className | string | 组件 class | |
| style | object | 组件样式 |
示例
以下为一个更复杂的示例，该示例包含多个 View 组件和自定义事件绑定：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ---- - ---- ---------------------
------ ------- -------- ----- -
----- --------------- - -- -- -
----------------- -----------
--
----- ----------------- - -- -- -
----- ------- - -----------------------------
----- ------------- - ----------------------------
----- -------- - -----------------------
----- ------------ - --------------------------------
----- --------- - ------------ - - -- --------------- - - - ------------ - --
----- ------------ - --------------------
------------------------------------
--
------ -
------------ ---------------------
-----
------- ---------------------------------- -------------
------
----- ------------- -------------- --------------------------
--------- -------
-------
----- ------------- --------------- --------------------------
--------- -------
-------
----- ------------- --------------- --------------------------
--------- -------
-------
--------------
--
-在该示例代码中，我们创建了一个 ViewManager 组件，其中包含三个视图组件。在页面加载时，默认显示的是名为 "view-1" 的视图组件。在点击按钮时，我们通过 setActiveView 方法切换到下一个视图组件。
除此以外，我们还实现了一个自定义事件 handleClick，在点击 View 组件时触发该事件，并将控制台输出 "view clicked!"。
结语
"react-view-manager" 是一个非常实用的工具，通过它可以有效地管理多个视图组件，并进行状态管理和事件绑定。相对于手动编写逻辑代码，使用这个库可以帮助我们节省大量的时间和精力。同时，它也提供了非常详细的文档和示例代码，以便于我们更好地理解和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2181e8991b448dad3a