面试题：React中Context动态更新数据的基本步骤

Question

请阐述在React中动态更新Context数据的基本步骤，包括如何创建Context对象、如何在组件中使用Context以及如何触发数据更新。

Answer 1

创建Context对象

1. 导入createContext：

   import React, { createContext } from'react';
   

2. 创建Context实例：

   const MyContext = createContext();
   

这里MyContext就是创建好的Context对象，它有两个属性Provider和Consumer ，后续会用到。

在组件中使用Context

1. 使用Provider提供数据： 在需要共享数据的组件树的顶层使用Provider包裹。例如：

   import React from'react';
   import MyContext from './MyContext';
   
   const App = () => {
       const contextValue = { data: '初始数据' };
       return (
           <MyContext.Provider value={contextValue}>
               {/* 其他子组件 */}
           </MyContext.Provider>
       );
   };
   
   export default App;
   

value属性就是要共享的数据，任何嵌套在MyContext.Provider内的组件都可以访问这个数据。 2. 使用Consumer或useContext获取数据： - 使用Consumer（类组件或函数组件均可）： ```jsx import React from'react'; import MyContext from './MyContext';

  const ChildComponent = () => {
      return (
          <MyContext.Consumer>
              {contextValue => (
                  <div>{contextValue.data}</div>
              )}
          </MyContext.Consumer>
      );
  };

  export default ChildComponent;
  ```
  `Consumer`接受一个函数作为子元素，这个函数接收`Provider`提供的`value`值。
- **使用`useContext`（仅函数组件可用）**：
  ```jsx
  import React, { useContext } from'react';
  import MyContext from './MyContext';

  const ChildComponent = () => {
      const contextValue = useContext(MyContext);
      return (
          <div>{contextValue.data}</div>
      );
  };

  export default ChildComponent;
  ```
  `useContext`直接返回`Provider`提供的`value`值。

触发数据更新

1. 将更新函数传递到Context： 首先在Provider所在组件中定义更新函数，例如：

   import React, { useState } from'react';
   import MyContext from './MyContext';
   
   const App = () => {
       const [data, setData] = useState('初始数据');
       const updateData = newData => {
           setData(newData);
       };
       const contextValue = { data, updateData };
       return (
           <MyContext.Provider value={contextValue}>
               {/* 其他子组件 */}
           </MyContext.Provider>
       );
   };
   
   export default App;
   

这里将updateData函数和data一起放入contextValue。 2. 在子组件中调用更新函数： - 使用Consumer： ```jsx import React from'react'; import MyContext from './MyContext';

  const ChildComponent = () => {
      return (
          <MyContext.Consumer>
              {contextValue => (
                  <div>
                      <p>{contextValue.data}</p>
                      <button onClick={() => contextValue.updateData('新数据')}>更新数据</button>
                  </div>
              )}
          </MyContext.Consumer>
      );
  };

  export default ChildComponent;
  ```
- **使用`useContext`**：
  ```jsx
  import React, { useContext } from'react';
  import MyContext from './MyContext';

  const ChildComponent = () => {
      const contextValue = useContext(MyContext);
      return (
          <div>
              <p>{contextValue.data}</p>
              <button onClick={() => contextValue.updateData('新数据')}>更新数据</button>
          </div>
      );
  };

  export default ChildComponent;
  ```

这样在子组件中通过调用updateData函数就可以动态更新Context中的数据。