react hooks useContext
const context = useContext(conntext)
数据共享的api
通常使用redux mobx dva实现
conntext 是react 提供的实现数据共享的api . 解决props层层传递的问题
1.React.createConntext()创建Context对象
2.使用Context Provider 包裹组件 给他的后代组件提供数据
3.Context Provider所有的后代组件，都可以通过
Context.Consumer获取到Context数据
1.创建Context = React.createContext()
// 可以传递参数
2.使用Context.Provider包裹组件
<Context.Provider value={store}>
<MyComponnent />
</Context.Provider>
3. 使用Context.Consumer 获取共享数据
业务组件可以获取到这个store状态值了
<Context.Consumer>
{value=>{
// value就是通过context 共享的数据 这里是store
}
}
</Context.Consumer>
useContext(context)
useContext(context)是针对context（上下文）提出的api
它接受React.createContext()的返回结果作为参数
也就是context对象 并返回最近的context
使用useContext 将不再需要Provider和Consumer
当最近的context更新时，那么使用该conntext的hook将会重新渲染
基本使用
const Context =React.createContext({loadinng:false,name:'jack'})
组件1
const OnePage=()=>{
const ctx = userContext(Context);
return
(<div>{ctx.loading&&"Loading..."}</div>)
}
// 每个组件都可以这样使用
组件中引入其他组件
传递Context 数据
<MainPage Context = { Context} / >
//这样还是一层层传递的 所以需要使用暴露的方式导出去
MainPage组件
import React,{useContext} from 'react'
export default ({Conntext})=>{
// import引入的话 这个就不用写了传入参数
const ctx = useContext(Context);
// 使用这个数据 上层传递的数据 。 类似props
console.log(ctx)
return (
<div>
main 组件
</div>
)
}
之前无状态组件 函数组件传递参数 通过状态管理机 mobx redux dva实现的
也可以通过暴露的方式引入
import {Context} from './index'
index.js导出
export const Context = React.createContext({
loadinng:false,
name:'jack'
})
// 这样导出 子组件 import
// 封装单独模块的方式 把context 放进去
src下创建store
index.js
import React from 'react'
const Context = React.createContext({
loadinng:false,
name:'jack'
})
export default Context
暴露出去
外部使用
import Context from '../../store'
全局状态管理