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

1. vue项目重构到react项目

一、核心语法重构

1）模板语法重构（Vue template → React JSX）

Vue

<template><div><el-card v-if="showCard">证书列表</el-card><el-table:data="certList"><el-table-column v-for="col in columns":key="col.key":label="col.label":prop="col.prop"/></el-table></div></template>

React（JSX）

import{Card,Table}from'antd'functionCertList(){return(<div>{showCard&&<Card title="证书列表"/>}<Table dataSource={certList}columns={columns}rowKey="id"/></div>)}

2） 响应式状态重构

Vue3

<script setup>import{ref,reactive}from'vue'constcertList=ref([])// 证书列表constformData=reactive({})// 表单</script>

ref用来创建：简单类型的响应式数据（数字、字符串、布尔、数组）

constnum=ref(0)conststr=ref('abc')constbool=ref(true)constcertList=ref([])// 数组也能用 ref

使用时要加 .value

num.value=100

reactive 用来创建：对象 / 复杂类型的响应式数据

constformData=reactive({name:'证书1',status:'有效'})

不用 .value

formData.name='证书2'

vue2的data中的数据相当于react的useState

React

import{useState}from'react'functionCertPage(){const[certList,setCertList]=useState([])// 证书列表const[formData,setFormData]=useState({})// 表单}

3）生命周期重构

Vue3

<script setup>import{onMounted}from'vue'onMounted(()=>{getCertList()// 页面加载获取证书列表})</script>

onMounted：组件挂载到页面 DOM 后立刻执行

React

import{useEffect}from'react'useEffect(()=>{getCertList()// 获取证书列表},[])// 空数组 = 挂载执行

4）计算属性重构

Vue

<script setup>import{computed}from'vue'constvalidCertNum=computed(()=>{returncertList.filter(item=>item.status==='有效').length})</script>

React

import{useMemo}from'react'constvalidCertNum=useMemo(()=>{returncertList.filter(item=>item.status==='有效').length},[certList])

Vue computed ≈ React 的 useMemo Hook
它们的作用完全一致：

• 基于依赖计算新值
• 自动缓存
• 依赖不变不会重复计算

5）事件绑定重构

Vue

<el-button @click="handleCreate">新建证书</el-button>

React

<Button onClick={handleCreate}>新建证书</Button>

6）条件渲染重构

Vue

<el-tag v-if="item.status === '有效'"type="success">有效</el-tag><el-tag v-elsetype="danger">已过期</el-tag>

React

{item.status==='有效'?<Tag color="success">有效</Tag>:<Tag color="danger">已过期</Tag>}

7）列表渲染重构

Vue

<el-table-column v-for="col in columns":key="col.key":label="col.label"/>

React

columns={columns.map(col=>({title:col.label,dataIndex:col.prop,key:col.key}))}

二、路由重构

Vue3 Router

// 引入 Vue Routerimport{createRouter,createWebHistory}from'vue-router'// 引入你的页面组件importCertListfrom'@/views/CertList.vue'importCertApplyfrom'@/views/CertApply.vue'// 你的路由配置constroutes=[{path:'/cert/list',component:CertList},{path:'/cert/apply',component:CertApply}]// 创建路由实例constrouter=createRouter({history:createWebHistory(),// 路由模式routes// 传入路由配置})// 导出路由exportdefaultrouter

React Router

import{Routes,Route}from'react-router-dom'<Routes><Route path="/cert/list"element={<CertList/>}/><Route path="/cert/apply"element={<CertApply/>}/></Routes>

三、父子组件传值重构

1）父 → 子 传值（数据往下传）

Vue2 / Vue3 写法

父组件

<template><Child:title="title":list="list"/></template><script>exportdefault{data(){return{title:'证书列表',list:[1,2,3]}}}</script>

子组件

<script>exportdefault{props:['title','list']// 接收}</script><template><div>{{title}}</div></template>

React 写法（完全对应）

父组件

importChildfrom'./Child'functionParent(){consttitle='证书列表'constlist=[1,2,3]return<Child title={title}list={list}/>}

子组件

functionChild(props){const{title,list}=propsreturn<div>{title}</div>}

对比：

• Vue：:title=“title”
• React：title={title}
• 接收：Vue props / React props

2）子 → 父 传值（数据往上传 / 触发事件）

Vue：$emit

子组件

<button @click="sendToParent">发送</button><script>exportdefault{methods:{sendToParent(){this.$emit('success','证书申请成功')}}}</script>

父组件

<Child @success="handleSuccess"/><script>exportdefault{methods:{handleSuccess(msg){console.log(msg)}}}</script>

React：回调函数（等价于 $emit）

子组件

exportdefaultfunctionChild(props){// 子组件自己的数据constchildData='我是子组件的证书ID：123456'constsendToParent=()=>{// 关键：调用父传过来的函数，把值塞进去props.onSendData(childData)}return(<div><h3>子组件</h3><button onClick={sendToParent}>点我传给父</button></div>)}

简洁写法：

// Child.jsxexportdefaultfunctionChild({onSendData}){constsendToParent=()=>{onSendData('证书申请成功')}return<button onClick={sendToParent}>发送</button>}

父组件

import{useState}from'react'importChildfrom'./Child'exportdefaultfunctionParent(){// 用来接收子组件传过来的值const[msgFromChild,setMsgFromChild]=useState('')// 关键：父提供回调函数，给子调用consthandleChildData=(data)=>{console.log('子传过来的值：',data)setMsgFromChild(data)}return(<div><h1>父组件</h1><p>来自子组件：{msgFromChild}</p>{/* 把回调函数传给子 */}<Child onSendData={handleChildData}/></div>)}

四、表单重构

Vue + Element

<el-form:model="form"><el-form-item label="证书名称"><el-input v-model="form.name"/></el-form-item></el-form>

React + Element

<Form model={form}><Form.Item label="证书名称"><Input value={form.name}onChange={(value)=>setForm({...form,name:value})}/></Form.Item></Form>

• Vue v-model 是语法糖，自动帮你写了 value + input
• React 没有 v-model，所以要自己写 value + onChange

五、样式重构

Vue（scoped）

<style scoped>.cert-box{background:#fff}</style>

加了 scoped → 样式只作用在当前组件，不会污染其他组件

React（CSS Modules）

.box{color:red;}

importstylesfrom'./Demo.module.css'functionDemo(){return<div 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，请求建立连接；
第二次：服务端回SYN+ACK，同意并确认收到；
第三次：客户端发ACK，确认收到服务端同意，连接建立。

为什么是三次？不能两次？
如果两次握手：
服务端收到 SYN 就直接建立连接、分配资源，但客户端可能没收到服务端的 SYN+ACK，客户端不建立连接，服务端却一直维持连接浪费资源，还会导致失效报文段问题。
三次握手能双向确认收发都正常，保证连接可靠。

4. 本地缓存

接口数据缓存（LocalStorage）

// 缓存接口数据 10 分钟exportasyncfunctiongetList(){constcache=localStorage.getItem('listCache');if(cache){const{data,time}=JSON.parse(cache);if(Date.now()-time<10*60*1000){returndata;}}constres=awaitfetch('/api/list').then((res)=>res.json());localStorage.setItem('listCache',JSON.stringify({data:res,time:Date.now()}));returnres;}