企业官网建设流程全解析

网站建设的上机报告,上海中学分数线,免费ppt模板网址,广州市城市建设网站文章目录前言GuidelinesMedium-Impact1. Use SWR for automatic request deduplication核心问题反例#xff1a;手写 useEffect推荐#xff1a;SWR 自动去重一句话总结2. Defer state reads to usage point核心问题反例#xff1a;提前解构推荐#xff1a;用到再读Zustand …文章目录前言GuidelinesMedium-Impact1. Use SWR for automatic request deduplication核心问题反例手写 useEffect推荐SWR 自动去重一句话总结2. Defer state reads to usage point核心问题反例提前解构推荐用到再读Zustand / Redux / Jotai 都适用一句话总结3. Use lazy state initialization for expensive values核心问题反例推荐lazy init典型场景一句话总结4. Use derived state subscriptions核心问题反例推荐派生 state在全局状态库中更重要一句话总结5. Apply startTransition for non-urgent updates核心问题典型场景反例同步更新推荐startTransition什么时候该用 startTransition总结前言react-best-practicesReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.Guidelines在这个系列我会逐条拆解每一条都给出核心问题是什么为什么会慢本质原因典型业务场景反例代码推荐写法在 React / Next.js 中的实际收益Medium-Impact这是系列的第三部分。这一部分开始从“Server 极致性能”回到“Client 交互体验”重点不再是 RTT而是减少不必要的 re-render、避免同步阻塞、让用户感觉“很跟手”1. Use SWR for automatic request deduplication「同一时间只发一次请求」核心问题在 Client 侧多个组件同一个接口同时 mount浏览器会发多次相同请求反例手写 useEffectfunctionuseUser(){const[data,setData]useState(null)useEffect((){fetch(/api/user).then(rr.json()).then(setData)},[])returndata}Header/Sidebar//api/user被请求两次推荐SWR 自动去重importuseSWRfromswrconstfetcher(url:string)fetch(url).then(rr.json())functionuseUser(){returnuseSWR(/api/user,fetcher)}SWR 做了什么同 key 只请求一次多组件共享结果自动缓存 revalidate一句话总结SWR Client 版 React.cache2. Defer state reads to usage point「不要为了“可能用”而提前读 state」核心问题React 中读取 state 建立订阅state 更新 → 组件 re-render提前读 不必要的 re-render反例提前解构const{user,theme,locale}useAppStore()即使只用themeuser 更新locale 更新组件都会重渲染。推荐用到再读constthemeuseAppStore(statestate.theme)Zustand / Redux / Jotai 都适用useSelector(statestate.user.name)一句话总结订阅越小重渲染越少3. Use lazy state initialization for expensive values「初始值贵就别每次算」核心问题useState(expensiveCompute())每次 render 都会执行expensiveCompute即使只用第一次反例const[value]useState(buildBigMap(data))推荐lazy initconst[value]useState(()buildBigMap(data))函数只在初次 render 执行一次。useState 的两种“初始化模式”普通初始化每次 render 都会算也就是useState(buildBigMap(data))React 在 render 前先执行 buildBigMap把执行结果作为参数传给 useState每次 render 都会执行一次。Lazy 初始化也就是useState(() buildBigMap(data))传递给 useState 的是一个 Initializer function内部处理如下functionuseState(initialState){if(isFirstRender){if(typeofinitialStatefunction){stateinitialState()}else{stateinitialState}}return[state,setState]}因此只有在 first rendermount时才会执行initialState()后续 render直接读取已经保存的 state不会再碰这个函数。典型场景JSON.parse构建索引 Map复杂正则大数组预处理一句话总结初始 state 函数4. Use derived state subscriptions「不要存“算得出来的 state”」核心问题const[filtered,setFiltered]useState([])但filtered明明来自list keyword双源真相必出 bug反例useEffect((){setFiltered(list.filter(ii.name.includes(keyword)))},[list,keyword])推荐派生 stateconstfiltereduseMemo((){returnlist.filter(ii.name.includes(keyword))},[list,keyword])在全局状态库中更重要useStore(statestate.items.filter(ii.active))一句话总结能算出来就别存5. Apply startTransition for non-urgent updates「区分“着急”和“不着急”的更新」React 18 引入了 更新优先级lanesUrgent lane输入、点击、focusTransition lane可延后更新核心问题React 默认所有 state 更新都是“紧急的”大量更新 → 卡顿典型场景搜索过滤表格排序列表分页tab 切换后加载数据反例同步更新onChange{(e){setKeyword(e.target.value)setFilteredData(filter(data,e.target.value))}}输入会卡。因为 React 内部的理解是“这两个 setState 同等重要必须立刻算完”如果 filter(data) 很重输入法卡光标延迟掉帧二、startTransition 到底做了什么推荐startTransitionimport{startTransition}fromreactonChange{(e){setKeyword(e.target.value)startTransition((){setFilteredData(filter(data,e.target.value))})}}效果输入优先列表稍后更新UI 更丝滑startTransition 告诉 React「这次更新不着急别挡住用户操作」。没有 startTransition用户输入 ↓ React必须算完 filter500ms ↓UI更新使用 startTransition用户输入 ↓ React先更新 input5ms ↓ 空闲时再算 filter ↓ 更新列表注意它不是 setTimeout比如setTimeout(() setList(...), 0)也不是 debounce。对比setTimeoutstartTransition是否理解 UI❌✅可被中断❌✅与调度器协作❌✅与 Concurrent Rendering❌✅更具体的对比可以阅读WHAT - React startTransition vs setTimeout vs debounce什么时候该用 startTransition场景是否适合搜索过滤✅表格排序✅分页切换✅Tab 内容切换✅输入框 value❌hover 状态❌modal 开关❌总结它们解决的是三类问题1️⃣请求重复→ SWR2️⃣订阅过多→ defer reads / derived state3️⃣计算 更新阻塞→ lazy init / transition一句话 Client 性能心法少订阅少算慢更新