道招

Vue和React hooks实现Select批量选择、选中条数、全选、反选实现对比

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

Vue和React hooks实现Select批量选择、选中条数、全选、反选实现对比

批量选择、全选、反选这些功能使用频率还是很高的,下面直接看看Vue和React分别怎么实现吧。

Vue

在使用Vue的时候是很容易实现的,我们以下列数据格式为例:

const dataList = [{
    id: 1,
    label: '第一个',
}, {
    id: 2,
    label: '第二个',
}, {
    id: 3,
    label: '第三个',
}]

批量选择 在Vue中我们一般喜欢格外增加一个属性来标记是否已被选择,可以在每条数据item被勾选时,比如第一条的话就是Vue.set(dataList[0], 'checked', !!dataList[0].checked); 选中条数

const count = dataList.filter(item => item.checked).length;

全选

dataList.forEach(item => Vue.set(item, 'checked', true));

反选

dataList.forEach(item => Vue.set(item, 'checked', false));

React实现一

在React中怎么实现呢? 如果只是简单按照同样的方式的话,你就会失望了。

因为React不是跟Vue采用观察者模式来处理数据更新后的视图变更逻辑的,它更多是需要进行全量更新数据的。

对应数组而言,是引用类型数据,尽管里面某个元素发生了变更,但是对于整体数组的引用地址并未变更,React也就无法进行视图更新。

我们以使用useReducer为例

import React, { useReducer, useMemo } from 'react';

const [state, dispatch] = useReducer({
    dataList: [],
}, (state, reducer) => {
    switch(reducer.type) {
     case 'update':
         return {
            ...state,
            ...reducer.payload
         }
     case default:
         return state;
    } 

})

批量选择 在React中我们也可以选择格外增加一个属性来标记是否已被选择,可以在每条数据item被勾选时,比如第一条的话就是:

state.dataList[0].checked = !!state.dataList[0].checked;
dispatch({
    type: 'update',
    payload: {
        dataList: state.dataList.slice()
    }
})

对的,我们需要额外增加state.dataList.slice()这一步,这样我们就使用了新的数组引用了。 同理,下面的这些都需要额外增加这一步,或者要实现类似的功能。 选中条数

const count = useMemo(() => {
    state.dataList.filter(item => item.checked).length
}, [state.dataList]);

全选

dispatch({
    type: 'update',
    payload: {
        dataList: state.dataList.map(item => ({
            ...item,
            checked: true,
        }))
    }
})

反选

dispatch({
    type: 'update',
    payload: {
        dataList: state.dataList.map(item => ({
            ...item,
            checked: false,
        }))
    }
})

React实现二

网上也有不少网友借助一个存储对象来实现上述批量选择、选中条数、全选、反选的功能的,也简单看下具体实现。

import React, { useReducer, useMemo } from 'react';

const [state, dispatch] = useReducer({
    dataList: [],
    checkedMap: {}, // 新增 用来存储选中数据关系
}, (state, reducer) => {
    switch(reducer.type) {
     case 'update':
         return {
            ...state,
            ...reducer.payload
         }
     case default:
         return state;
    } 

})

批量选择 在每条数据item被勾选时通过变更checkedMap记录存储关系,比如第一条的话,如果选中就是{0: true},否则就是未选中,具体实现如下:

dispatch({
    type: 'update',
    payload: {
        checkedMap: {
            ...state.checkedMap,
            0: !!state.checkedMap[0]
        }
    }
})

我们不需要变更dataList里面的数据,只用变更checkedMap

选中条数

const count = useMemo(() => {
 Object.keys(state.checkedMap).filter(item => state.checkedMap[item]).length
}, [state.checkedMap]);

全选

dispatch({
    type: 'update',
    payload: {
        checkedMap: state.dataList.reduce((acc, curr) => ({
            ...acc,
            [curr.id]: true,
        }), {})
    }
})

反选

dispatch({
    type: 'update',
    payload: {
        checkedMap: state.dataList.reduce((acc, curr) => ({
            ...acc,
            [curr.id]: false,
        }), {})
    }
})

效果如下 file

更新时间:
上一篇:网址改用七牛云存储图片下一篇:道招网回归国内主机并完成备案

相关文章

vue内置组件keep-alive源码解析

很简单,我们直接看vue的源码即可。 keep-alive 组件支持三个属性。 props: { include: patternTypes, exclude: patter 阅读更多…

Vue同一路由跳转页面不刷新解决方案及注意事项之二

之前写过一个 《Vue同一路由跳转页面不刷新解决方案及注意事项》 ,在这篇文章里面鞋到了怎么解决这个问题,具体内容可以点击查看,这里简单说一下,就是利用将时间戳传给路由的query,也就导致 $ro 阅读更多…

element-ui表单源码解析之el-input

关于表单校验el-input做的主要工作就是跟el-form-item交互,把input的相关事件发送给el-form-item,上一篇已经讲到在el-form-item的mounted的生命周期里 阅读更多…

深入学习React时间切片,任务调度scheduler

背景 最近想起月初看到的 魔术师卡颂 (微信号:kasong999)的一个公开直播—— 《手写React优先级调度算法》 ,虽然我更倾向于认为直播内容是演示如何利用React官方同款调度库手写代 阅读更多…

vue-cli设置css不生效

我们有的项目使用的是老的vue-cli脚手架生成的,今天想写点东西,发现.vue文件里面 style 里面写的样式都不生效了,很自然就想到是不是loader的问题。 在这种项目的webpack.ba 阅读更多…

用个数组来理解vue的diff算法(一)

原文地址: 道招网 的 用个数组来理解vue的diff算法(一) Vue使用的diff算法,我相信用vue的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了