Context Hook
在之前的开发中,我们要在组件中使用共享的Context有两种方式;
- 类式组件可以通过类型.contextType = MyContext的方式,在类中获取context;
- 多个Context或者在函数式组件中通过MyContext.Consumer方式共享context;
但是多个Context共享的时候会存在大量的嵌套;
- Context Hook允许我们通过Hook来直接获取某个Context的值;
const value=useContext(MyContext)
创建publishContext/index.js
import React,{createContext} from "react"
let Theme=createContext({theme:'红色'})
let Info=createContext({name:'张三',age:18})
export {
Theme,Info
}
在App.js中使用Context赋值
import React from 'react'
import CreateContextCom from "./pages/createContextCom.jsx";
import {Theme,Info} from './publishContext/index.js'
function App(props) {
return (
<div>
<h1>react-router的使用</h1>
<Theme.Provider value={{theme:'中国红'}}>
<Info.Provider value={{name:'李四',age:28}}>
<CreateContextCom/>
</Info.Provider>
</Theme.Provider>
</div>
);
}
export default App;
创建createContextCom.jsx组件
import React, { useContext } from 'react';
import {Theme,Info} from '../publishContext/index.js'
export default function CreateContextCom() {
let theme=useContext(Theme)
let info=useContext(Info)
return <div>
<h2>createContextCom</h2>
<p>{theme.theme}</p>
<p>{info.name}-{info.age}</p>
</div>;
}
注意事项:当组件上层最近<MyContext.Provider >
挂在的value的值更新时,该Hook会触发重新渲染,并使用最新传递给<MyContext.Provider >
的使用者的值;