useContext为何存在？

useContext为何存在？

在 React 中，数据流动是自顶向下的，也就是从父组件向子组件传递数据。这意味着父组件可以通过 props 将数据传递给子组件，但子组件不能直接修改父组件的数据。这种单向数据流使得数据流动的路径清晰明了，易于理解和调试。它也减少了数据的不一致性和难以追踪的 bug。

然而在组件层次结构非常深，并且需要在许多组件之间共享相同的数据时，通过逐层传递 props 变得繁琐和冗长。因此 React 提供了 Context API，以更便捷的方式共享数据。

在 React 16.3 版本之前，还没有 useContext,那时 React 的 Context API 基于类组件进行使用，不支持 Hooks。不止需要创建 Context 对象，还需要使用 Context.Provider 组件将共享的数据包装起来，再通过 value 属性传递数据。并通过在子组件中使用 Context.Consumer 组件来获取共享数据。而且还有层级嵌套、增加代码、性能等问题。

下面是一个使用旧版 Context API 的示例：

// 创建一个 Context 对象
const MyContext = React.createContext();

// 在父组件中使用 Context.Provider 包装共享数据
class ParentComponent extends React.Component {
  render() {
    return (
      <MyContext.Provider value="Hello, World!">
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

// 在子组件中使用 Context.Consumer 获取共享数据
class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(sharedData) => <div>{sharedData}</div>}
      </MyContext.Consumer>
    );
  }
}

这种方式需要在每个使用共享数据的子组件中编写额外的 Context.Consumer 组件，使得代码变得冗长和难以维护。

为了解决这个问题，React 16.8 版本引入了 Hooks，并提供了 useContext 钩子函数作为新的 Context API 的一部分。使用 useContext 钩子函数，可以更简洁地访问共享数据，无需编写额外的组件。

下面是使用新版 Context API 和 useContext 钩子函数的示例：

// 创建上下文对象
const MyContext = React.createContext();

// 在某个组件中包装共享数据
function ParentComponent() {
  return (
    <MyContext.Provider value="Hello, World!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 在需要访问共享数据的组件中使用 useContext
function ChildComponent() {
  const sharedData = React.useContext(MyContext);
  return <div>{sharedData}</div>;
}

通过使用 useContext 钩子函数，可以更直接地从上下文中获取共享数据，使代码变得更加简洁和易于理解。

总而言之，Context API 是 React 提供的一种机制，用于在组件之间共享数据。旧版的 Context API 基于类组件，而新版的 Context API 结合了 Hooks，提供了 useContext 钩子函数，使共享数据的访问更加简便和直接。