useContext和useReducer的结合使用,效果等同于redux,小范围数据存储

2,631 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

Context

场景一:一个父组件与多个子组件,若只是父组件传值给子组件,只需传递props值即可

场景二:一个父组件与多个子组件与孙子组件,进行数据传递时,为了避免数据一层一层往下传递,可以选择Context或者redux。

redux:数据存储一般是放在整个项目的最外层,那就可以检测整个项目的数据

Context:小范围的内的组件数据存储。context变化时,数据的使用者接收的参数也会随之变化,方便,很nice

步骤一:创建Context对象

export const rememberContext=createContext()

其中 Context.Provider是数据的提供者 Context.Consumer是数据的使用者

步骤二:使用

定义数据的提供者

<rememberContext.Provider value={{state,dispatch}}>
    //组件
</rememberContext.Provider>

数据的使用者 (在hooks一般用不到)

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

但是Context使用的场景有点局限,只支持单向数据流向,若子组件想更改父组件的值,需要结合下useReducer

useReducer

useReducer是useState的延伸,适合处理数据复杂的数据。

步骤一:定义存储的数据

const searchInfoInit={
    params1:"",
    params2:""
}
function reducer(){
    switch(actions.type){
      case "payload":
        return {...state,...actions.data};
      default :
        return {...state}
    }
}
const [state,dispatch]=useReducer(reducer,searchInfoInit)

如上:就将所有的数据集中处理。

步骤二:创建数据提供者,以及提供的数据

<rememberContext.Provider value={{state,dispatch}}>
    ...
</rememberContext.Provider>

步骤三:数据下发

import {rememberContext} from '../context'

export default function Child1(){
    const {state,dispatch}=useContext(rememberContext)
    return(
        <div>
            参数1:{state.params1}
        </div>
    )
}

步骤四:子组件更新,数据集中处理

import {rememberContext} from '../context'

export default function Child1(){
    const {state,dispatch}=useContext(rememberContext)
    function add(){
        dispatch({
            type:'payload',
            data:{
                params1:'新增'
            }
        })
    }
    return(
        <div onClick={add}>
            参数1:{state.params1}
        </div>
    )
}

如此实现了小范围数据存储,很nice ~