P06:useReducer介绍与使用方法

在之前的文章我们学习了useContext函数,那本文就带大家学习一下useReducer,因为他们两个很像,并且合作可以完成类似的Redux库的操作。在开发中使用useReducer可以让代码具有更好的可读性和可维护性,并且会给测试提供方便,所以我们有必要彻底的学习一下useReducer。本文我们只是简单的学习一下useReducer语法和使用方法,尽量避免Redux的一些操作。这样讲更容易让不了解Redux的小伙伴接受。

reducer是什么?

为了更好的理解useReducer,所以先要了解JavaScript里的Redcuer是什么。它的兴起是从Redux广泛使用开始的,但不仅仅存在Redux中,可以使用JavaScript来完成Reducer操作。那reducer其实就是一个函数,这个函数接收两个参数,一个是状态,一个用来控制业务逻辑的判断参数。我们举一个最简单的例子。

function countReducer(state, action) {
    switch(action.type) {
        case 'add':
            return state + 1;
        case 'sub':
            return state - 1;
        default: 
            return state;
    }
}

上面的代码就是Reducer,你主要理解的就是这种形式和两个参数的作用,一个参数是状态,一个参数是如何控制状态。

useReducer的使用

了解reducer的含义后,就可以讲useReducer了,它也是React hooks提供的函数,可以增强我们的Reducer,实现类似Redux的功能。我们新建一个Example5.js的文件,然后用useReducer实现计数器的加减双向操作。

import React, { useReducer } from 'react';

function ReducerDemo(){
    const [ count , dispatch ] =useReducer((state,action)=>{
        switch(action){
            case 'add':
                return state+1
            case 'sub':
                return state-1
            default:
                return state
        }
    },0)
    return (
       <div>
           <h2>现在的分数是{count}</h2>
           <button onClick={()=>dispatch('add')}>Increment</button>
           <button onClick={()=>dispatch('sub')}>Decrement</button>
       </div>
    )

}

export default ReducerDemo

这段代码是useReducer的最简单实现了,这时候可以在浏览器中实现了计数器的增加减少。

修改index.js文件,让ReducerDemo组件起作用。

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example5'

ReactDOM.render(<Example />, document.getElementById('root'));

GIF效果演示:

P06:useReducer介绍与使用方法

总结

本文内容就这么多,主要是想让大家了解一下useReducer,在接下来的文章教程中我会用一个具体的例子,实现类似Redux的用法。别走开,下节更精彩。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P06:useReducer介绍与使用方法

发表评论

提供最优质的资源集合

立即查看 了解详情