React项目开发常用API

记录React项目开发常用的API，作为后续开发的参考。路由配置配置文件格式//router/index.jsimportReact,{lazy,Suspense}from'react'//Suspense配合lazy实现懒加载constSuspenseComponent=Component=>{return()}constroutes=[{path:'/',element:SuspenseComponent(lazy(()=>import('../pages/index/Index'))),},{path:'/login',element:SuspenseComponent(lazy(()=>import('../pages/login/Login')))},{path:'/list/:b',element:SuspenseComponent(lazy(()=>import('../pages/list/List')))},{路径:'*',元素:SuspenseComponent(lazy(()=>import('../pages/notFound/NotFound'))),},]导出默认路由标签形式import{HashRouter,Routes,Route}from'react-router-dom'importIndexfrom'./pages/index/Index'importLoginfrom'./pages/login/Login'从'./pages/NotFound/NotFound'}>}>}>路由认证importReact,{Fragment}from'react'import{useRoutes,Navigate,useLocation}from'react-router-dom'importroutesfrom'./router'import{getToken}from'./utils/auth'constPermission=()=>{consttoken=getToken()constlocation=useLocation()//没有令牌，取而代之访问登录页面，重定向到登录页面"/login"replace/>:})}exportdefault权限路由跳转，参数标签跳转import{Link}from'react-router-dom'JumpuseNavigatejumpimport{useNavigate}from'react-router-dom'constnavigate=useNavigate()/***三路由参数传递方式*1.声明传递：/list/:id*2.地址栏传递：/list?id=1*3.状态属性传递：state:{id:1}*/navigate('/List/3?a=2',{state:{id:1}})historyjump(forward,backward)//history.jsimport{createHashHistory}from'history'exportdefaultcreateHashHistory()importhistoryfrom'./history'history.back()风格写法styled-components//App.jsimport{ThemeProvider}from'styled-components'//传递主题//index/style.jsimportstyledfrom'styled-components'exportdefaultstyled.div`height:100vh;显示：弹性；弹性方向：列；.nav{高度：70px；填充：020px；背景色：${props=>props.theme.primaryColor}；显示：弹性；对齐项目：居中；。标题{文本对齐：左；弹性：1；字体大小：20px；字体粗细：600；颜色：黄色；}`状态管理创建模块//store/features/user.jsimport{createSlice,createAsyncThunk}from'@reduxjs/toolkit'import{getToken,getUserInfo,removeToken,removeUserInfo}from'../../utils/auth'import{logout}from'../../api/login'importhistoryfrom'../../lib/history'exportconstlogoutAction=createAsyncThunk('user/logout',async()=>{returnawaitlogout()})constslice=createSlice({name:'user',initialState:{token:getToken(),userInfo:getUserInfo(),},reducers:{setToken(state,{payload}){state.token=payload},setUserInfo(state,{payload}){state.userInfo=payload},},extraReducers(builder){builder.addCase(logoutAction.fulfilled,(state,{payload})=>{if(payload.success&&复制代码payload.code===200){state.token=''state.userInfo=''removeToken()removeUserInfo()history.push('/login')location.reload()}})},})exportconst{setToken,setUserInfo}=slice.actionsexportdefaultslice.reducer注册模块//store/index.jsimport{configureStore}from'@reduxjs/toolkit'importuserReducerfrom'./features/user'exportdefaultconfigureStore({reducer:{user:userReducer}})passstateimport{Provider}from'react-redux'importstorefrom'./store/index'importAppfrom'./App'获取，运行状态import{useSelector,useDispatch}from'react-redux'import{logoutAction}from'../../store/features/user'const{userInfo}=useSelector(store=>store.user)constdispatch=useDispatch()return(

)功能组件使用hookimportReact,{useState,useEffect}from'react'functiononRequest(){}const[number,setNumber]=useState(0)/***useEffect的第二个参数不传，任何状态改变都会执行*传[]，只有当组件mountedlaterExecutelater*pass[number],组件挂载和number变化后执行*/useEffect(()=>{onRequest()},[number])代码优化减少重复渲染memo//调用memo,当父组件重新渲染，但props保持不变时，子组件读取缓存importReact,{memo}from'react'constChild=()=>{return()}exportdefaultmemo(Child)useCallback//使用useCallback处理函数。当父组件重新渲染，依赖数组不变时，返回相同的函数，避免触发props变化，导致子组件重新渲染importReact,{useState,useCallback}from'react'importChildfrom'Child'constParent=()=>{const[value,setValue]=useState(0)functionsum(){setValue(value+1)}constsumCall=useCallback(sum,[])return()}减少重复计算useMemo//调用useMemo，当组件重新渲染时，如果依赖数组不变，直接读取缓存结果importReact,{useMemo,useState}from'react'constParent=()=>{const[value,setValue]=useState(0)functionsum(){letresult=0for(leti=0;i<100000;i++){result++}返回结果}constresult=useMemo(sum,[])return()}