我是靠谱客的博主 霸气唇彩,这篇文章主要介绍React项目开发常用API,现在分享给大家,希望可以做个参考。

记录一下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
15
import { 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
24
import 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
6
import { 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
14
import { 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
8
import { 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
13
import { 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
16
import 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内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(115)

评论列表共有 0 条评论

立即
投稿
返回
顶部