做企业网站价格,google谷歌,wordpress逻辑,搜索1. 什么是useContext React官方解释#xff1a;useContext 是一个 React Hook#xff0c;可以让你读取和订阅组件中的 context#xff08;React官方文档地址#xff09;。 通俗的讲#xff0c;useContext的作用就是#xff1a;实现组件间的状态共享#xff0c;主要应用场…1. 什么是useContext React官方解释useContext 是一个 React Hook可以让你读取和订阅组件中的 contextReact官方文档地址。 通俗的讲useContext的作用就是实现组件间的状态共享主要应用场景是跨组件状态共享。 2. useContext语法及使用方法
useContext语法 const value useContext(someContext) someContext上下文对象使用其Provider属性可以给后代组件传递状态信息。 使用方法和步骤 第一步创建上下文对象用来存储需要共享的状态和方法
// 在项目目录中创建一个ThemeContext.js
import React from react;
const ThemeContext React.createContext();
export default ThemeContext;第二步让祖先组件具备自己的状态和方法同时把这些信息存储到上下文对象中。 基于上下文对象中提供的Provider组件向上下文中存储信息: value 属性指定的值就是要存储的信息(是一个对象)。
// 祖先组件
import { useState } from react;
import Son from ./Son;
import ThemeContext from ../ThemeContext;const Father () {const [num, setNum] useState(0);const change () {setNum(num 1);}return ThemeContext.Providervalue{{num,change}}Son ///ThemeContext.Provider
}export default Father;// 子组件
import GrandSon from ./GrandSonconst Son () {return GrandSon //
}export default Son;// 孙组件
const GrandSon () {return /
}export default GrandSon;第三步在后代组件中使用useContext Hook函数useContext(ThemeContext)获取上下文中存储的信息
// 孙组件
import { useContext, useEffect } from react;
import ThemeContext from ../ThemeContext;const GrandSon () {const context useContext(ThemeContext);useEffect(() {console.log(我是孙组件, context)}, [])return /
}export default GrandSon;孙组件(后代组件)获取的context信息如下 这样就实现了跨组件通信啦
