Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >关于条件筛选列表页开发的一些总结

关于条件筛选列表页开发的一些总结

原创
作者头像
挥刀北上
修改于 2024-06-26 09:24:16
修改于 2024-06-26 09:24:16
17700
代码可运行
举报
文章被收录于专栏:编程思维编程思维
运行总次数:0
代码可运行

界面如下:

界面
界面

页面通常是两部分,一部分是筛选条件,一部分是数据列表,通常情况下,筛选数据发生变化,数据列表也会发生变化,此时我一般用reducer将第一部分的数据抽离出来,以上面页面为例,通常我会抽象出6个变量:

代码语言:js
AI代码解释
复制
const initialState = {
    selectData: null,
    places: [],
    currentplace: {},
    Ggsises: [],
    currentGgsis: {},
}

然后我会定义两个初始化函数,确切的说是一个,首先筛选条件要初始化,所以或提前获取数据,这是第一个函数,这个函数只执行一次,第二个是初始化列表,但是初始化列表是根据筛选条件变化的,虽然初始化执行了一次,但是后面还会执行很多次,所以这里用到了一个技巧。

什么技巧呢,我用了两个useEffect函数:

代码语言:js
AI代码解释
复制
    useEffect(() => {
        initData()
    }, []);

    useEffect(() => {
        if (state.Ggsises.length == 0 || state.places.length == 0) return;
        getListData(state)
    }, [state])

第一个useEffect作为筛选条件初始化只执行一次,后一个根据reducer的变化来执行,页面初次加载也会执行,初始化列表。

这里面需要注意的是state变化是需要执行disptach的。

还有一个注意点是,如果用户从其它页面跳转而来,并且路由state携带参数,我们在初始化时应该判断props.location.state,

并且根据结果触发dispatch:

代码
代码

reducer很简单:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const initialState = {
    selectData: null,
    places: [],
    currentplace: {},
    Ggsises: [],
    currentGgsis: {},
}

const reducer = (state, action) => {
    const { type, payload } = action;
    switch (type) {
        case "DATA_CHANGE":
            return { ...state, ...payload };
        default: {
            return state;
        }
    }
}

示例的界面是全量请求,也就是请求参数不切定就请求全部,也有一些页面是默认个设定一个值,这样的话在reducer内部就需要做一些初始化了,比如确定currentXXX,这样页面就能指定加载哪些数据了。

此时只需要在监听每个筛选条件,触发dispatch就可以了。

思考一下如果不用reducer我们会怎么做呢,首先在useffect函数中初始化筛选条件,然后根据初始条件,路由参数,初始化列表。

然后分别监听筛选条件,每个条件发生变化,都需要根据变化的条件重新获取数据,理论上不难,但是如果条件太多就会定义大量的useState,代码量比较繁琐,此时用reducer就比较合适了,所有筛选条件集中在reducer中,筛选条件的组件中的状态也绑定reducer,

