从 useEffect 访问上下文

IT技术 reactjs react-hooks
2021-04-04 02:35:59

我有一个上下文，用于在我的应用程序执行长时间运行的任务时显示整页微调器。

当我尝试在内部访问它时，useEffect我收到一条react-hooks/exhaustive-depsESLint 消息。例如，下面的代码，虽然它按预期工作，但声明busyIndicator缺少依赖项：

const busyIndicator = useContext(GlobalBusyIndicatorContext);

useEffect(() => {
    busyIndicator.show('Please wait...');
}, []);

这篇文章建议我可以包装useCallback可能如下所示的函数：

const busyIndicator = useContext(GlobalBusyIndicatorContext);
const showBusyIndicator = useCallback(() => busyIndicator.show('Please wait...'), []);

useEffect(() => {
    showBusyIndicator();
}, [showBusyIndicator]);

尽管这有效，但它已将问题移至useCallback现在抱怨缺少依赖项的行。

在这种情况下可以忽略 ESLint 消息还是我错过了什么？

2个回答

如果您busyIndicator在组件的生命周期内没有更改，您可以简单地将其作为依赖项添加到useEffect：

const busyIndicator = useContext(GlobalBusyIndicatorContext);

useEffect(() => {
    busyIndicator.show('Please wait...');
}, [busyIndicator]);

如果busyIndicator可以更改并且您不想看到错误，那么您可以使用useRef钩子：

const busyIndicator = useRef(useContext(GlobalBusyIndicatorContext));

useEffect(() => {
    busyIndicator.current.show('Please wait...');
}, []);

useRef() 钩子不仅仅用于 DOM 引用。“ref”对象是一个通用容器，它的当前属性是可变的并且可以保存任何值，类似于类上的实例属性。阅读更多

刚刚发现了这个技巧，它起到了很好的作用。@ogg130 它起作用的原因是 useRef 创建了一个在组件的生命周期内持续存在的引用 - 来自文档reactjs.org/docs/hooks-reference.html#useref "useRef 返回一个可变 ref 对象，其 .current 属性是初始化为传递的参数 (initialValue)。返回的对象将在组件的整个生命周期内持续存在。” 通常你会看到它与元素的引用一起使用，但你可以将它用于很多事情。
2021-06-04 02:35:59
@Newm useRef 技巧真的很棒，为我解决了这个问题……谢谢！两年后，我在这里问你是否有足够的理解来解释为什么它解决了这个问题？非常想知道这是做什么不同的。
2021-06-05 02:35:59
谢谢，我已经独立使用了 useRef 和 useContext 但我从来没有想过它们可以一起使用
2021-06-11 02:35:59

无需将 useContext 包装在 useRef Hook 中。您可以更新您的上下文数据，只需像这样调用 useEffect Brackets 即可。

const comingData = useContext(taskData);

useEffect(() => {
console.log("Hi useEffect");
}},[comingData]); //context data is updating here before render the component
此示例不会导致组件呈现。如果 useEffect 中有任何会触发重新渲染的内容（例如，使用选择器分派存储，更新状态），则重新渲染组件将创建对 useContext 的新引用，从而导致 useEffect 再次运行，并创建无限环形。至少这就是发生在我身上的事情。使用 useRef 很好地解决了它
2021-05-23 02:35:59
每当任何事件更新上下文时，console.log 都会触发，在我的情况下，它在几秒钟内为我增加了 +800MB 的内存
2021-06-14 02:35:59
其它你可能感兴趣的问题
上一篇如何在 React v16.6 的新 CONTEXT API 中获取多个静态上下文 下一篇在组件内获取 Next.js 数据的最佳实践