CodeQualityTier2-ReusableCode

)}exportdefaultReact.memo(NewsList)2、接口调用接口调用有两部分可以复用：接口请求和响应的通用处理。具体接口的调用。3、接口请求和响应的通用处理在调用接口时，往往会做一些通用的处理。例如，对于前后端分离的网站，必须在接口的请求头中添加token来标识用户。当接口报错时，应该将错误码转换成用户友好的错误信息。使用axios来处理：//请求拦截器axios.interceptors.request.use(...)//响应拦截器axios.interceptors.response.use(...)4.具体接口的调用代码一般会是放在一个文件中，比如service.js：exportconstfetchList=...exportconstfetchDetail=...exportconstcreateItem=...exportconstupdateItem=...exportconstdeleteItem=...接口调用，还有加载状态管理、防抖、节流、错误重试、缓存等场景。React可以使用useRequest，Vue也有类似的轮子。5.业务流程许多业务流程都是相似的，可以重复使用。比如管理后台列表页面的业务流程类似这样：进入页面时，获取列表数据。点击搜索按钮，根据当前查询条件获取列表数据。单击分页以获取指定页面的列表。自定义钩子（Vue3中的组合API）支持内部状态管理和生命周期。因此，可以使用钩子来封装业务流程。下面是用Vue3的组合API封装管理后台列表页的实现：}interfaceReturn{searchConditions:RecordresetConditions:()=>voidpagination:RecordfetchList:(isReset:boolean)=>voidlist:RefisLoading:Ref}functionuseList>({url,searchConditions:initCondition}:Params):Return{constsearchConditions=reactive({...initCondition})常量分页=reactive({pageSize:10})constlist=ref([])asRefconstisLoading=ref(false)asRef//isReset为true以搜索第一页。constfetchList=(isReset:boolean=false):void=>...//进入页面onMounted(()=>{fetchList()})return{searchConditions,pagination,fetchList,list,isLoading,}}exportdefaultuseList推荐一个hooks工具库：ahooks。Vue版本：ahooks-vue。6.数据一些数据意味着它会在多个地方使用。如：登录用户信息、权限数据。这些数据可以使用状态管理库进行管理。React状态管理一般使用Redux、Mobx或ContextAPI。Vue一般使用Vuex。7.工具功能工具功能与业务无关。比如：格式化日期，生成唯一id等。Lodash和moment.js包括很多实用方法。总结要编写可重用的代码，本质是识别和分离出可重用的部分。前端可以从UI展示、接口调用、业务流程、数据、实用函数中找到可复用的部分。下一级代码质量就是：可重构代码。我将在下一篇文章中介绍。金伟强上一篇精彩文章推荐：谈代码质量-《学得会，抄得走的提升前端代码质量方法》前言第五层代码质量-刚刚实现的功能第四层代码质量-健壮的代码第三层代码质量-可读性代码《云荐大咖》是腾讯云家社区精品内容栏目。云推荐官特邀行业领袖，聚焦前沿技术落地与理论实践，持续为您解读云时代热点技术，探索行业发展新机遇。点击一键订阅，我们会定期为您推送优质内容。