react|useContext详细说明与使用 react|javascript

一、什么是useContext 在Hooks之前，react开发者都是使用class组件进行开发，父子组件之间通过props传值。但是现在开始使用方法组件开发，没有constructor构造函数，也就没有了props的接收，所以父子组件的传值就成了一个问题。
于是，就有了useContext。
别忘记 useContext 的参数必须是 context 对象本身：

正确： useContext(MyContext)
错误： useContext(MyContext.Consumer)
错误： useContext(MyContext.Provider)

二、useContext作用 1.useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享。
2.Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。
三、代码示例 1、创建父组件

import React,{useContext, useState, createContext} from 'react'; import {Button} from 'antd'; import '../../App.css'; const CountContext = createContext(); const TestContext = () =>{ const [count, setCount] = useState(0); console.log(CountContext); console.log(useContext(CountContext)); return(父组件点击次数：{count} ) };

2、创建子组件

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

3、完整代码

import React,{useContext, useState, createContext} from 'react'; import {Button} from 'antd'; import '../../App.css'; const CountContext = createContext(); const TestContext = () =>{ const [count, setCount] = useState(0); console.log(CountContext); console.log(useContext(CountContext)); return(父组件点击次数：{count} ) }; const Counter = () => { const count = useContext(CountContext); console.log(CountContext); // console.log(count); // console.log(useContext(CountContext)); return (子组件获得的点击数量：{count} ); }; export default TestContext;

4、运行效果点击+1的时候，父组件和子组件都能获取到当前点击的次数。