react context用法

React Context是一种在React应用程序中传递数据的方法，它可以避免通过props一级一级向下传递数据的繁琐过程。在使用React Context时，我们需要创建一个Context对象，并将数据传递给该Context对象。然后，我们可以在需要使用该数据的组件中使用该Context对象，从而避免了props传递数据的复杂过程。

下面是一个简单的React Context使用示例：

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

// 在父组件中提供数据
function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={count}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 在子组件中使用数据
function ChildComponent() {
  const count = useContext(MyContext);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

在上面的示例中，我们创建了一个名为MyContext的Context对象，并在父组件中使用MyContext.Provider将count状态提供给子组件。在子组件中，我们使用useContext hook来获取该数据，并将其显示在页面上。

需要注意的是，当使用React Context时，我们需要确保数据传递的正确性和性能，避免数据意外变更、重复渲染等问题。