状态提升管理--1

在项目开发中,会遇到当前状态受祖先元素的影响,如果此时需要需要获取数据或者修改数据,首先想到的就是组件传值,但是对于嵌套多级的结构来说,在不使用redux的情况下是非常麻烦的

使用React.createcontext 来让一个组件的值状态提升,当其子组件想要使用其中的数据或者修改数据的时候通过传值的方法实现,代码如下:

首先声明一个文件用于给管理React.createcontext :

//context文件

import {createcontext } from react

export default const myContext = createcontext()

在祖先文件中做状态管理

//引入context文件

import mycontext from  'context文件'

//包裹状态所在的组件 利用prop传值

<mycontext.Provider value={{

想要传递的数据和方法

}}>

//需要把包裹的组件

<mycontext.Provider>

//子孙组件接收

//引入context文件

import mycontext from  'context文件'

在类组件里 使用 :

static contextType =mycontext

此时传递的数据和方法都保存在了this.context方法之中

 

//在函数式组件中使用

引入hook-> usecontext用于接收

引入context文件

import mycontext from  'context文件'

//定义变量用于接收

const value = usecontext(mycontext)

此时value就接收到了祖先组价传递的方法和数据