React Native with Context API 警告：“允许需要循环，但可能导致未初始化的值......”

Posted 2023-04-14

【中文标题】React Native with Context API 警告：“允许需要循环，但可能导致未初始化的值......”

【英文标题】：React Native with Context API warnings: "Require cycles are allowed, but can result in uninitialized values... "

【发布时间】：2020-06-14 18:46:03

【问题描述】：

当我在 Expo React Native 项目中使用 React 的 Context API 时，会收到以下警告：

要求循环是允许的，但可能导致未初始化的值。考虑重构以消除对循环的需求。

我正在 App.tsx 中创建上下文：

import Start from "./start";

export const AppContext = React.createContext(
  isLandscape: true,
);

export default function App() 
  return (
    <AppContext.Provider value= isLandscape: false >
      <Start />
    </AppContext.Provider>
  );

在 Start.tsx 组件中，我正在使用上下文：

import  AppContext  from "./App"

export default function App() 
  const context = React.useContext(AppContext);
  console.log(context);

  return (
    <Text>Sutff</Text>
  );

我看起来警告是因为App 导入Choose 然后再次从App 导入上下文。 Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle

但是，这不是 Context API 应该如何使用的吗？在 React Native 中使用 Context API 时，人们通常如何处理这个问题？

【参考方案1】：

要中断循环，请将共享上下文移动到单独的文件中。

// in AppContext.js

export const AppContext = React.createContext(
  isLandscape: true,
);

然后在App.js 和Start.js 中，从该文件中导入上下文。

import  AppContext  from './AppContext'

因此，不是让 App Start 相互依赖，而是现在有 App -> AppContext 和 Start -> AppContext，从而打破了循环。

【讨论】：

为什么会这样？

@conor909 如果我等你，你等我，我们永远不会去。相反，如果我们都在等待另一个人，那么一旦那个人走了，我们就和他们一起去。现在 JS 实际上并没有陷入死锁，但仍然尝试加载循环依赖项（有点像当我决定去并希望你也去的时候），并且 一些 时间它很好（例如在 OP 示例中，它可以首先在 App.tsx 中初始化 AppContext，然后在 Start.tsx 中初始化 App，最后在 App.tsx 中初始化 App）但是如果您在一个文件中有 A = B 并且在另一个文件中有 B = A，当值仍然未定义时，将首先执行其中一个。

我觉得我根本不关注你。我认为这不应该是关于事物存在于哪些文件中，而应该是关于何时以特定顺序调用函数

我认为你混淆了两件事。在 Node/javascript/TypeScript 中，文件（模块）在程序遇到它们时被逐行加载和执行。这意味着所有导入、导出和***赋值语句都会立即执行（当加载该文件时，即被其他文件引用时）。如果程序遇到function 语句，它不会立即执行该函数（它的主体），而是定义它。稍后，可以通过附加括号来调用函数，例如myfn()。对于 React 组件，React“框架”会为您调用这些函数。

是的，所以调用函数不会调用位于同一文件中的所有函数