简直不要太清晰,reducer等于维护了一个状态树。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
React-hooks面试考察知识点汇总
React 没有提供将可复用性行为“附加”到组件的途径(例如,把组件连接到 store)。有一些解决此类问题的方案,比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构,这可能会很麻烦,使你的代码难以理解。
beifeng1996
2022/10/06
1.4K0
react高频知识点梳理
路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时,它将渲染其内容,当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹配。
beifeng1996
2022/11/01
1.5K0
超实用的 React Hooks 常用场景总结
React 在 v16.8 的版本中推出了 React Hooks 新特性。在我看来,使用 React Hooks 相比于从前的类组件有以下几点好处:
前端达人
2021/05/11
5K0
问:你是如何进行react状态管理方案选择的?
前言:最近接触到一种新的(对我个人而言)状态管理方式,它没有采用现有的开源库,如redux、mobx等,也没有使用传统的useContext,而是用useState + useEffect写了一个发布订阅者模式进行状态管理,这一点对我来说感觉比较新奇,以前从没接触过这种写法,于是决定研究一下目前比较常用的状态管理方式。
beifeng1996
2022/10/10
3.7K0
React-Hooks源码深度解读
这个代码有一个问题,在执行 useState 的时候每次都会 var _val = initialValue,初始化数据;
goClient1992
2022/10/03
1.2K0
React 进阶 - React Redux
应用初始化时候,只请求一次数据,然后通过状态管理把数据存起来,需要数据的组件只需要从状态管理中‘拿’就可以了。
Cellinlab
2023/05/17
1.2K0
React 进阶 - React Redux
【干货】从零实现 react-redux
在 React 诞生之初,Facebook 宣传这是一个用于前端开发的界面库,仅仅是一个 View 层。前面我们也介绍过 React 的组件通信,在大型应用中,处理好 React 组件通信和状态管理就显得非常重要。为了解决这一问题,Facebook 最先提出了单向数据流的 Flux 架构,弥补了使用 React 开发大型网站的不足。
winty
2020/03/31
1.8K0
【干货】从零实现 react-redux
react面试如何回答才能让面试官满意
注意:batchingStrategy 对象可以理解为“锁管理器”。这里的“锁”,是指 React 全局唯一的 isBatchingUpdates 变量,isBatchingUpdates 的初始值是 false,意味着“当前并未进行任何批量更新操作”。每当 React 调用 batchedUpdate 去执行更新动作时,会先把这个锁给“锁上”(置为 true),表明“现在正处于批量更新过程中”。当锁被“锁上”的时候,任何需要更新的组件都只能暂时进入 dirtyComponents 里排队等候下一次的批量更新,而不能随意“插队”。此处体现的“任务锁”的思想,是 React 面对大量状态仍然能够实现有序分批处理的基石。
beifeng1996
2022/09/22
1K0
React useReducer 终极使用教程
useReducer 是在 react V 16.8 推出的钩子函数,从用法层面来说是可以代替useState。相信前期使用过 React 的前端同学,大都会经历从 class 语法向 hooks 用法的转变,react 的 hooks 编程给我们带来了丝滑的函数式编程体验,同时很多前端著名的文章也讲述了 hooks 带来的前端心智的转变,这里就不再着重强调,本文则是聚焦于 useReducer 这个钩子函数的原理和用法,笔者带领大家再一次深入认识 useReducer。
蒋川@卡拉云
2022/08/31
4K0
React useReducer 终极使用教程
React Hooks 万字总结
每个 hook 都会有一个 next 指针,hook 对象之间以单向链表的形式相互串联, 同时也能发现 useState 底层依然是 useReducer 再看看更新阶段发生了什么
ConardLi
2021/04/23
9940
React Hooks 是什么
最近在重构 BadJS 的管理页面,使用 TypeScript + React Hooks 的技术栈,趁这个机会好好理一理 React Hooks 那些事儿。
李振
2021/11/26
3.4K0
如何提高redux开发效率?当然是redux-tookit啦!
使用 react-redux 的朋友都经历过这种痛苦吧? 定义一个 store 仓库,首先创建各种文件,比如 reducer、action、store...,然后 将 redux 和 react 连接使用。整个流程繁琐,写起来代码冗余。 react-redux 创建仓库,文件目录如下:
程序员王天
2023/10/18
4070
如何提高redux开发效率?当然是redux-tookit啦!
宝啊~来聊聊 9 种 React Hook
文章会为你讲述 React 9种 Hook 的日常用法以及进阶操作,从浅入深彻底掌握 React Hook!
19组清风
2022/02/28
1.2K0
宝啊~来聊聊 9 种 React Hook
React Hook技术实战篇
Hook在中文的意思是钩子, 而在react也是充当这个角色, Hook是服务于函数组件的方法, Hook提供了各种API, 如State Hook提供类型setState的功能, Effect Hook提供处理副作用的函数(数据订阅, 更新dom等), 也能够自定义Hook Api, 使得开发起来具有灵活性, 更多Api可以点击详情
JianLiang
2019/06/04
4.6K0
Note·React Hook
React Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
数媒派
2022/12/01
2.3K0
这些react面试题你会吗,反正我回答的不好
第二个参数是一个函数,该函数会在 setState函数调用完成并且组件开始重渲染时调用,可以用该函数来监听渲染是否完成。
beifeng1996
2022/09/24
1.3K0
超详细preact hook源码逐行解析
preact hook 作为一个单独的包preact/hook引入的,它的总代码包含注释区区 300 行。
ACK
2020/01/14
2.7K0
react结合redux实现一个购物车功能
使用react开发有一段时间了,今天给大家带来一个案例,react结合redux实现购物车功能,页面如下:
挥刀北上
2019/09/29
5K0
react结合redux实现一个购物车功能
React Hook实践指南
在React为什么需要Hook这篇文章中我们探讨了React开发团队为什么要为Function Component添加Hook的原因,在本篇文章中我将会为大家提供一份较为全面的React Hook实践指南,其中包括以下方面的内容:
进击的大葱
2022/08/22
2.7K0
[OHIF-Viewers]医疗数字阅片-医学影像-REACT-Hook API索引
如果你刚开始接触 Hook,那么可能需要先查阅 Hook 概览。你也可以在 Hooks FAQ 章节中获取有用的信息。
landv
2020/07/09
2.3K0
相关推荐
React-hooks面试考察知识点汇总
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验