ReactuseContext与useReducer函数组件使用.docxVIP

第

ReactuseContext与useReducer函数组件使用

目录useContext介绍使用useReducer介绍使用(简单示例实现计算器)将useContext与useReducer整合

useContext

介绍

与class中写法对比减少了代码量,省去了返回回调函数获取传来的值

使用

/**

*useContext(减少组件层级)

importReact,{useState,useRef,useContext}fromreact;

constGlobalContext=React.createContext()//创建Context对象

functionFilmItem(){

constvalue=useContext(GlobalContext)

console.log(value)//可以拿到传过来的value

return(

div

span{value.name}CSDN碰磕/span

/div

exportdefaultfunctionMyContext(){

return(

//供应商

GlobalContext.Providervalue={{

name:碰磕,

age:18

div

Context方案

FilmItem/FilmItem

/div

/GlobalContext.Provider

通过**useContext(GlobalContext)**就可以获取到传来值

useReducer

将多个state放到对象中，进行统一管理

使用(简单示例实现计算器)

/**

*useReducer(减少组件层级)

importReact,{useReducer}fromreact;

//处理函数

constreducer=(pervState,action)={//第一个参数是原数据,第二个参数是传来的数据

letnewarr={...pervState};//定义新对象拷贝

switch(action.type){

casepengke-jian:

newarr.count--

returnnewarr

casepengke-jia:

newarr.count++

returnnewarr

default:

returnpervState

//外部的对象

constintialState={

count:0,

exportdefaultfunctionMyReducer(){

const[state,dispatch]=useReducer(reducer,intialState)

return(

div

button()={

dispatch({

type:pengke-jian

}}-/button

span{state.count}/span

button()={

dispatch({

type:pengke-jia

}}+/button

/div

将useContext与useReducer整合

实现多个组件通过他们俩互相通信传值

/**

*useReducer+useContext

importReact,{useContext,useReducer}fromreact;

constintialState={

num1:666,

num2:碰磕

constreducer=(state,action)={

letnewarr={...state};

switch(action.msg){

casechange-num1:

newarr.num1=action.value

returnnewarr

casechange-num2:

newarr.num2=action.value

returnnewarr

default:

returnnewarr

constGlobalContext=React.createContext();

exportdefaultfunctionMyReducer2(){

cons