react context 使用分析
时间: 2023-04-17 12:00:49 浏览: 84
React Context 是 React 提供的一种跨组件传递数据的方式,它可以让我们在不必通过 props 层层传递的情况下,让组件树中的任何一个组件都能够访问到共享的数据。
React Context 的使用分为两个步骤:
1. 创建 Context 对象
使用 React.createContext() 方法创建一个 Context 对象,该方法接受一个参数,即 Context 对象的默认值。
2. 在组件中使用 Context
使用 Context.Provider 组件将需要共享数据的组件包裹起来,并将共享的数据通过 value 属性传递给 Provider 组件。然后在需要访问共享数据的组件中,使用 Context.Consumer 组件来获取共享的数据。
需要注意的是,Context 只能在组件树中从上往下传递,不能跨越组件树传递。同时,Context 也不适合用于频繁更新的数据,因为每次更新 Context 的值都会导致所有使用该 Context 的组件重新渲染。
相关问题
React context reducer结合使用
React Context 结合 Reducer 可以实现状态管理和状态更新的功能。Reducer 是一个纯函数,接收当前的状态和一个 action,返回一个新的状态。通过 Context 和 Reducer 的结合使用,可以将状态和状态更新逻辑分离到不同的文件中,使得组件的代码更加简洁和清晰。
下面是一个示例代码:
```jsx
// 创建一个 context 对象
const MyContext = React.createContext();
// 定义 reducer 函数
function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
throw new Error();
}
}
// 父组件
function ParentComponent() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
// 将 reducer 的 dispatch 函数作为属性传递给子组件
return (
<MyContext.Provider value={{ state, dispatch }}>
<ChildComponent />
</MyContext.Provider>
);
}
// 子组件
function ChildComponent() {
// 使用 useContext 钩子获取父组件提供的 context 对象
const { state, dispatch } = useContext(MyContext);
return (
<div>
<p>当前的计数:{state.count}</p>
<button onClick={() => dispatch({ type: "increment" })}>增加</button>
<button onClick={() => dispatch({ type: "decrement" })}>减少</button>
</div>
);
}
```
在上面的代码中,父组件中使用 `useReducer` 钩子创建了一个状态以及一个 dispatch 函数。将状态和 dispatch 函数通过 Context 提供给子组件。在子组件中,通过 `useContext` 钩子获取父组件提供的 state 和 dispatch 对象。当用户点击子组件中的增加或减少按钮时,会调用 dispatch 函数并传入对应的 action 对象,从而触发状态更新,更新后的状态会自动传递给所有使用了该 Context 的组件,实现了状态的管理和更新。
react hook使用context
在React中,使用上下文(context)可以方便地在组件之间共享数据。通过使用React的Hooks中的useContext钩子,我们可以更简单地使用上下文。
首先,我们需要创建一个上下文对象,可以使用React的createContext函数来创建。这个上下文对象可以包含我们想要共享的任何类型的数据。
然后,在函数组件中使用useContext钩子来读取上下文的值。使用useContext时,我们需要将上下文对象作为参数传递给它,它将返回上下文的当前值。
需要注意的是,尽管可以使用useContext读取上下文的值,但我们仍然需要在上层组件树中使用<MyContext.Provider>来为下层组件提供上下文。这个<MyContext.Provider>组件接收一个value属性,用于传递上下文的值给子组件。
下面是一个使用原始写法和使用context hook写法的例子:
原始写法:
```
import React from 'react';
// 创建一个上下文,初始化值
const MyContext = React.createContext({name: 'twinkle', age: 18});
// 文本组件
function TextComp() {
return (
<>
<MyContext.Consumer>
{value => (
<>
<p>名字:{value.name}</p>
<p>年龄:{value.age}</p>
</>
)}
</MyContext.Consumer>
</>
);
}
// 测试组件
export default function TestContextComp() {
return (
<div>
<MyContext.Provider value={{name: 'cll', age: 18}}>
<TextComp/>
</MyContext.Provider>
</div>
);
}
```
使用context hook写法:
```
import React, { useContext } from 'react';
// 上下文数据的结构
interface ICtxP {
name: string;
age: number;
}
// 创建一个上下文
const MyContext = React.createContext<ICtxP>({ name: 'twinkle', age: 18 });
// 文本组件
function TextComp() {
const value = useContext(MyContext); // 使用上下文hook
return (
<>
<p>名字: {value.name}</p>
<p>年龄: {value.age}</p>
</>
);
}
export default function TextContextHook() {
return (
<div>
<MyContext.Provider value={{ name: 'cll', age: 18 }}>
<TextComp/>
</MyContext.Provider>
</div>
);
}
```
无论是原始写法还是使用context hook写法,它们都可以实现在React中使用上下文来共享数据。使用context hook写法可以减少代码量并简化组件的结构,使其更加简洁和易于理解。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [react 进阶hook 之 context Hook](https://blog.csdn.net/qq_41499782/article/details/115493691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]