web前端知识点总结2026（六）

web前端知识点总结2026六1. vue项目重构到react项目一、核心语法重构1模板语法重构Vue template → React JSX2 响应式状态重构3生命周期重构4计算属性重构5事件绑定重构6条件渲染重构7列表渲染重构二、路由重构三、父子组件传值重构四、表单重构五、样式重构2. Webpack 和 Vite 的核心差异3. TCP三次握手4. 本地缓存1. vue项目重构到react项目一、核心语法重构1模板语法重构Vue template → React JSXVuetemplatedivel-card v-ifshowCard证书列表/el-cardel-table:datacertListel-table-column v-forcol in columns:keycol.key:labelcol.label:propcol.prop//el-table/div/templateReactJSXimport{Card,Table}fromantdfunctionCertList(){return(div{showCardCard title证书列表/}Table dataSource{certList}columns{columns}rowKeyid//div)}2 响应式状态重构Vue3script setupimport{ref,reactive}fromvueconstcertListref([])// 证书列表constformDatareactive({})// 表单/scriptref用来创建简单类型的响应式数据数字、字符串、布尔、数组constnumref(0)conststrref(abc)constboolref(true)constcertListref([])// 数组也能用 ref使用时要加 .valuenum.value100reactive 用来创建对象 / 复杂类型的响应式数据constformDatareactive({name:证书1,status:有效})不用 .valueformData.name证书2vue2的data中的数据相当于react的useStateReactimport{useState}fromreactfunctionCertPage(){const[certList,setCertList]useState([])// 证书列表const[formData,setFormData]useState({})// 表单}3生命周期重构Vue3script setupimport{onMounted}fromvueonMounted((){getCertList()// 页面加载获取证书列表})/scriptonMounted组件挂载到页面 DOM 后立刻执行Reactimport{useEffect}fromreactuseEffect((){getCertList()// 获取证书列表},[])// 空数组 挂载执行4计算属性重构Vuescript setupimport{computed}fromvueconstvalidCertNumcomputed((){returncertList.filter(itemitem.status有效).length})/scriptReactimport{useMemo}fromreactconstvalidCertNumuseMemo((){returncertList.filter(itemitem.status有效).length},[certList])Vue computed ≈ React 的 useMemo Hook它们的作用完全一致基于依赖计算新值自动缓存依赖不变不会重复计算5事件绑定重构Vueel-button clickhandleCreate新建证书/el-buttonReactButton onClick{handleCreate}新建证书/Button6条件渲染重构Vueel-tag v-ifitem.status 有效typesuccess有效/el-tagel-tag v-elsetypedanger已过期/el-tagReact{item.status有效?Tag colorsuccess有效/Tag:Tag colordanger已过期/Tag}7列表渲染重构Vueel-table-column v-forcol in columns:keycol.key:labelcol.label/Reactcolumns{columns.map(col({title:col.label,dataIndex:col.prop,key:col.key}))}二、路由重构Vue3 Router// 引入 Vue Routerimport{createRouter,createWebHistory}fromvue-router// 引入你的页面组件importCertListfrom/views/CertList.vueimportCertApplyfrom/views/CertApply.vue// 你的路由配置constroutes[{path:/cert/list,component:CertList},{path:/cert/apply,component:CertApply}]// 创建路由实例constroutercreateRouter({history:createWebHistory(),// 路由模式routes// 传入路由配置})// 导出路由exportdefaultrouterReact Routerimport{Routes,Route}fromreact-router-domRoutesRoute path/cert/listelement{CertList/}/Route path/cert/applyelement{CertApply/}//Routes三、父子组件传值重构1父 → 子 传值数据往下传Vue2 / Vue3 写法父组件templateChild:titletitle:listlist//templatescriptexportdefault{data(){return{title:证书列表,list:[1,2,3]}}}/script子组件scriptexportdefault{props:[title,list]// 接收}/scripttemplatediv{{title}}/div/templateReact 写法完全对应父组件importChildfrom./ChildfunctionParent(){consttitle证书列表constlist[1,2,3]returnChild title{title}list{list}/}子组件functionChild(props){const{title,list}propsreturndiv{title}/div}对比Vue:title“title”Reacttitle{title}接收Vue props / React props2子 → 父 传值数据往上传 / 触发事件Vue$emit子组件button clicksendToParent发送/buttonscriptexportdefault{methods:{sendToParent(){this.$emit(success,证书申请成功)}}}/script父组件Child successhandleSuccess/scriptexportdefault{methods:{handleSuccess(msg){console.log(msg)}}}/scriptReact回调函数等价于 $emit子组件exportdefaultfunctionChild(props){// 子组件自己的数据constchildData我是子组件的证书ID123456constsendToParent(){// 关键调用父传过来的函数把值塞进去props.onSendData(childData)}return(divh3子组件/h3button onClick{sendToParent}点我传给父/button/div)}简洁写法// Child.jsxexportdefaultfunctionChild({onSendData}){constsendToParent(){onSendData(证书申请成功)}returnbutton onClick{sendToParent}发送/button}父组件import{useState}fromreactimportChildfrom./ChildexportdefaultfunctionParent(){// 用来接收子组件传过来的值const[msgFromChild,setMsgFromChild]useState()// 关键父提供回调函数给子调用consthandleChildData(data){console.log(子传过来的值,data)setMsgFromChild(data)}return(divh1父组件/h1p来自子组件{msgFromChild}/p{/* 把回调函数传给子 */}Child onSendData{handleChildData}//div)}四、表单重构Vue Elementel-form:modelformel-form-item label证书名称el-input v-modelform.name//el-form-item/el-formReact ElementForm model{form}Form.Item label证书名称Input value{form.name}onChange{(value)setForm({...form,name:value})}//Form.Item/FormVue v-model 是语法糖自动帮你写了 value inputReact 没有 v-model所以要自己写 value onChange五、样式重构Vuescopedstyle scoped.cert-box{background:#fff}/style加了 scoped → 样式只作用在当前组件不会污染其他组件ReactCSS Modules.box{color:red;}importstylesfrom./Demo.module.cssfunctionDemo(){returndiv className{styles.box}我是私有化样式/div}2. Webpack 和 Vite 的核心差异1启动方式不同Webpack打包型启动时必须把所有代码打包成一个 / 多个 bundle项目越大打包越慢启动越慢先打包再给浏览器运行Vite原生 ESM 按需加载启动时不打包直接启动开发服务浏览器请求哪个文件再编译哪个文件秒启动无论项目多大2 热更新HMR速度不同Webpack改一个文件 → 重新打包相关模块项目大了热更新很慢Vite改一个文件 → 只重新请求这个文件无论项目多大热更新几乎瞬间生效3底层技术差异Webpack使用 CommonJS / 模块化打包启动时做全量依赖分析、编译、打包适合生产环境但开发环境慢Vite基于浏览器原生 ES Modules (ESM)开发环境用 esbuild 预构建极快生产环境用 Rollup 打包开发极快生产稳定4应用场景用 Webpack 的场景老项目需要非常复杂的自定义打包逻辑IE 兼容要求高用 Vite 的场景新项目Vue3 / React强烈推荐想要启动快、热更新快不想配复杂的 webpack现代浏览器环境99% 公司后台系统都满足3. TCP三次握手第一次客户端发SYN请求建立连接第二次服务端回SYNACK同意并确认收到第三次客户端发ACK确认收到服务端同意连接建立。为什么是三次不能两次如果两次握手服务端收到 SYN 就直接建立连接、分配资源但客户端可能没收到服务端的 SYNACK客户端不建立连接服务端却一直维持连接浪费资源还会导致失效报文段问题。三次握手能双向确认收发都正常保证连接可靠。4. 本地缓存接口数据缓存LocalStorage// 缓存接口数据 10 分钟exportasyncfunctiongetList(){constcachelocalStorage.getItem(listCache);if(cache){const{data,time}JSON.parse(cache);if(Date.now()-time10*60*1000){returndata;}}constresawaitfetch(/api/list).then((res)res.json());localStorage.setItem(listCache,JSON.stringify({data:res,time:Date.now()}));returnres;}