使用 React 和 GraphQL 的最佳实践：组件和容器模式

在现代 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 来获取数据并将其传递到子组件。以下是常规容器组件的示例：

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

import MyComponent from './MyComponent';

const MY_QUERY = gql`
  query MyQuery {
    results {
      name
    }
  }
`;

class MyContainer extends Component {
  render() {
    const { data: { loading, results } } = this.props;
    if (loading) {
      return <div>Loading...</div>;
    }
    return <MyComponent name={results[0].name} />;
  }
}

export default graphql(MY_QUERY)(MyContainer);

在这个例子中，我们来看一下 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