React 是目前最流行的前端框架之一，而 npm 包则是 React 生态系统中的一个非常重要的基础设施。如果你想在自己的 React 项目中使用一些常用的组件或者功能，那么 npm 包将是一个非常好的选择。而今天我们要介绍的则是一个非常实用的 npm 包：react-linking-model。
react-linking-model 是什么？
react-linking-model 是一个 React 组件数据模型管理器，它可以帮助你更好地组织你的组件中的数据，并且可以实现数据的双向绑定，减少了代码中的一些重复劳动。同时，react-linking-model 还支持了状态管理库 Redux，可以让你在使用 Redux 的同时更好地管理你的组件数据。
如何使用 react-linking-model？
在你的 React 项目中，首先需要安装 react-linking-model：
npm install --save react-linking-model
然后在你的组件中 import：
import { LinkingModel } from 'react-linking-model';现在你已经可以使用 LinkingModel 组件了，它支持一个非常常见的 React 组件之间的数据共享方案。
一、基本用法
首先，我们来看一个简单的示例，假设有两个组件，其中一个组件中有一个输入框，另一个组件中需要获取这个输入框中的内容，那么我们可以通过 react-linking-model 来实现这个目的。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- ----------------------
----- ----- - --- --------------
----- ---
---
----- ---------- - -- -- -
----- - ----- ------- - - ----------------------
------ -
------
-----------
------------
------------- -- ------------------------
--
--
--
----- ---------- - -- -- -
----- - ---- - - ----------------------
------ -
-----
-------------
------
--
--可以看到，我们在前面创建了一个 LinkingModel 对象，然后在组件中使用 useLink 方法来获取 LinkingModel 对象中的数据，比如这里的 name。可以注意到，这里的 useLink 方法支持了数据的双向绑定，这意味着，无论是 Component1 还是 Component2，只要其中一个组件中修改了 name 的值，那么另一个组件的 name 也会随之更新。另外，我们还可以通过 setName 方法来修改 LinkingModel 中 name 的值。
二、通过 useSelect 方法加入 Redux 的支持
在很多大型项目中，我们通常会使用 Redux 管理组件状态，而 react-linking-model 也为我们提供了这个功能的支持，下面看一下如何使用。
首先，我们先引入 React Redux 的 Provider 和 createStore，然后创建一个 Redux store：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
----- ----- - ------------
------- -- ------
-
----- ---
-
--然后，在创建 LinkingModel 对象时通过 useSelect 方法来注册 store 中的某个状态：
const model = new LinkingModel({
name: '',
}).useSelect((state) => ({ name: state.name }));在这里，我们通过 useSelect 方法注册了 store 中的 name 状态，这样，我们就可以在 React 组件中使用 useLink 方法来获取这个状态了，比如这样：
-- -------------------- ---- -------
----- ---------- - -- -- -
----- - ----- ------- - - ----------------------
------ -
------
-----------
------------
------------- --
---------- -- -
---------------- ----- -------------- ----- -------------- ---
------ ---------------
--
-
--
--
--
----- ---------- - -- -- -
----- - ---- - - ----------------------
------ -
-----
-------------
------
--
--可以看到，这里的 useLink 方法就跟前面的用法一样，但是在 setName 中，我们额外加入了 dispatch 操作，这样，我们就可以实现数据的双向绑定了。
三、自定义状态管理器
如果您使用的状态管理器不是 Redux，那么也没有关系，react-linking-model 支持自定义状态管理器，只需在创建 LinkingModel 对象时提供即可，比如下面的示例：
-- -------------------- ---- -------
----- ----------- - -
------- -
----- ---
--
---------- ---------- -- -
-- --- --------- ---- ------ -----
--
--------- -- -- -------------------
--------- -------- -- -
-- ------------ --- -------------- -
----------------------- - ------------
-
--
--
----- ----- - --- ------------------------------------------- -- -- ----- ---------- ----在这里，我们创建了一个自定义的状态管理器 customStore，然后在创建 LinkingModel 对象时传递即可。
总结
react-linking-model 是一个非常实用的 React 数据模型管理器，它可以帮助我们更好地组织组件数据，并且支持了数据的双向绑定。同时，它还支持与 Redux 集成，方便了我们在大型项目中的状态管理。如果你想要学习更多关于 react-linking-model 的内容，可以去查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581a81e8991b448d5405