企业官网建设流程全解析

asp网站整站下载器,全屋定制设计培训哪里有,楚雄市住房和城乡建设局网站,微信开放平台注销前言 工作这么多年#xff0c;一直用的都是vue#xff0c;对vue框架也最熟悉#xff0c;但最近想深入学习react#xff0c;之前也学过#xff0c;只懂一点皮毛#xff0c;对很多写法还是不理解#xff0c;我就在想既然我比较熟悉vue#xff0c;那能不能设计一份react和…前言工作这么多年一直用的都是vue对vue框架也最熟悉但最近想深入学习react之前也学过只懂一点皮毛对很多写法还是不理解我就在想既然我比较熟悉vue那能不能设计一份react和vue的转化总结这样用理解vue的方式来学习react那就事半功倍了。现在AI这么方便我就把我的需求说给chatGPTchatGPTchatGPT了他帮我设计了一份 VueVue开发者 →ReactReact转化总结与对照表和一份学习计划。真的一目了然特别好理解在上周末我根据这两份计划很快的上手了react框架也顺利完成一个小型的react项目这次没有一知半解虽然AI可以帮我写代码但我们自己还是得掌握不然可能连代码都看不懂怎么去进行调试呢AI帮我们写90%那剩下10%就要自己来了AI真的很好用它可以帮助我们快速学习任何我们想学习的还是使用最简单易上手的方式以下就是对照表以及学习计划了希望对想快速上手react的小伙伴有点借鉴意义核心思想对比Vue使用模板HTML-like template自动依赖追踪的响应式系统指令系统v-if / v-for / v-model双向绑定常见更“框架化”封装度高ReactUI f(state) 的函数式思想使用 JSX模板JS融合没有自动依赖追踪需要手动声明useEffect单向数据流更灵活、更偏底层API 对照表核心 API 对照VueReact说明data()useState声明组件状态computeduseMemo计算属性watchuseEffect监听值变化或模拟生命周期方法methods普通函数不需要特殊 APIref()useRefDOM 或变量引用provide / injectcreateContext useContext跨组件传递数据v-modelonChange useState双向绑定自己实现v-ifJS 表达式条件渲染{ condition Component / }v-forarr.map()列表渲染组件通信propsprops完全一致子组件事件emit父传入回调函数回调作为 props生命周期迁移Vue → React 生命周期对照表VueReactonMounteduseEffect(() {}, [])onUpdateduseEffect(() {})onUnmounteduseEffect(() return cleanup, [])onActivated无需要自定义onDeactivated无需要自定义beforeMount / beforeUpdate无通常不需要示例Vue → React 生命周期对比Vuescript setup onMounted(() console.log(mounted)) onUnmounted(() console.log(unmounted)) /scriptReactuseEffect(() { console.log(mounted); return () console.log(unmounted); }, []);状态管理迁移Vue → React 状态管理选择VueReact 等价方案特点PiniaZustand写法最像轻量好用推荐VuexRedux Toolkit官方推荐、企业级composables自定义 Hooks逻辑复用方式几乎一样reactive()useState/useReducer响应式状态Zustand最适合 Vue 开发者Zustand 使用方式类似 Pinia推荐入门 React 状态管理就用它。示例Zustand vs PiniaPiniaexport const useUserStore defineStore(user, { state: () ({ name: Echo }), actions: { setName(name) { this.name name } } })Zustandconst useUserStore create((set) ({ name: Echo, setName: (name) set({ name }), }));几乎一模一样。路由迁移Vue Router → React Router对照表Vue RouterReact Routerroutes 数组RoutesRoute//Routesrouter.push()useNavigate()获取参数useParams()路由守卫自定义鉴权组件包裹 RouteVue 路由const routes [ { path: /user/:id, component: User } ]React 路由Routes Route path/user/:id element{User /} / /Routes读取参数const { id } useParams()项目结构对照Vue 项目结构src/ components/ views/ store/ router/ composables/ assets/React 推荐结构src/ components/ # 公共组件 pages/ # 页面级组件 hooks/ # 自定义 Hooks store/ # 状态管理Zustand / Redux router/ # 路由定义 services/ # API 请求封装 assets/思维模型转化总结1. 模板 → JSX最大的差异Vuev-ifokhello/v-ifReact{ok divhello/div}2. 自动响应式 → 显式依赖声明Vue 自动追踪React 必须写依赖数组3. 逻辑复用方式变化Vue compositions → React 自定义 Hooks4. 组件通信完全一致props但事件改为父传回调函数5. React 更纯粹、更 JavaScript 化少魔法、少黑盒、更多掌控权。学习计划适合 Vue 开发者 阶段 1核心理念与基础 JSX⭐ 核心目标理解 React 哲学UI f(state)能用 JSX 编写组件、列表、事件✅ 实战 1Hello React 计数器1. 新建项目Vitenpm create vitelatest react-basic --template react cd react-basic npm install npm run dev2. 编写一个计数器App.jsximport { useState } from react; export default function App() { const [count, setCount] useState(0); return ( div style{{ padding: 20 }} h1计数器/h1 p当前值{count}/p button onClick{() setCount(count 1)}增加/button /div ); } Vue 对照script setup const count ref(0) /script button clickcount{{ count }}/button 实践任务写一个从 1 增加到 100 的进度条动画写一个列表渲染组件todoList 阶段 2Hooks 深入⭐ 核心要点useStateuseEffect替代 watch / 生命周期useMemo / useCallback性能useRef替代 Vue的模板 ref自定义 hooks对 Vue 用户最重要✅ 实战 2useEffect 生命周期模拟Vue → React 生命周期对照VueReactonMounteduseEffect(() {}, [])onUpdateduseEffect(() {})onUnmountedreturn () {}例子监听窗口大小import { useState, useEffect } from react; export default function WindowSize() { const [size, setSize] useState({ w: window.innerWidth, h: window.innerHeight }); useEffect(() { const onResize () { setSize({ w: window.innerWidth, h: window.innerHeight }); }; window.addEventListener(resize, onResize); return () window.removeEventListener(resize, onResize); }, []); return div窗口大小{size.w} x {size.h}/div; }✅ 实战 3自定义 Hook重要Vue 组合式 API 与 React 自定义 hook 是一样的概念。useFetch.jsimport { useState, useEffect } from react; export function useFetch(url) { const [data, setData] useState(null); const [loading, setLoading] useState(true); useEffect(() { fetch(url) .then((r) r.json()) .then((json) { setData(json); setLoading(false); }); }, [url]); return { data, loading }; }使用它import { useFetch } from ./useFetch; export default function UserList() { const { data, loading } useFetch(https://jsonplaceholder.typicode.com/users); if (loading) return p加载中.../p; return ( ul {data.map((u) li key{u.id}{u.name}/li)} /ul ); } 实践任务写一个useLocalStorage(key, defaultValue)写一个useCountdown(秒)写一个useDebounce(value, delay) 阶段 3React Router✅ 项目结构src/ pages/ Home.jsx Detail.jsx main.jsx App.jsx安装npm install react-router-dom✅ 实战 4配置基础路由import { BrowserRouter, Routes, Route } from react-router-dom; import Home from ./pages/Home; import Detail from ./pages/Detail; export default function App() { return ( BrowserRouter Routes Route path/ element{Home /} / Route path/detail/:id element{Detail /} / /Routes /BrowserRouter ); }Detail.jsximport { useParams } from react-router-dom; export default function Detail() { const { id } useParams(); return h2详情页面 - ID: {id}/h2; } 实践任务写一个商品列表页 商品详情页点击列表项跳转到详情页 阶段 4状态管理为了更像 Vue 的 Pinia你会更喜欢Zustand。 为什么不用 ReduxRedux 心智负担大action/reducer/immutableZustand 更像 Pinia简单、轻巧、API优雅 安装 Zustandnpm install zustand✅ 实战 5创建用户 store类似 Piniasrc/store/user.jsimport { create } from zustand; export const useUserStore create((set) ({ name: Echo, setName: (name) set({ name }), }));在组件里使用import { useUserStore } from ../store/user; export default function Profile() { const { name, setName } useUserStore(); return ( div p用户名{name}/p input onChange{(e) setName(e.target.value)} / /div ); } 实践任务给 store 增加token / userInfo / logout全局 Layout 读取用户信息 阶段 5接口请求与工程化推荐axios 封装 useRequest Hook✅ 实战 6axios 封装/src/api/request.jsimport axios from axios; const request axios.create({ baseURL: https://api.example.com, timeout: 8000, }); request.interceptors.response.use((res) res.data); export default request;使用 useRequest Hook可复用import { useEffect, useState } from react; import request from ../api/request; export function useRequest(url) { const [data, setData] useState(null); const [loading, setLoading] useState(true); useEffect(() { request(url).then((res) { setData(res); setLoading(false); }); }, [url]); return { data, loading }; } 阶段 6综合项目做一个后台管理系统模版React功能组成登录页Layout 布局侧边栏 Headerreact-router 路由守卫表格 CRUD增删改查Zustand 全局状态保存用户