如何使用React createContext创建上下文

一、什么是上下文

在React中，上下文（Context）是一种能够让数据在组件树中传递的方法，它可以避免在组件树中显式地传递 props，从而简化了数据的传递过程。通过上下文，我们可以在组件树中很方便地共享数据，这些数据可以是全局的，也可以是当前组件需要的。

二、Context的使用方法

React中的Context是通过两个组件来实现的：Provider和Consumer。Provider组件是数据提供者，Consumer组件则是数据消费者。在组件树中，Provider组件提供数据，而Consumer组件则消费数据。我们可以在同一个 Provider 中嵌套多个 Consumer，这样就可以实现数据在组件树中的传递。

下面是一个简单的例子，展示如何使用Context实现跨组件的数据传递。

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

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

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

       setCount(count + 1)}>Increment
      {/*提供数据*/}
        
     
      
    
    
   
  );
}

function DisplayCount() {
  return (
    
   {/*消费数据*/}
      {count => 
    
Count: {count}
}
    
   
  );
}`}

上面的代码演示了如何在父组件 Counter 中提供数据，并通过 Consumer 组件在子组件 DisplayCount 中消费数据。通过 createContext 函数创建了一个 Context 对象 CountContext，它的默认值为0。在 Counter 组件中，我们使用了 CountContext.Provider 组件来提供数据，将 count 变量传递给它的 value 属性。

在 DisplayCount 组件中，我们使用 CountContext.Consumer 组件来消费数据。它的 children 属性值是一个函数，这个函数接收一个参数 count，代表提供者提供的数据，然后将它显示在界面上。

三、使用多个上下文

在一个复杂的应用中，我们可能需要传递多个上下文，这时候可以通过嵌套上下文来实现。下面是一个例子，展示如何使用多个上下文。

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

const ThemeContext = createContext('light');
const UserContext = createContext({
  name: 'Guest',
  age: 0,
});

function App() {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState({name: 'Tom', age: 18});
  return (
    
   
      
    
        
     
      
    
    
   
  );
}

function Toolbar() {
  return (
    
   

      
      
    
   
  );
}

function ThemedButton() {
  return (
    
   
      {theme => 
    Click Me}
    
   
  );
}

function User() {
  return (
    
   
      {user => (
        
    

          
     
Name: {user.name}
          
     
Age: {user.age}
        
    
      )}
    
   
  );
}`}

上面的代码演示了如何在同一个组件中使用多个上下文。在 App 组件中，我们提供了两个上下文，ThemeContext 和 UserContext。在 Toolbar 组件中，我们分别使用了这两个上下文，在 ThemedButton 和 User 组件中消费了它们提供的数据。

四、总结

通过上面的例子，我们学习了如何使用 React 的 createContext 函数来创建上下文，并在组件树中传递数据。通过上下文，我们可以更方便地共享数据，避免了 props 的繁琐传递过程。