Context状态树的使用,比较复杂,特别是使用Consumer时。
useContext这个hook能让Context使用起来变得非常简单。不需要再使用Consumer。使用useContext就能拿到context状态树里的值。
javascript">const value = useContext(context对象);
useContext函数的解释:
参数: context 对象(React.createContext
的返回值)
返回值: context对象的当前值(由上层组件中距离当前组件最近的 的 value
prop 决定)
当组件上层最近的 Provider 更新时,该 Hook 会触发重新渲染 。
示例:
javascript">//context/index.js 创建context对象。
import {createContext} from "react";
export default createContext({count:0});
//主入口文件 index.js
import ReactDOM from 'react-dom';
import App from './App';
import Context from "./context"
let count = 10;
ReactDOM.render(
<Context.Provider value={count}>
<App/>
</Context.Provider>,
document.getElementById('root')
);
//孙子组件 App-->User-->UserAdd.js
import myContext from "../../../context";
import {useContext} from "react";
export default (props)=>{
let context = useContext(myContext);
console.log(context);
return (
<div>
<h1>我是用户添加页面</h1>
<p>count:{context}</p> //此处使用比起consumer是不是简单的多得多得多了呢?
<p></p>
</div>
);
}