React useContext與useReducer函數(shù)組件使用

更新時間：2023年02月06日 10:24:47 作者：碰磕

useContext和useReducer 可以用來減少層級使用, useContext，可以理解為供貨商提供一個公共的共享值，然后下面的消費者去接受共享值，只有一個供貨商，而有多個消費者，可以達到共享的狀態(tài)改變的目的

useContext

介紹

與class中寫法對比減少了代碼量,省去了返回回調(diào)函數(shù)獲取傳來的值

使用

/**
 * useContext(減少組件層級)
 */
 import React, { useState, useRef, useContext } from 'react';
 const GlobalContext=React.createContext()//創(chuàng)建Context對象
function FilmItem(){
    const value=useContext(GlobalContext)
    console.log(value)//可以拿到傳過來的value
        return(
                <div>
                    <span>{value.name}CSDN碰磕</span>
                </div>
             )
}
 export default function MyContext() {
    return (
        //供應(yīng)商
        <GlobalContext.Provider value={{
            name:"碰磕",
            age:18
        }}>
        <div>
            Context方案
            <FilmItem></FilmItem>
        </div>
        </GlobalContext.Provider>
    );
 }

通過**useContext(GlobalContext)**就可以獲取到傳來值

useReducer

介紹

將多個state放到對象中，進行統(tǒng)一管理

使用(簡單示例實現(xiàn)計算器)

/**
 * useReducer(減少組件層級)
 */
 import React, {useReducer } from 'react';
 //處理函數(shù)
 const reducer=(pervState,action)=>{    //第一個參數(shù)是原數(shù)據(jù),第二個參數(shù)是傳來的數(shù)據(jù)
    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 (
        <div>
            <button onClick={()=>{
                dispatch({
                    type:"pengke-jian"
                })
            }}>-</button>
            <span>{state.count}</span>
            <button onClick={()=>{
                dispatch({
                    type:"pengke-jia"
                })
            }}>+</button>
        </div>   
    )
 }

將useContext與useReducer整合

實現(xiàn)多個組件通過他們倆互相通信傳值…

/**
 * 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 (
        <GlobalContext.Provider value={
            {
                state,dispatch
            }
        }>
        <div>
           <Children1 />
           <Children2 />
           <Children3 />
        </div>   
        </GlobalContext.Provider>
    )
 }
function Children1(){
    const {dispatch}=useContext(GlobalContext)//這里傳值
    return <div style={{background:"red"}}>
        <button onClick={()=>{
            dispatch({
                msg:"change-num1",
                value:"被我修改了num1哈哈哈"
            })
        }}>改變值1</button>
        <button onClick={()=>{
            dispatch({
                msg:"change-num2",
                value:"被我修改了num2哈哈哈"
            })
        }}>改變值2</button>
    </div>
}
function Children2(){
    const {state}=useContext(GlobalContext)//拿到值
    return <div style={{background:"orange"}}>Children2---{state.num1}</div>
}
function Children3(){
    const {state}=useContext(GlobalContext)//拿到值
    return <div style={{background:"skyblue"}}>Children3---{state.num2}</div>
}

到此這篇關(guān)于React useContext與useReducer函數(shù)組件使用的文章就介紹到這了,更多相關(guān)React useContext與useReducer內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: