面试题：React中useContext钩子在状态管理中的基本应用

Question

请简述在React中如何使用useContext钩子进行状态管理，并举例说明一个简单场景下（如父子组件传递用户登录状态）如何实现。需包含创建Context、使用Provider提供数据以及在组件中通过useContext消费数据的步骤。

Answer 1

1. 创建Context： 在React中，使用createContext函数来创建一个Context对象。这个对象包含了Provider和Consumer两个属性。

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

2. 使用Provider提供数据： 在需要共享状态的父组件中，使用UserContext.Provider来包裹需要传递数据的子树，并通过value属性传递数据。

   import React from'react';
   import UserContext from './UserContext';
   
   const App = () => {
     const isLoggedIn = true;
     return (
       <UserContext.Provider value={isLoggedIn}>
         {/* 其他子组件 */}
       </UserContext.Provider>
     );
   };
   
   export default App;
   

3. 在组件中通过useContext消费数据： 在子组件中，使用useContext钩子来获取Provider传递的数据。

   import React, { useContext } from'react';
   import UserContext from './UserContext';
   
   const ChildComponent = () => {
     const isLoggedIn = useContext(UserContext);
     return (
       <div>
         {isLoggedIn? '用户已登录' : '用户未登录'}
       </div>
     );
   };
   
   export default ChildComponent;
   

在上述例子中，App组件通过UserContext.Provider将isLoggedIn（用户登录状态）传递下去，ChildComponent组件使用useContext获取该状态并进行展示，实现了父子组件间用户登录状态的传递。