react Contex

React Context是React提供的一种跨组件传递数据的方式，它可以避免在组件树中层层传递props的麻烦。Context提供了一个全局的数据存储容器，可以在组件树中任意节点访问和更新这个数据，而不必通过props一层层传递。

使用Context，需要先创建一个Context对象，可以使用React.createContext方法创建。然后，在需要使用这个数据的组件中，可以使用Context.Provider组件将数据传递给子组件。子组件中使用Context.Consumer组件来获取数据。

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

import React, { createContext, useState } from 'react';

// 创建一个Context对象
const CountContext = createContext();

function App() {
  const [count, setCount] = useState(0);

  return (
    // 使用Context.Provider传递数据
    <CountContext.Provider value={{ count, setCount }}>
      <div>
        <p>Count: {count}</p>
        <Counter />
      </div>
    </CountContext.Provider>
  );
}

function Counter() {
  return (
    // 使用Context.Consumer获取数据
    <CountContext.Consumer>
      {({ count, setCount }) => (
        <div>
          <button onClick={() => setCount(count + 1)}>+1</button>
          <button onClick={() => setCount(count - 1)}>-1</button>
        </div>
      )}
    </CountContext.Consumer>
  );
}

export default App;

在上面的例子中，我们创建了一个CountContext对象，并使用Context.Provider将count和setCount两个数据传递给子组件。在Counter组件中，我们使用Context.Consumer获取这个数据，并使用它来更新count。这样，即使组件树中的其他组件没有直接引用这个数据，也可以通过Context来实现跨组件传递。