React useContext与useReducer函数组件使用

目录

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

useContext

介绍

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

使用

/**
 * useContext(减少组件层级)
 */
 import React, { useState, useRef, useContext } from 'react';
 const GlobalContext=React.createContext()//创建Context对象
function FilmItem(){
    const value=useContext(GlobalContext)
    console.log(value)//可以拿到传过来的value
        return(
                

                    {value.name}CSDN碰磕
                
             )
}
 export default function MyContext() {
    return (
        //供应商
        
        

            Context方案
            
        
        
    );
 }

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

useReducer

介绍

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

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

/**
 * useReducer(减少组件层级)
 */
 import React, {useReducer } from 'react';
 //处理函数
 const reducer=(pervState,action)=>{    //第一个参数是原数据,第二个参数是传来的数据
    let newarr={...pervState};//定义新对象拷贝
    switch(action.type){
        case "pengke-jian":
            newarr.count--
            return newarr        
        case "pengke-jia":
            newarr.count++
            return newarr
        default:
            return pervState   
    }
 }
 //外部的对象
 const intialState={
     count:0,
 }
 export default function MyReducer() {
    const [state,dispatch]=useReducer(reducer,intialState)
    return (
        

            {
                dispatch({
                    type:"pengke-jian"
                })
            }}>-
            {state.count}
            {
                dispatch({
                    type:"pengke-jia"
                })
            }}>+
        
   
    )
 }

将useContext与useReducer整合

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

/**
 * useReducer+useContext
 */
 import React, {useContext, useReducer } from 'react';
 const intialState={
     num1:"666",
     num2:"碰磕"
 }
 const reducer=(state,action)=>{
    let newarr={...state};
    switch(action.msg){
        case "change-num1":
            newarr.num1=action.value
            return newarr
        case "change-num2":
            newarr.num2=action.value
            return newarr
        default:
            return newarr
    }
 }
 const GlobalContext = React.createContext();
 export default function MyReducer2() {
    const [state,dispatch]=useReducer(reducer,intialState)
    return (
        
        

           
           
           
        
   
        
    )
 }
function Children1(){
    const {dispatch}=useContext(GlobalContext)//这里传值
    return 

        {
            dispatch({
                msg:"change-num1",
                value:"被我修改了num1哈哈哈"
            })
        }}>改变值1
        {
            dispatch({
                msg:"change-num2",
                value:"被我修改了num2哈哈哈"
            })
        }}>改变值2
    
}
function Children2(){
    const {state}=useContext(GlobalContext)//拿到值
    return 
Children2---{state.num1}
}
function Children3(){
    const {state}=useContext(GlobalContext)//拿到值
    return 
Children3---{state.num2}
}

到此这篇关于React useContext与useReducer函数组件使用的文章就介绍到这了,更多相关React useContext与useReducer内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！