0
点赞
收藏
分享

微信扫一扫

useContext和useReducer及二者的结合使用

先峰老师 2022-02-19 阅读 58

当你的react项目不大,但是需要组件之间传值的时候,父子之间的组件传值倒是可以简单解决,可是如果要是兄弟之间的组件传值呢?redux又没必要,这个时候就可以使用usecontext这个hook来解决。并且可以用useReducer管理包含多个子值的 state 对象。(模拟一个小型redux场景,而无法替代redux)

一、useContext和useReducer

1、useContext:

useContext可以帮助我们跨越组件层级直接传递变量,实现数据共享。就是对它所包含的组件树提供全局共享数据的一种技术。

使用步骤:

这样子count就可以传递到各个子组件中了。 

2、useReducer

第一个参数:reducer函数(state中的值变化时触发的函数,返回新的state)。第二个参数:初始化的state。返回值为最新的state和dispatch函数(用来触发reducer函数,计算对应的state)。按照官方的说法:对于复杂的state操作逻辑,嵌套的state的对象,推荐使用useReducer。 

// 官方 useReducer Demo
    // 第一个参数:应用的初始化
    const initialState = {count: 0};

    // 第二个参数:state的reducer处理函数
    function reducer(state, action) {
        switch (action.type) {
            case 'increment':
              return {count: state.count + 1};
            case 'decrement':
               return {count: state.count - 1};
            default:
                throw new Error();
        }
    }

    function Counter() {
        // 返回值:最新的state和dispatch函数
        const [state, dispatch] = useReducer(reducer, initialState);
        return (
            <>
                // useReducer会根据dispatch的action,返回最终的state,并触发rerender
                Count: {state.count}
                // dispatch 用来接收一个 action参数「reducer中的action」,用来触发reducer函数,更新最新的状态
                <button onClick={() => dispatch({type: 'increment'})}>+</button>
                <button onClick={() => dispatch({type: 'decrement'})}>-</button>
            </>
        );

还有个第三个参数:惰性初始化参数:(这样第二个参数传值时做一些标准化)

 二、两者的结合使用

举报

相关推荐

0 条评论