当前位置：首页 > news >正文

react context如何使用

news 2025/9/12 7:23:54

1. 创建Context

首先，你需要创建一个Context对象。这可以通过React.createContext方法完成。

// src/MyContext.js
import React from 'react';const MyContext = React.createContext();export default MyContext;

2. 提供Context值

使用Context.Provider组件来提供上下文值。你可以将Context.Provider包裹在需要访问上下文的组件树的顶部，并通过value属性传递需要共享的数据。

// src/App.js
import React from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';function App() {const sharedData = {name: 'Kimi',age: 25};return (<MyContext.Provider value={sharedData}><ChildComponent /></MyContext.Provider>);
}export default App;

3. 使用`useContext` Hook

在需要访问上下文的组件中，使用useContext Hook来获取上下文值。

// src/ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';function ChildComponent() {const { name, age } = useContext(MyContext);return (<div><p>Name: {name}</p><p>Age: {age}</p></div>);
}export default ChildComponent;

4. 使用`useContext`和`useState`结合

你也可以结合useState来更新上下文值。例如，你可以在Context.Provider中使用useState来管理状态，并通过value属性传递状态和更新状态的函数。

// src/App.js
import React, { useState } from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';function App() {const [sharedData, setSharedData] = useState({name: 'Kimi',age: 25});return (<MyContext.Provider value={{ sharedData, setSharedData }}><ChildComponent /></MyContext.Provider>);
}export default App;

5. 在子组件中更新上下文值

在子组件中，你可以使用setSharedData来更新上下文值。

// src/ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';function ChildComponent() {const { sharedData, setSharedData } = useContext(MyContext);const handleUpdate = () => {setSharedData({...sharedData,age: sharedData.age + 1});};return (<div><p>Name: {sharedData.name}</p><p>Age: {sharedData.age}</p><button onClick={handleUpdate}>Increment Age</button></div>);
}export default ChildComponent;

6. 使用`useReducer`和`Context`

如果你需要更复杂的状态管理逻辑，可以结合useReducer和Context。例如：

// src/MyContext.js
import React, { useReducer } from 'react';const initialState = {name: 'Kimi',age: 25
};const reducer = (state, action) => {switch (action.type) {case 'INCREMENT_AGE':return { ...state, age: state.age + 1 };default:return state;}
};const MyContext = React.createContext();export const MyContextProvider = ({ children }) => {const [state, dispatch] = useReducer(reducer, initialState);return (<MyContext.Provider value={{ state, dispatch }}>{children}</MyContext.Provider>);
};export default MyContext;

7. 在子组件中使用`useReducer`和`Context`

在子组件中，你可以使用dispatch来更新状态。

// src/ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';function ChildComponent() {const { state, dispatch } = useContext(MyContext);const handleIncrement = () => {dispatch({ type: 'INCREMENT_AGE' });};return (<div><p>Name: {state.name}</p><p>Age: {state.age}</p><button onClick={handleIncrement}>Increment Age</button></div>);
}export default ChildComponent;

8. 提供Context

确保在顶层组件中使用MyContextProvider来提供上下文。

// src/App.js
import React from 'react';
import MyContextProvider from './MyContext';
import ChildComponent from './ChildComponent';function App() {return (<MyContextProvider><ChildComponent /></MyContextProvider>);
}export default App;