React前端面试每日一试 6.什么是React的Context API？如何使用它？

news/2024/10/11 1:15:12/

React的Context API是一种用于共享组件树中全局数据的方法，而无需通过props逐层传递。它对于需要在应用中许多不同层次上访问数据的情况非常有用，例如当前的主题、用户信息或首选语言。

Context API的核心概念

1.创建Context：使用React.createContext创建一个Context对象。
2.提供Context：使用Context Provider组件来使Context的值在组件树中可用
3.消费Context：使用Context Consumer组件或useContext钩子来访问Context的值

创建Context

首先，需要创建一个Context对象。这个对象包含Provider和Consumer两个组件：

import React from 'react';const MyContext = React.createContext(defaultValue);

提供Context

Context Provider组件使Context的值在其子树中可用。所有在Provider内部的组件都可以访问到这个值：

import React, { useState } from 'react';
import MyContext from './MyContext';function App() {const [value, setValue] = useState('Hello, World!');return (<MyContext.Provider value={value}><MyComponent /></MyContext.Provider>);
}export default App;

消费Context

1.使用Context Consumer
Context Consumer组件可以访问Context的值。它要求使用一个函数作为子组件，该函数接收当前的Context值并返回一个React节点：

import React from 'react';
import MyContext from './MyContext';function MyComponent() {return (<MyContext.Consumer>{value => <div>{value}</div>}</MyContext.Consumer>);
}export default MyComponent;

2.使用useContext钩子
在函数组件中，可以使用useContext钩子来访问Context的值：

import React, { useContext } from 'react';
import MyContext from './MyContext';function MyComponent() {const value = useContext(MyContext);return <div>{value}</div>;
}export default MyComponent;

完整示例

下面是一个完整示例，展示了如何创建、提供和消费Context：

import React, { useState, createContext, useContext } from 'react';// 创建Context
const MyContext = createContext();// 提供Context
function App() {const [value, setValue] = useState('Hello, Context!');return (<MyContext.Provider value={value}><MyComponent /><button onClick={() => setValue('New Value!')}>Change Value</button></MyContext.Provider>);
}// 消费Context
function MyComponent() {const value = useContext(MyContext);return <div>{value}</div>;
}export default App;