记录一下React项目开发常用API,作为后续开发的参考。
路由配置
配置文件形式
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33// router/index.js import React, { lazy, Suspense } from 'react' // Suspense配合lazy实现懒加载 const SuspenseComponent = Component => { return ( <Suspense> <Component></Component> </Suspense> ) } const routes = [ { 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'))) }, { path: '*', element: SuspenseComponent(lazy(() => import('../pages/notFound/NotFound'))), }, ] export default routes
标签形式
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { HashRouter, Routes, Route } from 'react-router-dom' import Index from './pages/index/Index' import Login from './pages/login/Login' import NotFound from './pages/NotFound/NotFound' <React.StrictMode> <HashRouter> <Routes> <Route path='/' element={<Index />}></Route> <Route path='/login' element={<Login />}></Route> <Route path='*' element={<NotFound />}></Route> </Routes> </HashRouter> </React.StrictMode>
路由鉴权
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24import React, { Fragment } from 'react' import { useRoutes, Navigate, useLocation } from 'react-router-dom' import routes from './router' import { getToken } from './utils/auth' const Permission = () => { const token = getToken() const location = useLocation() // 没有token,且不是访问登录页,重定向到登录页 const toLogin = !token && location.pathname !== '/login' function RenderRoutes() { return useRoutes(routes) } return ( <Fragment> { toLogin ? <Navigate to="/login" replace /> : <RenderRoutes /> } </Fragment> ) } export default Permission
路由跳转,传参
标签跳转
复制代码
1
2
3
4
5
6import { Link } from 'react-router-dom' <Link to={{pathname: '/'}}> <button>跳转</button> </Link>
useNavigate跳转
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14import { useNavigate } from 'react-router-dom' const navigate = useNavigate() /** * 三种路由传参方式 * 1、声明传参:/list/:id * 2、地址栏传参: /list?id=1 * 3、state属性传参:state: { id: 1 } */ navigate('/List/3?a=2', { state: { id: 1 } })
history跳转(前进、后退)
复制代码
1
2
3
4
5
6
7
8
9
10// history.js import { createHashHistory } from 'history' export default createHashHistory() import history from './history' history.back()
样式编写
styled-components
复制代码
1
2
3
4
5
6
7
8// App.js import { ThemeProvider } from 'styled-components' // 传递主题 <ThemeProvider theme={{ primaryColor: '#db3046' }}> <Permission /> </ThemeProvider>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23// index/style.js import styled from 'styled-components' export default styled.div` height: 100vh; display: flex; flex-direction: column; .nav { height: 70px; padding: 0 20px; background-color: ${props => props.theme.primaryColor}; display: flex; align-items: center; .title { text-align: left; flex: 1; font-size: 20px; font-weight: 600; color: yellow; } } `
状态管理
创建模块
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42// store/features/user.js import { createSlice, createAsyncThunk } from '@reduxjs/toolkit' import { getToken, getUserInfo, removeToken, removeUserInfo } from '../../utils/auth' import { logout } from '../../api/login' import history from '../../lib/history' export const logoutAction = createAsyncThunk('user/logout', async () => { return await logout() }) const slice = 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() } }) }, }) export const { setToken, setUserInfo } = slice.actions export default slice.reducer
注册模块
复制代码
1
2
3
4
5
6
7
8
9
10// store/index.js import { configureStore } from '@reduxjs/toolkit' import userReducer from './features/user' export default configureStore({ reducer: { user: userReducer } })
传递状态
复制代码
1
2
3
4
5
6
7
8import { Provider } from 'react-redux' import store from './store/index' import App from './App' <Provider store={store}> <App /> </Provider>
获取、操作状态
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13import { useSelector, useDispatch } from 'react-redux' import { logoutAction } from '../../store/features/user' const { userInfo } = useSelector(store => store.user) const dispatch = useDispatch() return ( <div> <div>{userInfo.realName}</div> <button onClick={() => dispatch(logoutAction())}>登出</button> </div> )
函数组件使用钩子
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16import React, { useState, useEffect } from 'react' function onRequest() {} const [number, setNumber] = useState(0) /** * useEffect第二个参数不传,任意状态发生改变,都会执行 * 传[],只在组件挂载后执行 * 传[number],在组件挂载后和number变化后执行 */ useEffect(() => { onRequest() }, [number])
代码优化
减少重复渲染
memo
复制代码
1
2
3
4
5
6
7
8
9
10
11// 调用memo,当父组件重新渲染,但是props不变时,子组件读取缓存 import React, { memo } from 'react' const Child = () => { return ( <div>child</div> ) } export default memo(Child)
useCallback
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20// 使用useCallback处理函数,当父组件重新渲染,依赖数组不变时,返回相同函数,避免触发props变化,导致子组件重新渲染 import React, { useState, useCallback } from 'react' import Child from 'Child' const Parent = () => { const [value, setValue] = useState(0) function sum() { setValue(value + 1) } const sumCall = useCallback(sum, []) return ( <div> <div>{ value }</div> <Child onClick={sumCall} /> </div> ) }
减少重复计算
useMemo
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23// 调用useMemo,当组件重新渲染时,若依赖数组不变,直接读取缓存的结果 import React, { useMemo, useState } from 'react' const Parent = () => { const [value, setValue] = useState(0) function sum() { let result = 0 for(let i = 0; i < 100000; i++) { result++ } return result } const result = useMemo(sum, []) return ( <div> <div>{ value + result }</div> <button onClick={() => setValue(value + 1)}></button> </div> ) }
本文由mdnice多平台发布
最后
以上就是霸气唇彩最近收集整理的关于React项目开发常用API的全部内容,更多相关React项目开发常用API内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复