在前端开发中，经常需要对数据做出响应式的处理，以便在数据发生变化时能够及时地更新视图。Preact 是 React 的一个轻量级实现，而 preact-notify-change 是一个基于 Preact 的 npm 包，可以帮助我们实现对数据变化的监听和响应。
安装
使用 npm 进行安装：
--- ------- -------------------- ------
使用
基本使用
使用 preact-notify-change，需要创建一个观察者对象，然后将需要监听的对象和属性添加到观察者对象中。如下例所示，创建了一个名为 observer 的观察者对象，并把 data 对象及其中的 count 和 list 属性添加到观察者中：
------ - -- --------- - ---- ---------
------ - --------- ----------- - ---- -----------------------
----- ---- - -
------ --
----- --------- --------- ---------
--
----- --- ------- --------- -
-------- -
------ -
--------- ------------ -- ---------------
-----
--------- ----------------
----
--------------------- ------ -- -
--- -----------------------
---
-----
------- ---------------------------------------
------
-----------
--
-
------------- -
--------
------------- - --- -----------
-
------------------- -
-- --- ---- -- --------
--------------------------- --------- ---------
-
---------------------- -
-- ------ ---- ---- --------
----------------------------- --------- ---------
-
----------- - -- -- -
-------------
-----------------------
--
-
------ ------- ----在组件的 componentDidMount 方法中，我们将 data 对象及其中的 count 和 list 属性添加到 observer 中。在组件的 componentWillUnmount 方法中，我们将它们从 observer 中删除。这样当 count 和 list 属性发生变化时，observer 会自动调用组件的 render 方法重新渲染界面。
高级使用
上面的例子中，我们将 data 对象及其中的 count 和 list 属性都添加到 observer 中，这样当其中任意一个属性发生变化时，observer 都会触发更新。但是有时候我们只需要监听对象中的某个特定属性的变化，而不是整个对象的变化。
preact-notify-change 也提供了监听对象属性变化的功能。比如我们只对 data 对象中的 count 属性进行监听，可以这样做：
--------------------------- ---------
这样当 data.count 属性发生变化时，observer 会触发更新。
preact-notify-change 还支持监听对象嵌套属性的变化。比如我们有一个 person 对象，它具有 name 和 address 属性，其中 address 属性又包含了 city 和 street 属性。如果我们想要监听 person 对象的 address.city 属性的变化，可以这样做：
----------------------------- ----------------
这样当 person.address.city 属性发生变化时，observer 会触发更新。
自定义处理函数
有时候我们可能需要在属性变化时执行一些自定义的处理函数。我们可以在创建观察者对象时，指定一个处理函数，此函数接收一个参数，即触发变化的源对象。比如下面这个例子，当 count 属性发生变化时，输出一个日志信息：
----- -------- - --- ----------------- -- - ------------------ ------- -- ------------------ --- ---------------------- ---------
使用 hooks
除了在类组件中使用，preact-notify-change 还提供了在函数组件中使用的 hooks，可以更方便地监听对象属性的变化。
使用 useObserver hook，可以将需要进行监听的对象和属性添加到观察者中，并返回一个包含更新后的属性值的对象。比如下面这个例子，使用了 useObserver hook，监听了 data 对象中的 count 和 list 属性：
------ - - - ---- ---------
------ - --------- ----------- - ---- -----------------------
----- ---- - -
------ --
----- --------- --------- ---------
--
----- --- - -- -- -
----- -------- - -------------- -- -
------------------ -- ---- ----------
---
------ -
--------- ------------ -- ----------
-----
--------- --------------------
----
------------------------- ------ -- -
--- -----------------------
---
-----
------- ----------------------------------
------
-----------
--
-------- ------------- -
-------------
-----------------------
-
--
------ ------- ----在 useObserver hook 中指定需要监听的对象和属性，然后在组件中使用返回的更新后的对象。
总结
preact-notify-change 是一个非常好用的响应式 npm 包，它可以帮助我们监听对象属性的变化，并在属性变化时及时更新视图。我们可以在类组件或者函数组件中使用它，以实现更高效和更方便的开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005667f81e8991b448e2903