在前端开发中，有时我们需要在组件进行渲染之后执行一些操作或者在组件被卸载之前执行一些清除工作。这个时候，我们可以使用 @shopify/react-effect 这个 npm 包来处理相关的逻辑。该包提供了一种在 React 组件渲染和卸载的过程中执行副作用的方式。在本文中，我们将详细介绍如何使用该 npm 包。
安装
首先，我们需要通过 npm 安装 @shopify/react-effect 包：
npm install @shopify/react-effect
安装完毕后，在组件中导入该包：
import { useEffect, useLayoutEffect } from '@shopify/react-effect';@shopify/react-effect 包有两个主要的 hooks：useEffect 和 useLayoutEffect 。它们用法和 React 自带的 useEffect 和 useLayoutEffect hooks 类似，但是它们更加精细化地控制了副作用相关的行为。
useEffect vs. useLayoutEffect
在使用 useEffect 和 useLayoutEffect 之前，我们需要知道它们的异同点。
useEffect
useEffect 用来处理非同步或者异步的副作用，比如网络请求或者媒体资源的加载等。
该 hook 会在 DOM 更新之后异步运行副作用函数，因此它不会阻塞渲染过程，适用于大部分的副作用逻辑。除非你特别需要一个被阻塞的运行，否则不要使用 useLayoutEffect 。例子如下：
useEffect(() => {
// 异步的副作用逻辑
}, [dependencies]);useEffect 的第二个参数表示依赖项数组，当依赖的值，比如：props 或者状态发生变化时，才会重新运行副作用逻辑。
useLayoutEffect
useLayoutEffect 用来处理同步的副作用，比如 DOM 操作或者测量元素大小等。
该 hook 会在由 React 进行的 DOM 更新前同步运行副作用函数。因此，它有可能阻塞渲染，比如调用 forceUpdate 方法时。例子如下：
useLayoutEffect(() => {
// 同步的副作用逻辑
}, [dependencies]);useLayoutEffect 的第二个参数也是依赖项数组，当依赖的值发生变化时，才会重新运行副作用逻辑。
请注意，虽然 useLayoutEffect 可以阻塞渲染并且也可以同步绑定渲染的关键帧，但是如果你使用不当的话，可能会导致视觉闪烁等问题。
示例
现在，让我们来看一个使用 @shopify/react-effect 的示例。假设我们在组件的渲染和卸载时都要打印一些 debug 信息：
-- -------------------- ---- -------
------ - ---------- --------------- - ---- ------------------------
-------- ------------- -
------------ -- -
------------------------ --- --------
------ -- -- ------------------------ ---- ----------
-- ----
------------------ -- -
------------------------ -- ------------
-- ----
------ -
-----
------------------
------
--
-在这个组件中，我们在渲染之前打印了一条“ MyComponent is rendering ”的信息，在组件挂载和卸载的时候，分别打印了两条信息。
在控制台中，当我们新建或销毁 MyComponent 组件时，可以看到如下的输出：
MyComponent did mount MyComponent is rendering
MyComponent will unmount
这个简单的示例表明，使用 @shopify/react-effect 可以方便地控制组件渲染的副作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedada5b5cbfe1ea0610cd6