用useContext传递数据，摆脱组件间的层层传递！

在React中，组件之间的数据传递通常通过props来实现。当组件需要使用其他组件的数据时，它可以通过props将这些数据传递给子组件。但是，这种逐级传递props的方式在组件结构复杂时可能会变得非常繁琐。

useContext可以帮助您摆脱组件间的层层传递。它允许您在组件树中任何地方访问和修改共享状态。共享状态由一个Context对象来维护，Context对象可以被任何组件使用。

要使用useContext，您首先需要创建一个Context对象。您可以使用React.createContext()函数来创建Context对象。然后，您需要将Context对象传递给要使用它的组件。您可以使用useContext()函数来获取Context对象。

一旦您获得了Context对象，您就可以使用它来访问和修改共享状态。您可以使用Context对象的value属性来访问共享状态。您可以使用Context对象的setValue()方法来修改共享状态。

useContext与props有何不同？

• useContext可以跨组件层级传递数据，而props只能在组件之间传递数据。
• useContext可以通过一个Context对象来访问和修改共享状态，而props只能通过逐级传递的方式来访问和修改数据。
• useContext可以使组件结构更清晰，而props可能会使组件结构变得复杂。

什么时候使用useContext？

• 当您需要在组件树中跨组件层级传递数据时。
• 当您需要访问和修改共享状态时。
• 当您想使组件结构更清晰时。

useContext的使用示例

以下是一个使用useContext的示例：

import React, { createContext, useContext } from "react";

const MyContext = createContext();

const Provider = (props) => {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      {props.children}
    </MyContext.Provider>
  );
};

const Component1 = () => {
  const { count } = useContext(MyContext);

  return <h1>{count}</h1>;
};

const Component2 = () => {
  const { setCount } = useContext(MyContext);

  return (
    <button onClick={() => setCount((prevCount) => prevCount + 1)}>
      Increment
    </button>
  );
};

const App = () => {
  return (
    <Provider>
      <Component1 />
      <Component2 />
    </Provider>
  );
};

export default App;

在这个示例中，我们创建了一个名为MyContext的Context对象。然后，我们使用MyContext.Provider组件来提供共享状态。共享状态由count和setCount属性组成。Component1组件使用useContext()函数来获取共享状态。Component2组件使用useContext()函数来获取setCount方法。

当用户点击Component2组件中的按钮时，setCount方法会被调用，count属性的值会增加1。Component1组件会自动重新渲染，因为count属性的值已经改变了。

useContext是一个非常强大的工具，它可以帮助您在组件之间传递数据，而无需逐级传递props。这可以使您的组件结构更清晰，并减少代码量。