为什么写这篇文章我外包了Ant。跳槽到字节跳动的外包（字节跳动自研实在进不去，我只是个菜鸟），虽然我的简历有两年半的工作经验。但是培训班过了半年，去年年底才来到杭州。我在蚂蚁外包工作了7个月，无聊的生活促使我辞职。其实在这个大环境下（今天，2022年8月1日），互联网行业并不好过。阿里裁员40%，字节跳动招人少。换工作不是明智之举。但是我还是跳了，因为在Ant里面外包太枯燥了，基本上什么都学不到，因为没人理你。虽然工资没涨，但我也觉得还可以。毕竟我才工作半年两个月，有什么资格要求涨工资，要不环境不好，找份工作就好了。在此处输入字节。第一个要求是，我在做codereview的时候，发现自己在写代码的时候有很多不足之处，并不代表我有些地方不能写。就是代码写得好不好，代码的可维护性和可读性不是很好的情况。于是特意写了一篇（也是因为需求完了，太无聊了，旁边的大佬都在看，只能敲键盘）：记录下自己开发中可以改进的一些点代码，方便以后查看和分享对于刚接触前端的新手1.使用拦截数组的方式渲染页面。在我的要求中，我需要呈现一个描述列表。代码如下。在这个需求中，我需要动态判断客户是否有姓名来决定是否Renderthename。如果是这样写，我只需要判断：import{Descriptions,Tag}from'antd';importReactfrom'react';//假设只是用户返回的数据constuser={haveName:true,name:'Zhangxx',live:'浙江杭州',remark:'',}constApp:React.FC=()=>({user.haveName}{user.haveName&&{user.name}}{user.live}{user.remark});导出默认App;不过这种写法，如果描述列表显示的信息少一点，也无妨。如果描述列表中有更多信息，这个组件似乎不方便。而且，如果要在描述列表中显示标签、链接、表格等。这个组件看起来会更累。所以我提取了具体的列表信息，提高了组件的可读性和可维护性。具体如下：//descList.jsexportconstdescList=[{key:'haveName',value:'是否有名字',render(val){return{val}}},{key:'name',value:'name'},{key:'name',value:'address'},{key:'name',value:'个人签名',render(val){returnval？val:'该用户未填写个人签名'}},]//index.tsximport{descList}from'./descList.js'import{Descriptions}from'antd';importReactfrom'react';//假设只有用户返回数据constuser={haveName:true,name:'张xx',live:'浙江杭州',remark:'123',}constApp:React.FC=()=>{constdesc=useMemo(()=>{constcopyDesc=[...descList]if(obj.haveName){copyDesc.splice(1,1)}returncopyDesc},[obj])return(<描述title="用户信息">{desc.map((item)=>({item.render?item.render(user[item.key]):user[item.key]}))})};exportdefaultApp;通过这种方式改写，我只需要改写descList文件就可以修改显示的描述列表，而无需触及index.html中的逻辑代码。但是细心的朋友应该已经发现，如果我这样写，是无法判断haveName字段的，只能通过splice进行拦截或者过滤（这里只说明splice方式的问题）。这里splice其实有问题。从可读性的角度来说，如果你后面的同事改了代码，他第一眼不知道去掉哪个元素。从可维护性的角度来说，如果descList列表发生变化，如果索引截取的序号没有发生变化，那么页面显示的信息就是错误的。所以这里我们需要重写：constdesc=useMemo(()=>{constcopyDesc=[...descList]if(obj.haveName){copyDesc.splice(copyDesc.findIndex((e=>e.key==='name')),1)}returncopyDesc},[obj])被上面改写了，这样name项无论如何都会被拦截。2.去掉工程中的magicnumber在step组件中，通常会有很多节点。我们需要根据后台返回的数据返回一个status来提供他当前的信息。//假设后台返回的数据//passed0表示拒绝，1表示完成，2表示开始constnodes=[{key:'start',passed:1},{key:'manualapproval',passed:0},{key:'End',passed:2},]constApp:React.FC=()=>{constgetStatus=(passed)=>{if(passed===0){return'error'}elseif(passed===1){return'finish'}elseif(passed===2){return'process'}}return({nodes.map((item)=><步骤标题={item.key}status={getStatus(item.passed)}/>)})};上面我们判断通过返回对应的节点状态。但是如果函数不是自己写的，0、1、2这些数字别人是看不懂的。我们在代码中称它为幻数，所以需要重写：//定义一个映射关系constNodePassMap=newMap([\[0,'error],[1,'finish'],[2,'process'],]);//获取状态的函数可以直接改成constgetStatus=(passed)=>NodePassMap.get(node.Passed);console.log(getStatus(0))//'error'3.提供的枚举文件显示数字的含义还是上面的例子，但是有不同的场景，我们需要在传过来的时候显示一个特殊的图标is0://假设后台返回给我们的数据//Passed为0表示拒绝1表示完成，2表示开始constnodes=[{key:'start',passed:1},{key:'手动审批',passed:0},{key:'end',passed:2},]constApp:React.FC=()=>{constgetIcon=(passed)=>{if(passed===0){return{icon:}}return{}}return({nodes.map((item)=>)})};上面的代码我们不知道这里这个if判断中的0是什么意思，只能??问后台或者看前面的代码。但是如果我们添加一个枚举文件，就可以很好的解决这个问题：{return{icon:}}return{}}相信大多数人看到这个的时候都会显示这个图标，原来报错了。结语写到这里，这篇文章也算是结束了。其实文中的所有代码，相信在座的各位都能写出来。但是就是不知道应该怎么写。本文主要是教小白写出更漂亮的代码。大神，轻喷！
