在前端开发中，我们经常需要在某些特定操作或事件触发时执行一些副作用（side effects），比如修改 DOM 元素、发送请求、记录日志等。inferno-side-effect 是一个 npm 包，可以帮助我们更方便地实现这些副作用。
inferno-side-effect 提供了一个高阶组件（Higher-Order Component，简称 HOC），可以包装我们需要添加副作用的组件，然后在组件的生命周期中执行指定的副作用函数。本文将介绍 inferno-side-effect 的详细用法，并提供示例代码和实际应用场景。
安装
首先，我们需要在项目中安装 inferno-side-effect。
npm install --save inferno-side-effect
使用方式
inferno-side-effect 的 API 包含两个部分：createSideEffect 和 withSideEffect。
createSideEffect
createSideEffect 是一个工厂函数，用来创建一个封装了副作用函数的 HOC。它的签名如下所示：
createSideEffect<Options, Updater>(reducePropsToState: InfernoSideEffectReducePropsToState<Options, Updater>, handleStateChangeOnClient?: InfernoSideEffectHandleStateChange<Updater, Options>, mapStateOnServer?: InfernoSideEffectMapState<Updater>): InfernoSideEffectHoc<Options, Updater>;
其中，reducePropsToState 是一个函数，其作用是在 HOC 的 render 方法之前从参数中提取出需要使用的属性，并将其转换为 HOC 的内部状态。handleStateChangeOnClient 函数则用于在客户端（浏览器端）发生状态变化时执行一些副作用。mapStateOnServer 函数则用于在服务端构建生成 HTML 时执行一些副作用。
createSideEffect 将返回一个 HOC（Higher-Order Component），用于包装我们需要添加副作用的组件。该 HOC 将为组件提供相关的上下文环境。
withSideEffect
withSideEffect 是 inferno-side-effect 提供的另一个函数，它可以直接为我们的组件添加副作用。它的使用方式如下所示：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------
----- ----------- - --------------------------------
----------- -- -
----- ---------- - ------------------- -- ------------------------ ---
------ - ---------- --
--
---------------- --------------- -- -
----- -- - --------------------------------------
------------ - ---------------
-
----- ---------- -- -- -
---- --------------------- ---------------
---在这个示例中，我们使用 withSideEffect 包装了一个简单的组件，并传递给它一个由 createSideEffect 产生的 HOC。这个 HOC 通过调用 reducePropsToState 函数，将 MyComponent 组件中的 property 属性映射到 HOC 的内部状态中。在 HOC 的 render 方法中，我们通过 props 属性获取到了这个内部状态，并展示在了组件上。
上述示例中使用了一个简单的 reducePropsToState 函数，来从 propsList 提取出 classNames 属性，并将其连接成一个字符串。在浏览器端，createSideEffect 将通过调用 handleStateChangeOnClient 函数，将 prevClassNames 和 nextClassNames 作为参数传递给我们的副作用函数。在本示例中，我们通过 document.querySelector 获取到了 .my-element 的 DOM 元素，并将其类名设置为了 nextClassNames。
在实际应用中，我们可以通过替换 reducePropsToState 函数，来实现更复杂的属性转换逻辑。同时，我们也可以使用不同的 handleStateChangeOnClient 函数，来执行不同的副作用或辅助函数。
实际应用场景
inferno-side-effect 能够胜任很多实际应用场景，比如：
- 追踪分析，例如在页面加载时发送追踪事件；
- 历史记录控制，例如在路由切换时更新浏览器历史记录；
- 框架集成，例如在使用 Redux 等状态管理库时封装相关的副作用函数。
下面是一个实际应用场景的示例代码，它通过在页面中插入一段 JavaScript 脚本，从而完成了一个简单的追踪分析任务：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------
----- ---------- - --------------------------------
----------- -- -
----- - ------ ---- - - -------------
------ - ------ ---- --
--
------ - ------ ---- -- -- -
-- ----------- --- ------ -
----- -- - ---------------------------------
------- - ------------------
-------- - -----
------ - ------------------------------------------------------------------------------------
------------------------------
-
-
---------- -- ------在这个示例中，我们定义了一个名为 TrackEvent 的组件，并通过 withSideEffect 和 createSideEffect 将其包装成了一个能够执行追踪分析逻辑的 HOC。在 reducePropsToState 函数中，我们从参数 propsList 中提取出 event 和 data 两个属性，并将其作为状态保存在 HOC 中。在 handleStateChangeOnClient 函数中，我们检查了 prev 和 next 两个参数的 event 属性，如果二者不同，则使用 document.createElement 创建了一个 JavaScript 脚本元素，并将其插入到了页面 body 元素中。当浏览器加载到这个脚本时，它会向某个追踪服务器发送一个HTTP请求，携带上 data 作为参数。
使用 TrackEvent 组件时，我们只需要在需要进行追踪分析的地方将其插入到 DOM 中即可。例如：
render() {
return (
<div>
<TrackEvent event="pageView" data={{ page: 'Home' }} />
<h1>Home Page</h1>
</div>
);
}在这个示例中，我们在 Home 页面插入了一个 TrackEvent 组件，并指定了 event 属性和 data 属性，在渲染完成后，TrackEvent 组件将自动运行追踪分析逻辑，向追踪服务器发送了一条事件数据。
总结
通过本文，我们已经了解了使用 inferno-side-effect 包装组件，并通过 HOC 添加副作用的基本用法。inferno-side-effect 的实际应用场景包括深度 API 集成、追踪分析、历史记录控制等。我们可以通过扩展 reducePropsToState 和 handleStateChangeOnClient 函数，来实现更多的副作用逻辑。在实际开发中，我们可以结合自己的业务需求，借鉴 inferno-side-effect 提供的思路，来实现自己的副作用功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c9481e8991b448ebf38