Context API 实战演练：在 React 中轻松共享数据

2023-11-01 22:07:01

在 React 中，数据共享是一个常见的问题。当多个组件需要访问相同的数据时，传统的做法是通过 props 从父组件向子组件传递数据。然而，当组件嵌套较深时，这种方法会变得非常繁琐和难以维护。

Context API 提供了一种更优雅的方式来共享数据。它允许你在组件树的任何位置访问数据，而无需通过 props 层层传递。这使得你的代码更加简洁和易于维护。

使用 Context API 的步骤非常简单：

创建一个 context 对象。
将 context 对象传递给组件树。
在组件中使用 context 对象访问数据。

要创建 context 对象，可以使用 createContext() 函数。该函数接受一个默认值作为参数，该默认值将在组件第一次使用 context 对象时使用。

import React, { createContext } from 'react';

const ThemeContext = createContext('light');

要将 context 对象传递给组件树，可以使用 Provider 组件。Provider 组件接受一个 value 属性，该属性的值就是你想要共享的数据。

import React from 'react';
import ThemeContext from './ThemeContext';

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
};

要在组件中使用 context 对象，可以使用 useContext() 钩子。useContext() 钩子接受一个 context 对象作为参数，并返回该 context 对象的当前值。

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

const Child = () => {
  const theme = useContext(ThemeContext);

  return (
    <div className={theme}>
      Hello, world!
    </div>
  );
};

Context API 与其他数据共享方法的主要区别在于，它是一种全局共享机制。这意味着，组件树中的任何组件都可以访问 context 对象中的数据，而无需通过 props 层层传递。

其他数据共享方法，例如 props 和 state，都是局部共享机制。这意味着，数据只能在组件及其子组件之间共享。

Context API 可以与 React-Router 结合使用，以实现跨组件共享路由信息。

要做到这一点，可以使用 withRouter 高阶组件。withRouter 高阶组件接受一个组件作为参数，并返回一个新的组件，该组件具有路由信息。

import React from 'react';
import { withRouter } from 'react-router-dom';

const Child = (props) => {
  const { match, location, history } = props;

  return (
    <div>
      <h2>{match.url}</h2>
      <p>{location.pathname}</p>
      <button onClick={() => history.push('/about')}>Go to About</button>
    </div>
  );
};

export default withRouter(Child);