运用思想东西来优化你的代码之 —— 奥卡姆剃刀
代码哲学
写代码的大佬好像都有一套自己的哲学思想,比如react 哲学可是哲学从古至今都是一种难以理解的学问,乃至大学学完有许多人不知道何为哲学,哲学讨论的究竟是什么,终极目标是什么,哲学之于人类究竟以为着什么,其实我关于这些问题也是一知半解,所以,以下有什么不对的地方尽请各位指出(轻点喷)咱们一同前进。
我设想咱们都是小白,或许你看完react 哲学后并不知道他究竟在表述什么,他的哲学思想究竟在推重什么,没关系咱们不是研究哲学,咱们是在用哲学东西来提升自己的代码写作才能。所以,以下的内容你会发现它将出奇的简略。就好像咱们与生俱来,可是别小看这种与生俱来的东西,他或许会帮助你更快的提升代码质量,当然你需求一直保持着用奥卡姆剃刀的思想来写代码。
什么是奥卡姆剃刀
奥卡姆剃刀是一个经典哲学的思想东西,这里咱们简略介绍一下,他最中心的思想便是如:“无必要,勿增实体”。这句话的中心思想并不是寻求朴实的简略,而是直观。其实这句话并不是一个严格意义上的办法论或许思想体系,而仅仅一个准则或许理念。总之便是他有一个原理,这条原理便是:假如人们能够以较少的东西行事,就不应该假定有更多的东西 —— 以上来源于网络
假如你想更深的了解奥卡姆剃刀,欢迎和我一同重视B站up主 —— 茂的模【科学杂谈】神挡杀神的奥卡姆剃刀
经过代码来理解奥卡姆剃刀
现在咱们会用最简略的例子来展现什么叫做如无必要,勿增实体:
import react,{useState} from 'react'
// 如无经验,满是实体
export default ()=>{
const [a,setA]= useState(1)
const [b,setB]= useState(2)
return <div>
<div>c={a+b}</div>
</div>
}
// 如无必要,勿增实体:
export default ()=>{
const a=1
const b=2
return <>
<div>c={a+b}</div>
</>
}
- 在 react 中假如不是必须得状况下咱们尽量削减 useState 的运用,useState 的运用会导致组件的重复烘托。
- 在写组件时要删去非必要标签,避免引起一些问题烘托功能上的问题。
当然以上代码其实不够具有说明性,因为实在太简略了以至于咱们觉得本就该如此,但其实咱们在实践的事务代码开发中会遇到许多这样的状况,而复杂的事务场景中咱们往往都不能很清楚的认识到这样会导致组件的重载以至于影响到页面的功能。
所以,咱们来模仿一个事务场景,让咱们的代码变得略微多起来:有这样一个页面,首次进入时咱们会经过路由获取到参数,然后经过一个默许用户和一个默许时刻来获取该时刻段内该用户的一些数据,一起能够切换用户,也能够切换时刻,那咱们再来看看如何实现 —— 如无必要,勿增实体
// 留意以下代码不能运转接口不行,也不想写 dom
import react,{useState} from 'react'
export default (props)=>{
const {size} = props
const [user,setUser] = useState('321312')
const [date,setDate] = useState('20230216')
const [list,setList] = useState([])
const getList = async(param) =>{
const {data:list,code,msg} = await Api.post('/api/getuser/something',param)
if(code !== 0){
console.log('msg:',msg)
return
}
setList(list)
}
useEffect(()=>{
if (!size) return
getList({size,user,date})
},[size,user,date])
// 以下代码假定点击修正用户就会获取一个"YYYYMMDDHHmm"格局的时刻
// 也能够选择到一个用户(小小偷一下懒)
return <>
<div onClick={setDate}>修正时刻</div>
<div onClick={setUser}>修正用户</div>
{ list.map(item=> <> {item} </>)}
</>
}
或许大多数大佬会觉得这便是正常的写法(或许有更好的写法)可是我刚从 vue 转过来的时分却是这样写的,并且大多数的小白或许也是这样(我常常在公司代码里边看到这样的写法)
// 如无经验,满是实体
......
return <>
<div onClick={(res)=>{
setDate(res)
getList({user,size,date:res})
}}>修正时刻</div>
<div onClick={(res)=>{
setUser(res)
getList({user:res,size,date})
}}>修正用户</div>
{ list.map(item=> <> {item} </>)}
</>
以上,我在推重什么呢?便是当需求获取数据的时分尽量经过 useEffect 来获取,不要手动的去获取(当然也会有特殊状况),为什么呢?这样做咱们写代码就不用去重视其他的东西,只要把有关的数据塞到依靠里即可。
当然还有种状况是我在实践事务中最常看到有人写的,便是
......
const [newsize,setNewsize] = useState(size)
const getList = async(user,date) =>{
const {data:list,code,msg} = await Api.post('/api/getuser/something',{
user,date,size: newsize
})
if(code !== 0){
console.log('msg:',msg)
return
}
setList(list)
}
useEffect(()=>{
getList(user,date)
},[user,date])
......
这样会呈现什么问题呢?geiList 里边用到的呼应式数据没有在 useEffect 里边显示的调用,也没有添加到依靠里边,首先最明显的问题是就算 newsize 发生变化 geiList 也不会履行,假如运用了 eslint 的话这里的依靠应该会报黄:getList 没有添加到依靠
用奥卡姆剃刀修正代码
在事务代码常常看见一些废话,比如说 if 句子满天飞,办法调用切来切去,分明两三句代码就能搞定的地方非得写得很复杂,为什么一定要运用奥卡姆剃刀来修正代码呢?或许说重构呢?其实我觉得就一句话,代码是用来给人看的,其实在芯片功能现已如此高的现在,你想经过一些简略的 if 句子就影响到机器运转速度现已是很难的了,所以他们关于功能的影响其实不大,影响最大的其实是重新去看这段代码的人。
修正之前
// 运用时
const res = await checkywxSign();
if (res.mediSignFlag) {
this.gotoPrescribePage();
}
if (!res.isExistCert) {
// 在优化的版本中现已做处理了,这里会经过这个呼应式数据弹窗处理
this.isExistCert = res.isExistCert;
}
// 导出时
export const checkywxSign = async (params) => {
const doctorId = wepy.getStorageSync('userId')
const {
data = '', code
} = await post('/api/doctor/health/api/doctor/getsignsignature', { doctorId });
let isExistCert = true;
if (code === 0 && data && !data.imgPath) {
let signing = false;
if (!!ywxUtil.existCert()) {
// 这一步在我优化的逻辑里边现已不运用也不会走到这个逻辑里边
} else {
isExistCert = false;
}
return { ywxSignFlag: false, mediSigning: signing, isExistCert };
}
if (code == 0 && data && !!data.imgPath) {
let signFlag = false;
let qrText = '';
if (!ywxUtil.existCert() || data.doctorOpenId != ywxUtil.getUserOpenId()) {
isExistCert = false;
} else {
signFlag = true;
if (params.ywxParam == 'wxQr') {
const showCodeRes = await wx.scanCode({
onlyFromCamera: true,
});
if (showCodeRes.result) {
qrText = showCodeRes.result;
}
} else {
wepy.navigateTo({ url: '/xxx/xxx/xxx' });
}
}
return { ywxSignFlag: signFlag, mediSigning: false, isExistCert, qrText };
}
if (code === 0 && !data) {
wepy.showModal({
title: '提示',
content: '请先同步',
showCancel: false,
confirmText: '确认',
success: function (res) {
if (res.confirm) {
// 同步办法
syncDoctor(() => checkywxSign());
}
},
});
return { ywxSignFlag: false, mediSigning: false };
}
};
修正之后
// 运用时
const signState = await checkSign();
if (signState) {
this.gotoPrescribePage()
}
// 导出时
export const checkSign = async () => {
const existCert = ywxUtil.existCert()
const userId = wx.getStorageSync('userId')
const {
data = '', code = ''
} = await post('/api/doctor/health/api/doctor/getsignsignature', { userId });
if (code !== 0) {
wx.showToast({
title: '体系过错',
icon: 'none'
})
return
}
if (!data || data == '' || data == null) {
wx.hideLoading();
wx.showModal({
title: '提示',
content: '请先同步',
showCancel: false,
confirmText: '确认',
success: (res) => {
if (res.confirm) {
// 同步办法
syncDoctor(checkSign);
}
}
});
return
}
if (!data.imgPath) {
wx.hideLoading();
// 新增功能不做比照
return
}
// 本地不存在证书
if (!existCert) {
wx.hideLoading();
downloadSing('本地不存在证书,是否需求下载?')
return
}
if (data.doctorOpenId != ywxUtil.getUserOpenId()) {
wx.hideLoading();
downloadSing('你签名的id与体系纷歧致,是否重新设置签名')
return
}
// 经过一切验证
return true
}
快说为什么要水文章
让咱们看了这么一篇没有干货的文章,我很伤心,不止透露出了我没有东西,还浪费了咱们时刻。可是我仍是想和咱们共享一下为什么要写这篇文章。
上班写代码许多时分咱们都是得过且过的,便是这块东西能运转就绝不会动他,可是在我看来这不仅仅是一种对事务不负责任的行为更是一种对自己不负责任的行为。于公司事务来说,假如你去重构了,那么你将是最了解这块事务的人,他人来了纷歧定能立刻上手,但你因为想重构他,不论有没有成功那你必定是最了解他的人,包括写出这些事务的人,因为这些事务也纷歧定是同一个人写的,可是你却从头看完了整个逻辑。关于咱们自己来说,咱们在众人面前树立了一个品牌或许说人设 —— 咱们手里边的代码必定不会很废物。
我想大多数人不会因为关于公司有什么好处就去做一些事情,那咱们说说为什么咱们做职场人要像做品牌一样。其实打工人和商品一样有许多特点都是你具备了才能更有价值,他人发现了,才更受欢迎。比如说:(价值)才能、(保价)诺言、稀有(掌握技能难度)等等
让更多的人(或许同事)了解了咱们是一个不会摆烂、是一个有才能的人、是一个会输出正能量的人往后,我想咱们就会越走越顺吧!!!