React 组件之间如何共享数据，避免重复请求-JavaScript中文网-JavaScript教程资源分享门户

React 是一个非常流行的前端框架，它提供了一种简单的方式来构建可重用的组件。在 React 中，组件是构建 Web 应用程序的基本单元。但是，当我们需要在不同的组件之间共享数据时，这可能会变得有点棘手。在本文中，我们将讨论一些在 React 中共享数据的方法，以及如何避免重复请求。

1. 使用 React Context

React Context 是 React 16.3 引入的一个新特性。它提供了一种在组件之间共享数据的方式，而不需要将数据通过组件树手动传递。使用 Context，我们可以在组件树中的任何地方访问共享数据。

下面是一个使用 React Context 的示例代码：

// javascriptcn.com 代码示例
// 创建一个 Context
const MyContext = React.createContext();

// 创建一个 Provider
class MyProvider extends React.Component {
  state = {
    data: null
  };

  componentDidMount() {
    // 发起请求获取数据
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });
  }

  render() {
    return (
      <MyContext.Provider value={this.state.data}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

// 在组件中使用 Context
class MyComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {data => (
          <div>
            {data ? (
              <div>{data}</div>
            ) : (
              <div>Loading...</div>
            )}
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

在上面的代码中，我们创建了一个名为 MyContext 的 Context，并使用 React.createContext 方法来创建它。然后，我们创建了一个名为 MyProvider 的 Provider 组件，并在其中使用 setState 方法来获取数据。在 render 方法中，我们使用 MyContext.Provider 来提供共享数据，并使用 this.props.children 渲染子组件。

最后，我们创建了一个名为 MyComponent 的组件，并使用 MyContext.Consumer 来消费共享数据。在 Consumer 中，我们使用 data 属性来访问共享数据。

2. 使用 Redux

Redux 是一个非常流行的状态管理库，它提供了一种在 React 应用程序中共享数据的方式。Redux 的核心思想是将应用程序的状态存储在一个单一的存储库中，并使用纯函数来更新状态。

下面是一个使用 Redux 的示例代码：

// javascriptcn.com 代码示例
// 创建一个 store
const store = createStore(reducer);

// 创建一个 action
const fetchData = () => {
  return dispatch => {
    dispatch({ type: 'FETCH_DATA_START' });

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_DATA_ERROR', payload: error });
      });
  };
};

// 创建一个 reducer
const reducer = (state = { data: null, loading: false, error: null }, action) => {
  switch (action.type) {
    case 'FETCH_DATA_START':
      return { ...state, loading: true };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, data: action.payload, loading: false };
    case 'FETCH_DATA_ERROR':
      return { ...state, error: action.payload, loading: false };
    default:
      return state;
  }
};

// 在组件中使用数据
class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    return (
      <div>
        {this.props.loading ? (
          <div>Loading...</div>
        ) : (
          <div>{this.props.data}</div>
        )}
      </div>
    );
  }
}

// 将组件连接到 store
const mapStateToProps = state => {
  return {
    data: state.data,
    loading: state.loading,
    error: state.error
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchData: () => dispatch(fetchData())
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在上面的代码中，我们创建了一个名为 store 的 store，并使用 createStore 方法来创建它。然后，我们创建了一个名为 fetchData 的 action，并在其中使用 dispatch 方法来获取数据。在 reducer 中，我们使用一个纯函数来更新状态。

最后，我们创建了一个名为 MyComponent 的组件，并使用 connect 方法将其连接到 store。在 mapStateToProps 中，我们将 store 中的状态映射到组件的属性中，并在 mapDispatchToProps 中将 action 映射到组件的属性中。

3. 使用 React Query

React Query 是一个非常流行的数据获取库，它提供了一种在 React 应用程序中获取数据的方式。React Query 的核心思想是将数据获取和缓存逻辑从组件中分离出来，以提高应用程序的性能。

下面是一个使用 React Query 的示例代码：

// javascriptcn.com 代码示例
// 创建一个查询钩子
const useData = () => {
  return useQuery('data', () => {
    return fetch('https://api.example.com/data')
      .then(response => response.json());
  });
};

// 在组件中使用查询钩子
const MyComponent = () => {
  const { data, isLoading, error } = useData();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>{data}</div>;
};

在上面的代码中，我们创建了一个名为 useData 的查询钩子，并使用 useQuery 方法来创建它。在 useQuery 中，我们使用 fetch 方法来获取数据。

最后，我们创建了一个名为 MyComponent 的组件，并使用 useData 钩子来获取数据。在组件中，我们使用 isLoading 和 error 属性来处理加载和错误状态，使用 data 属性来显示数据。

总结

在本文中，我们讨论了一些在 React 中共享数据的方法，以及如何避免重复请求。我们介绍了 React Context、Redux 和 React Query，并提供了相应的示例代码。希望本文能够对你有所帮助，让你更好地理解如何在 React 应用程序中共享数据。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657ac7d2d2f5e1655d540a16