zoukankan      html  css  js  c++  java
  • react中useContext与useReducer 代替 redux

    1.useContext与useReducer

    主要思想:
    1.使用redux的action以及dispatch方法将数据存在一个组件中;
    2.使用createContext,useContext进行父子组件传值;

    import React ,{  }from 'react';
    import { Content } from './content'
    import { Color } from './color'
    //index页面
    export const Index =()=>{
        return(
            <div>
                  {/* Color组件作为父组件作为包裹 */}
                <Color>
                  {/* 注意父子关系才能使用 */}
                    <Content />
                </Color>
                
            </div>
        )
    }
    
    //起存储数据的redux页面,父组件
    import React ,{ createContext,useReducer } from 'react';
    export const Context = createContext({})
     {/* reducer作为变量而不是函数*/}
    const reducer = (state,action)=>{
        switch (action.type){
            case 'update_color':
                return action.color
            default :
                return 'purple'
        }
    }
    export const Color =props=>{
     {/* props是指包含子组件的结构 */}
        const [color,dispatch] = useReducer(reducer,'purple')
        return (
            <Context.Provider value={{color,dispatch}}>
                {props.children}
            </Context.Provider>
        )
    }
    
    //操作数据的子组件
    import React ,{ useState ,useContext }from 'react';
    import { Context } from './color'
    export const Content =()=>{
         {/* 这里是对象,不是数组,value是对象 */}
        const {color,dispatch} = useContext(Context)
        return(
            <div>
                <p style={{color:color}}>字体颜色是:{color}</p>
                <button onClick={()=>{dispatch({type:'update_color',color:'green'})}}>green</button>&nbsp;
                <button onClick={()=>{dispatch({type:'update_color',color:'red'})}}>red</button>
            </div>
        )
    }


    作者:start_zjj
    链接:https://www.jianshu.com/p/99d7b07ff711
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 相关阅读:
    linux usb驱动——OTG数据线与普通数据线区别
    linux内核——设置打印信息
    loop设备及losetup命令介绍[转]
    Linux设备(dev)介绍
    开启windows的 admin+开启tel+电源+远程功能
    JL MTK 安防网关的 wifi 吞吐测试
    如何设置默认以管理员权限运行cmd
    docsis cm 上线过程(bigwhite)
    将win7 设置为 NTP服务器
    tshark的抓包和解析
  • 原文地址:https://www.cnblogs.com/makai/p/13538557.html
Copyright © 2011-2022 走看看