反思,我写的前端的 react 味是不是太重了

84 天前
 zhengfan2016

看 java 味有感

假如前端有如下页面组件 a 和 b ,a 和 b 中有一部分并集的功能,比如 card 的边框,标题什么的

我一般会拆成 BaseCard ,ACard ,BCard 三个组件来写,包括 ts 也是,interface BaseCardProps ,然后被另外两个组件继承。我自认为写到还算优雅,组件分拆出来每个文件代码量一般控制在 100 行内,顶多 300 行出一点。

行数超 300 的话,后续有时间整理代码我一般会按不同功能细化继续拆分出组件。看到有人说 javaer 写点简单功能就先写十几个文件然后到处继承,每个类代码很少,难道我一直以来坚持的写法是错误的吗,all-in-one 全堆一起才是正确写法?

5088 次点击
所在节点    React
52 条回复
hwdq0012
84 天前
好代码是重构的,一般按经验设计就好,不用过度设计,按需要重构即可, 主干设计抓好,git flow 抓好,可快速重构,先做一个垃圾出来, 况且 mvvm 能垃圾到哪去( react 是 mvvm 还是 mvc 忘记了
crysislinux
84 天前
我倾向于共享逻辑而不是继承组件。
Uncertainty
84 天前
写 react 天天被 上面 diss ,哎
herm2s
84 天前
以偏概全是最不可取的,你说的那种十几个文件到处继承的写法,只有时间太多的人才会那么干,都是干开发的心里清楚,自己写那点垃圾代码还没点数吗
kxg3030
84 天前
曾几何时 写代码前 我会考虑目录结构 代码分层 各种设计模式也算用的很溜 但现在回过头去看 又有什么实际的意义呢(仅自己的看法) 熵增是避免不了的

代码规范 可读性那已经是很久以前的事情了 现在我只想一把梭 看到结果
zhengfan2016
84 天前
@crysislinux 纯逻辑共享一般用 hook ,这个主要是样式和 dom 结构上的共享
serco
84 天前
为啥你会觉得除了十几个文件继承,就只剩下全堆在一起的写法了。

继承现在不都丢得差不多了吗,都是 mixin composition
zhengfan2016
84 天前
@hwdq0012 react 和 vue 是 mvvm ,好像只有 thinkphp 等那些传统后端渲染才是 mvc
InkStone
84 天前
如果没有哪个地方需要以 BaseCard 作为通用去访问这两个组件,那不建议以 is-a 的语义做抽象。如果有的话,也优先使用 interface (我不熟悉 ts 的 interface 语义,不知道是不是跟 Java 一样),interface 用不了再考虑继承。
wangtian2020
84 天前
我不拆,你越是想把耦合的东西拆开就越发现自己在浪费时间。页面逻辑本来就是耦合的,代码为什么要解耦,根本解不出来,左手倒右手的解耦没意义。
shintendo
84 天前
感觉就是过度设计强迫症,跟 react 关系不大
ipwx
84 天前
成熟的组件库,card 一般也没 N 个。

如果你需要 N 个 card ,不如想想你是否有这么多种风格非常不一样的 card 。能不能用参数解决
zy0829
84 天前
@Uncertainty 为啥
bler
84 天前
我的建议是有个大致的模块继承关系就行,别在基类放太多东西,就算 A,B card 有重复的定义也行,避免到时候又出现一个 C Card 但是不需要 base card 中的某一个属性。我之前写代码就是这样,写的太细了,考虑的太多了,尤其是项目从 0 开始的时候,有一个大致的继承关系就行,别考虑太细,扩充容易,但是拆分功能难,人无法考虑东西特别完整,留着扩充的接口,写重复代码无所谓,以完成任务为主,后续项目功能完善了,再考虑提取公共部分的内容
136475688
84 天前
组合优于继承。
RRRSSS
84 天前
关键是拆完之后,如果之后想要添加个 props ,还要全盘考虑兼容已经用了这个组件的页面。

我的意思是,如果是业务页面,怎么简单怎么来吧。

业务逻辑用 hook 复用

样式组件基本现在都有组件库吧,再封装一些针对业务的组件(Title 、Card 什么的)
crysislinux
84 天前
@zhengfan2016 共享组件结构我倾向于拆开搞几个组件来组合,共性不是很大我倾向于各搞各的。
ltaoo1o
84 天前
@ipwx 多年经验,拆成 N 个是最优解。加参数解决,随着参数的增加,到后面一定会出现避免影响其他组件,复制一份或重写一个。
wu67
84 天前
个人经验, 相似界面的业务组件, 不写成一个. 相似的数据逻辑, 写成函数.
接手过最离谱的一次💩山, 一个弹窗表单组件 7 个页面用到, 改一个地方, 查 7 个页面有没有改错...
paopjian
84 天前
基础组件可以拆细点, 但是定了型最好就别改了
我是宁愿复制一份给新需求, 也不敢去再改已上线的功能, 越想着适用各种场景, 未来要细调的地方越多. 麻烦的一点就是如果要统一加什么功能还得一个个去改.

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://yangjunhui.monster/t/1118463

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX