我应该在 React 中的什么地方保存 API 信息?
Where should I save API information in React?
我是 React 的初学者,似乎有一些惯例,比如在 React 中为 UI、导航栏、登陆页面等创建单独的文件夹和文件。
React中的URL和API关键信息一般存储在哪个组件中?
我认为最好使用 UseContext 声明和存储 API 并使用 ContextProvider 包装 App.js 文件,以便可以在任何地方访问 API。
还是将它们保存在 App.js 文件中更好,以便它可以传递给子组件?
还是只为 API 创建一个单独的文件夹更好?
您的问题没有通用的答案。有很多设计模式。我建议您阅读的是 'Container Component Pattern'.
容器组件模式(或简称为组件模式)确保将数据获取逻辑、管理状态与表示部分分开。表示部分有一个愚蠢的名字,愚蠢的组件。这是因为表示部分的职责只是呈现传递给它的信息。数据获取、处理和状态管理的智能工作发生在容器组件中。
DATA STORE -- 由 API 获取的数据 --> 数据获取容器 -- 作为 props 传递的数据 --> Presentation Component
简而言之,您可以创建文件夹 utils/hooks 并在其中适当地存储 fetch functions/hooks。然后你可以创建容器组件来管理获取的数据。
我是 React 的初学者,似乎有一些惯例,比如在 React 中为 UI、导航栏、登陆页面等创建单独的文件夹和文件。
React中的URL和API关键信息一般存储在哪个组件中? 我认为最好使用 UseContext 声明和存储 API 并使用 ContextProvider 包装 App.js 文件,以便可以在任何地方访问 API。
还是将它们保存在 App.js 文件中更好,以便它可以传递给子组件?
还是只为 API 创建一个单独的文件夹更好?
您的问题没有通用的答案。有很多设计模式。我建议您阅读的是 'Container Component Pattern'.
容器组件模式(或简称为组件模式)确保将数据获取逻辑、管理状态与表示部分分开。表示部分有一个愚蠢的名字,愚蠢的组件。这是因为表示部分的职责只是呈现传递给它的信息。数据获取、处理和状态管理的智能工作发生在容器组件中。
DATA STORE -- 由 API 获取的数据 --> 数据获取容器 -- 作为 props 传递的数据 --> Presentation Component
简而言之,您可以创建文件夹 utils/hooks 并在其中适当地存储 fetch functions/hooks。然后你可以创建容器组件来管理获取的数据。