React Context 的使用详解

React Context 的使用详解

在 React 中，Context 提供了一种在组件之间共享数据的方法，而不必通过逐层传递 props 的方式。本文将介绍如何使用 React Context，并结合代码示例详细说明其使用方法。

1. 创建 Context

首先，我们使用 React.createContext() 方法创建一个 Context。这个 Context 将允许我们在树中的任何地方读取和使用这个值。

import React from 'react';

const MyContext = React.createContext();

2. 提供 Context 值

接下来，我们通过 Provider 组件提供 Context 的值。这个值可以是任何 JavaScript 数据类型，比如对象、数组、字符串等。

export default class A extends Component {
  state = {
    name: 'Judith',
    age: 19,
  }

  render() {
    const { name, age } = this.state;

    return (
      <MyContext.Provider value={{ name, age }}>
        <B />
      </MyContext.Provider>
    )
  }
}

3. 使用 Context

在需要使用 Context 的组件中，我们可以通过 Consumer 组件或 useContext Hook 来读取 Context 的值。

使用 Consumer 组件

class C extends Component {
  static contextType = MyContext

  render() {
    const { name, age } = this.context;
    return (
      <div>
        我是C组件，名称是: {name}, 年龄是: {age}
      </div>
    )
  }
}

// 或者
function D() {
  return (
    <div className={styles.grand}>
      <MyContext.Consumer>
        {
          data => {
            return (
              <div>
                我是D组件，名称是: {data.name}, 年龄是: {data.age}
              </div>
            )
          }
        }
      </MyContext.Consumer>
    </div>
  );
}

使用 useContext Hook

import React, { useContext } from 'react';

function D() {
  const data = useContext(MyContext);

  return (
    <div>
      我是D组件，名称是: {data.name}, 年龄是: {data.age}
    </div>
  );
}

通过以上方式，我们可以在 React 应用中轻松实现组件间的数据共享，提高代码的可维护性和可读性。 Context 的灵活性和便利性使得我们能够更加高效地管理组件之间的状态和数据传递。

参考

• React Context 的使用详解
• 完整代码