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

85 天前
 zhengfan2016

看 java 味有感

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

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

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

5092 次点击
所在节点    React
52 条回复
zhengfan2016
85 天前
@ipwx 一般单纯能用 className 解决的,肯定不会分拆组件的。就算 tailwindcss 超长,也有 cva 这些好用的 tailwindcss 复用工具,像我需要分拆的都是属于两个组件 dom 层级不相同的组件。
NerbraskaGuy
85 天前
组件癖吧,之前遇到的一个老项目,里面公用组件就快百来个,有的点进去看还就十几行代码,要说删掉吧,组件之间互相嵌套还贼复杂。
kneo
85 天前
好像还是 java 味儿,没看出 react 味儿。
jqtmviyu
85 天前
不超过三处地方复用, 我宁愿 ctrl+c ctrl+v.

设计赶不上需求变化.

特别是那种某个日期后页面展示发生变化, 但还得兼容旧的数据, 我直接 cv, 复用是不可能复用的.
chenliangngng
85 天前
永远不要主动写继承,除非你接手的是写前端的 javaer[doge]
SayHelloHi
85 天前
复制 + 粘贴 上线能跑就行 😁
DICK23
85 天前
react 的代码风格就不适合继承写法
jiuhuicinv
85 天前
能出活就行了,怎么实现的不重要
jamesjammy061
84 天前
我一般是写一起,大了再拆出来。或者预期一开始就能预料到是分开写的,我也会先写一起,写的一定程度再拆
angrylid
84 天前
我难道穿越了?
React 前几年的复用方式是 Mixins 和 HOC ,近些年是 Hooks ,到底哪个世界线的 React 依赖继承来复用。
ty29022
84 天前
Sonnet3.7 幼稚的碳基生物
sjhhjx0122
84 天前
拆成互不关联的功能还行,我觉得最完美的是底层单一功能或者只有样式的 Headless 组件,中间一层基于 Headless 组合的功能组件,最后写一个大而且全的脏业务组件
otakustay
84 天前
真正的 react 难道不是<BaseCard customize={<ACard />}>这样吗,你这 extends 的不够 react
ragnaroks
84 天前
过度设计,如果时间充裕倒也不是坏事,但是往往最缺少的就是时间
leokun
84 天前
我是把不一样的地方用 children 或者 props 传进去,应该是最直接的方法,而且也没那么烂
ipwx
84 天前
@ltaoo1o 那还是套娃组合吧(叹气
qingyingwan
84 天前
看起来感觉是工作经验比较少的前端。我当年 react 一两年经验的时候也经常纠结这种代码细节。现在做后端了,也遇到过这种纠结细节的,各种规则一大堆,代码 pr 要一周。结果核心的服务性能,延迟,稳定性,可观察性,架构设计都是依托。
tonytonychopper
84 天前
我一般会写一个 Card ,视情况在 Card 提供 props 做差异化
gouflv
84 天前
前端组件早就不是 oop 的思维了
twofox
84 天前
我实在是太想吐槽公司的项目了。我说不上它到底是 vue 味还是 react 味,但可以肯定一股子屎味

前端用 vben admin 2.x 当脚手架

一个 vue 项目,学 react 封装了一大堆 hook 。配合 vue 稀烂的 ts 支持,用的实在是太难受了

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

https://yangjunhui.monster/t/1118463

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

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

© 2021 V2EX