最近我转到了新的业务线开发,面临着需求繁多和工期紧张的压力,常常被指责开发速度慢、效率低下。随着时间的推移,这让我感到烦躁。于是,我决定放弃一些原则,提升代码编写的速度,反正都是一锤子买卖的代码。结果,我被指责的次数减少了,心情变得愉快,效率明显提升,甚至得到了表扬。
我彻底放飞自我,开始无原则编程,追求"能跑就行"的理念。这样做让我烦恼少了,陪伴孩子的时间多了,颈椎也得到了缓解。遇到问题时,我会向 AI 寻求帮助,无论是处理数据还是转换接口,一切都变得简单而美好。
然而,随着时间的推移,我开始感到一阵迷茫:这真的是我想要的工作方式吗?这样的工作似乎谁都能做到。
一、变量语义化浪费时间
变量语义化的主要目的是提高代码的可读性和可维护性,使得其他开发者(或未来的自己)能够更容易理解代码的目的和逻辑。
现在AI都可以根据上下文分析代码了,那还有必要花费时间进行语义化的变量命名呢?这似乎显得有些浪费时间。
举个例子,假设一个页面中有四个标签页,每个标签页都有一个表格。在之前,我会根据每个表格的内容为数据变量进行语义化命名,而现在我直接这样定义:
js
const [data1,setData1] = useState([]);
const [data2,setData2] = useState([]);
const [data3,setData3] = useState([]);
const [data4,setData4] = useState([]);
这种做法虽然节省了时间,但是否会影响代码的可读性和可维护性呢?
二、只用useState
在 React 中,useState
和 useRef
都可以用来定义变量。虽然我明白使用 useState
定义的变量会在更新时触发组件重新渲染,但我在想,这对性能的影响到底有多大?如果将来产品反馈页面反应慢,我可以再把那些与渲染无关的变量改为 useRef
来进行优化。既然如此,开发过程中何必那么在意区分与渲染无关的变量呢?
三、复用就是复制
你这个页面的功能和另一个页面的功能差不多,只是逻辑上有些不同,复用一下代码应该能很快完成。
查看了另一个页面的代码,发现逻辑写得很死,要复用的话,还得提取公共逻辑并做兼容判断。
考虑到工期很紧,想想万一修改后导致另一个页面无法使用,还是直接把另一个页面的代码复制到自己页面中,进行改造就行。这就是复用了。
四、组件化开发
在页面开发过程中,会遇到相似的DOM结构。以往习惯都会把这部分抽取从成为一个组件,并根据组件属性渲染不同DOM结构。
现在也懒得抽取了,遇到相似的DOM结构,直接复制黏贴更改不同的地方,这样效率更高,也不用去设计组件属性,浪费时间。
五、公共组件开发
在以前我会把升级为公共组件的相关代码,单独新建一个专门的文件,并为每个组件单独编写样式文件。并使用TypeScript 给组件属性定义,让同事在使用过程中,就知道组件该传什么属性,属性值时候错误直接提醒。然而,为了提升开发效率,我现在选择在一个文件中直接编写所有组件的代码,这样查找变得更快捷,只需使用 Ctrl + F 就能快速定位。
如果其他人需要引用我的组件,只需在文件中 export
相应的组件,并分享文件的相对路径即可。
如果你提到要把这个组件提取到公共组件区域,抱歉,我现在赶工期,没时间处理这个。
如果你想为这个组件添加一些定制化的功能,欢迎直接在我的代码中修改,但请注意,修改后产生的 BUG 需要你自己负责。
六、待续
其实开发业务代码,如果只是为了完成任务,去写代码,速度还是蛮快,不考虑代码的性能和维护性,不去从整个项目去思考代码结构如何设计,就会省下很多很多时间,效率自然提高了,不知各位掘友,还有什么妙招呢?