在现代 web 应用程序开发中，React 和 GraphQL 是两种最流行的技术。React 是一个强大的 UI 库，可以用于开发复杂的用户界面。GraphQL 是一种强大的查询语言，可以用于获取和修改应用程序的数据。使用这两种技术的最佳实践之一是使用组件和容器模式。
组件和容器模式
组件和容器模式是一种 React 程序结构。组件是渲染 UI 的 React 元素。它们负责显示数据并相应用户交互。容器是管理应用程序的数据和状态的 React 组件。它们还负责从 GraphQL 服务器中获取数据。
使用组件和容器模式，您可以创建可重用的组件并将其组合成更复杂的 UI。容器组件负责从 GraphQL 服务器中获取所需的数据，并将其作为 props 传递给它们的子组件。
创建组件
在 React 中，组件是通过类或函数创建的。这就是一个简单的函数组件示例：
import React from 'react';
function MyComponent(props) {
return <div>{props.name}</div>;
}
export default MyComponent;组件通过 props 接收数据。在上面的例子中，组件接收一个名为“name”的 prop。在组件的返回语句中，它将 prop 渲染到一个 div 元素中。
创建容器
容器是管理应用程序的数据和状态的 React 组件。它们使用 GraphQL 来获取数据并将其传递到子组件。以下是常规容器组件的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- ---------------
------ --- ---- --------------
------ ----------- ---- ----------------
----- -------- - ----
----- ------- -
------- -
----
-
-
--
----- ----------- ------- --------- -
-------- -
----- - ----- - -------- ------- - - - -----------
-- --------- -
------ ----------------------
-
------ ------------ ---------------------- ---
-
-
------ ------- -------------------------------在这个例子中，我们来看一下 MyContainer 组件。它使用 react-apollo 的 graphql() 函数向 GraphQL 服务器发出查询请求。MyQuery 查询请求将返回一个名为 results 的数组。在 MyContainer 组件的 render 函数中，我们保先检查数据是否加载完成。然后，它将在 MyComponent 组件的 name prop 中显示名字。
组合
让我们将组件 MyContainer 和 MyComponent 组合成一个更复杂的 UI。在以下示例中，我们将 MyContainer 放入 App 组件中：
import React from 'react';
import MyContainer from './MyContainer';
function App() {
return <MyContainer />;
}
export default App;当 App 组件渲染时，它将呈现 MyContainer 组件。然后，MyContainer 组件将向 GraphQL 服务器发出请求，然后将结果传递给 MyComponent 组件。最后，MyComponent 组件将名称渲染到屏幕上。
总结
组件和容器模式是一种 React 程序结构，它可以使您创建可重用的组件并将其组合成更复杂的 UI。容器组件负责从 GraphQL 服务器中获取所需的数据，并将其作为 props 传递给它们的子组件。这种结构可以使代码更清晰、更可靠，使您专注于应用程序的功能而不是底层细节。
希望本文中的示例能够帮助您更好地理解组件和容器模式，并在实践中使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6595e73eeb4cecbf2d9da046