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

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

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 ~