（一）需要
最近在学习React，学到了React Hook 做了 useContext Demo。
（二）介绍
应用useContext是为了不便爷孙组件间传值。
//爷爷组件 /* * @Author: ArdenZhao * @Date: 2022-04-16 09:48:50 * @LastEditTime: 2022-04-16 15:14:57 * @FilePath: /react-ts/src/components/react/9-ContextProvider.js * @Description: file information */import React, { useState, createContext } from 'react';export const context = createContext({});export function ContextProvider({ children }) { const [age, setAge] = useState(18); const constVal = { age, setAge, addAge: () => setAge(age + 1), } return <context.Provider value={constVal}>{children}</context.Provider>};//孙子组件 /* * @Author: ArdenZhao * @Date: 2022-04-16 09:30:20 * @LastEditTime: 2022-04-16 15:05:44 * @FilePath: /react-ts/src/components/react/9-Hook-useContext.js * @Description: 爷孙组件传值 */import { useContext } from 'react';import { Button } from 'antd';import "antd/dist/antd.css";import { context, ContextProvider } from './9-ContextProvider';function HookUseContext(props) { const { age, addAge } = useContext(context); const clickX = () => { addAge(age); } return ( <div> <h1>Learn, {props.name}</h1> <p> 实现计数器办法:{age} </p> <Button onClick={clickX}> useState Click +1 </Button> </div> );}// eslint-disable-next-line import/no-anonymous-default-exportexport default () => { return ( <ContextProvider> <HookUseContext name="useContext" /> </ContextProvider> )}写在最初的话
学习路上，经常会懈怠。
《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy...
如果有须要的搭档，能够加我微信：learningisconnecting
或者能够关注我的公众号：国星聊成长（我会分享成长的办法）