React基础第二十一章（Context深层数据传递）

在React中，我们经常需要在组件树中传递数据。传统的做法是通过props逐层传递，但当组件层次较深或多个组件需要相同数据时，这种方法变得繁琐且难以维护。React的Context API为这一问题提供了优雅的解决方案。

理解Context API的使用

Context API提供了一种方式，可以让我们在组件树中直接传递数据，而不需要手动在每个层级传递props。这样，我们可以在顶层组件（或任何其他组件）定义我们的数据，并且让需要这些数据的组件直接访问它，而不管它们在组件树中的位置。

示例：

jsx 复制代码

// 1. 创建Context
const LevelContext = React.createContext();

// 2. 在需要数据的组件内使用Context
function Heading() {
  const level = useContext(LevelContext);
  return <h1>{`标题等级：${level}`}</h1>;
}

// 3. 在提供数据的组件中使用Provider
function Section({ children }) {
  return (
    <LevelContext.Provider value={2}>
      {children}
    </LevelContext.Provider>
  );
}

在示例代码中我们通过调用React.createContext()创建了一个新的Context对象。这个对象可以被认为是一个"容器"，它可以保存我们想要跨组件树共享的数据。

在Heading组件中，我们通过useContext Hook来访问LevelContext中的数据。useContext是一个React Hook，它允许我们订阅Context对象的变化。当LevelContext的值发生变化时，使用了useContext(LevelContext)的Heading组件会重新渲染，并获取最新的level值。

在Section组件中，我们使用LevelContext.Provider组件来包裹它的子组件。Provider组件允许我们指定Context对象的当前值，通过value属性传递。在这个例子中，我们传递的值是2。任何包裹在<LevelContext.Provider>内部的组件，如果使用了useContext(LevelContext)，都能够访问到这个值。

注意事项：

我们需要确保在使用Context值的组件外层有对应的Provider。如果没有Provider，那么Context的默认值（在创建Context时可以指定）会被使用。如果也没有默认值，那么使用Context的组件将无法获取任何值。

Context API的高级用法

Context API的高级用法涉及到在应用中动态地改变Context的值，并且让这些变化能够被组件树中的消费者组件所感知。这通常是通过将Context的值与组件的state或props绑定来实现的。

技巧：

利用state或props来动态改变Context值。

示例：

jsx 复制代码

function App() {
  const [level, setLevel] = useState(1);

  return (
    <LevelContext.Provider value={level}>
      <button onClick={() => setLevel(prevLevel => prevLevel + 1)}>
        提升等级
      </button>
      <Section />
    </LevelContext.Provider>
  );
}

在这个例子中，App组件使用了useState Hook来创建一个名为level的state变量，初始值为1。setLevel是一个更新这个level值的函数。我们将level作为LevelContext.Provider的value属性传递，这样LevelContext的消费者就可以访问到这个值。

当点击"提升等级"按钮时，会调用setLevel函数来更新level的值。setLevel函数接受一个函数作为参数，这个函数的参数prevLevel表示当前的level值，然后我们返回prevLevel + 1来更新level的值。

LevelContext.Provider组件包裹了App组件的子组件，并通过value属性提供了level的当前值。这样，所有包裹在LevelContext.Provider内的组件都可以通过useContext(LevelContext)来访问level的值。

注意事项：

当我们更新Context的值时，所有使用了这个Context的组件都会重新渲染。这是因为Context值的变化会触发消费者组件的更新。

记住，合理使用Context可以大大简化你的组件结构和数据传递逻辑。

React基础 第二十一章（Context深层数据传递）

理解Context API的使用

Context API的高级用法

React基础第二十一章（Context深层数据传递）