郑州建设网站费用,做网站的毕业答辩ppt实例,上海建站费用,建站程序来源 | juejin.im/user/870468939940184 作者 | 前端小月月背景最近的你有没有接手的新项目#xff0c;对这个有什么感觉#xff1f;我最近接手了一个项目#xff0c;先不论是否代码行数的多少#xff0c;仅是思路就很混乱#xff0c;像是一件衣服在打补丁#xff0c;而… 来源 | juejin.im/user/870468939940184 作者 | 前端小月月背景最近的你有没有接手的新项目对这个有什么感觉我最近接手了一个项目先不论是否代码行数的多少仅是思路就很混乱像是一件衣服在打补丁而衣服上还有混乱的线网数据绕来绕去和断掉的线头举例说明下关于补丁没有对数据进行扩展处理一个值一个变量。例如获取数据详情返回的多个对象便依次存储多个对象这样在参数变更时便要不停地补充参数如果你使用的是react就会发现大量的state还没有注释它是用来干什么的不管对于维护者还是初入者都是不友好的其实我们可以存储在一个变量里在使用时直接调用对象的参数列表的列表项[12345]的展示可能会根据权限展示不同的列表刚开始是123根据123后来变成1234就。。。。其实我们根据业务场景是否可以传入一个数组arr[1,2,3,4],根据includes判断是否在数组内(此处会在列表展示区做详细解释)关于线网把父级组件的静态数据number3和回调方法传给子类回调方法里使用的却是子类传回来的父类的静态数据number关于断掉的线头例如使用antd的Tabs:如果只是单纯的点击切换模块没有进行模块的特殊处理则不需要onChange的方法和状态存储 确定我们想要的避免无效代码关于以上的问题我基于以往的项目整理了一下管理系统的组件结构思路希望可以在你的项目开发中提供一些帮助#概述公共结构关于一个管理系统使用最多的便是增删改查主要的逻辑是对数据的操作基于以往的项目可以提取以下部分的公共结构数据流向搜索排序分页通过操作的参数获取列表的展示数据列表操作区会根据删除或者修改后重新获取列表数据零 · 项目准备此次针对 搜索 列表 分页 区域使用react作范例版本号如下壹 · 存储搜索参数数据列表展示区搜索和分页数据需要统一存储顶端组件代码和效果展示搜索组件SearchForm.jsimport React from react;import { Form, Input, Button } from antd;const SearchDemo (props) {const [form] Form.useForm();const onFinish (values) {console.log(values); props.getListBySearch(values); };return (Formlayoutinlineform{form}namecontrol-hooksstyle{{ width: 400 }}onFinish{onFinish} Form.Item namenameKey label姓名Input placeholder请输入姓名关键字 /Form.ItemdivButton typeprimary htmlTypesubmit SubmitButtondivForm );};export default SearchDemo;复制代码列表及分页组件import React from react;import { Button, Table } from antd;import EditContent from ./EditContent;export default function TableList(props) {const { list [], total, getListByPage, pageConfig } props;const columns [ {title: 姓名,dataIndex: name,key: name }, {title: 年龄,dataIndex: age,key: age }, {title: 住址,dataIndex: address,key: address }, ];function changPage(page, pageSize) { getListByPage({ current: page, pageSize }); }return (Tablestyle{{ marginTop: 20 }}sizesmalldataSource{list}columns{columns}pagination{{...pageConfig,total: total,onChange: changPage }} / );}复制代码贰·列表操作区列表展示区❝列表操作可能同时存在多个弹窗需对弹窗组件做统一参数处理利用数据柯里化把父级参数运输到子组件内❞数据统一管理业务逻辑层指index.js组件负责整个页面的结构和逻辑处理效果展示数据存储统一管理弹窗数据统一管理 const [modalProps, setModalProps] useState(dataSource.length);复制代码使用柯里化父级传递参数统一管理 footer{null} {...modalProps} maskClosable{false} onCancel{() setModalProps({ visible: false })} {modalProps.content modalProps.content(commonProps)} {/* 使用柯里化对数据传递进行处理*/}/Modal复制代码列表组件新增操作项 {title: 操作,dataIndex: operation,key: operation,render: (text, record) {return (ButtononClick{() setModalProps({ visible: true, content: (commonProps) (/*跨级传递父级参数*/EditContent record{record} {...commonProps} / ) }) } 修改Button ); } }复制代码修改组件import React from react;import { Button } from antd;export default function EditContent(props) {const { record, editItem, setModalProps } props;const item { name: 修改后的名字 };return (div {item.name}ButtononClick{() { editItem({ ...record, ...item }); setModalProps({ visible: false }); }} 修改Buttondiv );}复制代码叁 · 列表权限控制根据不同的权限配置展示不同的列表项效果展示权限配置使用对象roleObj的权限配置方案比if(){}else{}更简介直观const [roleArr, setRoleArr] useState([]);const roleObj {0: [],1: [address, operation],2: [name, age] };。。。Radio.GrouponChange{(e) setRoleArr(roleObj[e.target.value])} defaultValue{0} Radio value{0}展示全部RadioRadio value{1}不展示操作和地址RadioRadio value{2}不展示姓名和年龄RadioRadio.Groupdiv复制代码列表控制根据传过来的数组进行列表项的过滤 style{{ marginTop: 20 }} sizesmall dataSource{list} columns{columns.filter((item) !roleArr.includes(item.key))} pagination{{ ...pageConfig, total: total, onChange: changPage }} /复制代码肆 · 总结针对前期的痛点我们一一进行总结 完整代码[1]关于补丁在处理查询参数时我们对查询数据进行了搜索和分页的分类存储但是都保存在一个变量里如果后期加排序或者其他参数不会影响之前的逻辑可以在原有基础上进行扩展有效减少补丁的数量对弹窗参数数据的统一存储可以拓展弹窗的title或者其他属性不需要在添加state来打补丁直接增加modalProps属性即可关于线网把数据的加工都统一放在了业务逻辑层指index.js进行数据处理提供给其他组件相应的处理函数对弹窗组件进行柯里化处理不仅可以避免给列表传递非必要的参数减少组件的刷新还可以方便的跨级传递父级参数关于断线在进行权限的处理时我们并不需要存储单选框的值直接对数据进行处理即可(有的猿可能会存个state通过state去更新选中的value)❝写代码之前一定要让自己的思路清晰进行思维碰撞后的你开发起来会更小的得心应手❞最后期许每个项目组猿们写代码都有一个统一清晰规范的思路那无论你的换项目还是交接给其他人都是可以无缝衔接点个在看支持下
