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'

全局状态管理