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,
}), {})
}
})
效果如下
- 分类:
- Web前端
相关文章
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的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…