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

网站导航栏高度百度推广客户端手机版

news 2025/8/18 1:01:21

网站导航栏高度,百度推广客户端手机版,计算机语言python,福建漳州网站建设费用一、什么是useContext 在Hooks出来之前，开发者都是使用的class组件，通过props传值。现在使用方法组件（Function）开发了，没有constructor构造函数也就没有了props的接收，所以父子组件的传值就成了一个问题。…

一、什么是useContext

在Hooks出来之前，开发者都是使用的class组件，通过props传值。现在使用方法组件（Function）开发了，没有constructor构造函数也就没有了props的接收，所以父子组件的传值就成了一个问题。
React Hooks就为我们准备了useContext来解决这个问题。

二、useContext的作用

1.useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享。

这里要注意的是，很多同学觉得可以使用useContext结合useReducer来替代redux，其实两者的作用是不同的。
useContext：解决组件间传值的问题。
redux：统一管理应用状态。
所以，我们可以使用useContext结合useReducer来模拟一个小型redux场景，而无法替代redux

2.Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。

三、代码示例

1、新建example.tsx

import React, { useState, createContext, useContext } from "react";const Example = () => {const [count, setCount] = useState<number>(0);return (<div><p>父组件点击数量：{count}</p><button onClick={() => setCount(count + 1)}>{"点击+1"}</button></div>);
};export default Example;

效果图

2、在example.tsx创建Context

const CountContext = createContext(0);

3、在example.tsx创建子组件Counter，通过useContext把刚刚创建好的CountContext作为参数传进去，并读取count值

const Counter = () => {const count = useContext(CountContext);return <p>子组件获得的点击数量：{count}</p>;
};

4、使用CountContext.Provider包裹需要接收参数的子组件，并通过value传值

<CountContext.Provider value={count}><Counter />
</CountContext.Provider>

5、最终示例代码：

import React, { useState, createContext, useContext } from "react";
const CountContext = createContext(0);const Example = () => {const [count, setCount] = useState<number>(0);return (<div><p>父组件点击数量：{count}</p><button onClick={() => setCount(count + 1)}>{"点击+1"}</button><CountContext.Provider value={count}><Counter /></CountContext.Provider></div>);
};const Counter = () => {const count = useContext(CountContext);return <p>子组件获得的点击数量：{count}</p>;
};export default Example;