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> <button onClick={()=>{dispatch({type:'update_color',color:'red'})}}>red</button> </div> ) }
作者:start_zjj
链接:https://www.jianshu.com/p/99d7b07ff711
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。