面试题：React中Context在全局状态管理里的基本使用

Question

请阐述在React中如何通过Context进行简单的全局状态管理，例如实现一个全局的主题切换功能，需要写出关键的代码步骤，包括创建Context、提供数据以及消费数据。

Answer 1

1. 创建Context：
   • 在React中，使用createContext函数创建一个Context对象。例如，创建一个用于主题切换的ThemeContext：

   import React from'react';
   const ThemeContext = React.createContext();
   export default ThemeContext;
   

2. 提供数据：
   • 通常在应用的较高层级组件中，使用ThemeContext.Provider来提供主题数据。假设主题有light和dark两种模式。

   import React, { useState } from'react';
   import ThemeContext from './ThemeContext';
   
   const App = () => {
     const [theme, setTheme] = useState('light');
     const toggleTheme = () => {
       setTheme(theme === 'light'? 'dark' : 'light');
     };
     return (
       <ThemeContext.Provider value={{ theme, toggleTheme }}>
         {/* 应用的其他组件 */}
       </ThemeContext.Provider>
     );
   };
   
   export default App;
   

3. 消费数据：
   • 方式一：使用ThemeContext.Consumer

     import React from'react';
     import ThemeContext from './ThemeContext';
     
     const SomeComponent = () => {
       return (
         <ThemeContext.Consumer>
           {({ theme, toggleTheme }) => (
             <div>
               <p>当前主题: {theme}</p>
               <button onClick={toggleTheme}>切换主题</button>
             </div>
           )}
         </ThemeContext.Consumer>
       );
     };
     
     export default SomeComponent;
     

   • 方式二：使用useContext Hook（适用于函数式组件）

     import React, { useContext } from'react';
     import ThemeContext from './ThemeContext';
     
     const SomeComponent = () => {
       const { theme, toggleTheme } = useContext(ThemeContext);
       return (
         <div>
           <p>当前主题: {theme}</p>
           <button onClick={toggleTheme}>切换主题</button>
         </div>
       );
     };
     
     export default SomeComponent;