react项目中的redux以及react-router-dom

h960822

已于 2024-02-24 15:11:03 修改

阅读量842

点赞数 17

文章标签： react.js javascript ecmascript

于 2024-02-22 19:22:11 首次发布

本文链接：https://blog.csdn.net/h960822/article/details/136233955

版权

扫盲知识点：

1 传递自定义事件：

<button onClick={(e)=>{change(e)}}>获取事件对象e</button>

将事件对象e传递到了change的这个方法中。

2 同时传递自定义事件和参数：

<button onClick={(e)=>{change(‘我是参数’，e)}}>获取事件对象e</button>

调用参数和事件对象e； change(str，e)

3 useState遵循状态不可变的原则，不能修改useState的原始值，只能老值对新值进行替换，也就

是任何对修改源数据的方法都是不可取的，比如数组的增删截取等，都会修改原数组。

遇到对象和数组的情况下，就可以使用ES6的展开运算符等进行替换。

4 关于className以及classnames插件的用法：

<div className={`active ${isShow? ' active1' :' '}` }><div> 动态添加类名

<div className={classNames ( 'active' , { 'active1':true } ) } />

5 夸层级组件之间的通信方式: Context;

执行步骤：第一步创建实例createContext；第二步实例的provide提供数据，第三步

        useContext消费数据：

在父组件： import {createContext} from 'react' ; const ctx = createContext（）；

function App（）{return （ <ctx.Provider value={count}> <div>app组件</div>

        </ctx.Provider>）}

子组件 import {useContext} from ' react ' ; import ctx from ‘./app.js’;

        const a = useContext(ctx);

6 useEffect的理解：由渲染本身引起的操作，可以发送axios请求，更改DOM等。

useEffect（（）=>{}） // 组件渲染完毕会执行一次，组件每次有数据发生改变的时候也会更新

useEffect（（）=>{},[]） // 该函数只会在渲染完毕之后执行一次，以后将不会再执行；

useEffect（（）=>{},[count]） / 组件渲染完毕触发一次，依赖状态值发生改变触发

7 redux状态管理工具：

使用步骤： 1 定义一个reducer的函数（根据当前想要做的修改返回一个新的状态）
2 使用createStore方法传入reducer函数，生成一个store的实例。
3 使用store实例的subscribe方法订阅数据的变化(数据发生变化得到通知）；
4 使用store实例的dispatch方法提交action对象触发数据变化
5 使用store的getState的方法获取最新的数据

<html>
<button id="increment">+</button>
<script href="加载redux的cdn"></script>

1 const reducer = （state={count:0}, action）{
if(action.type==='add'){
return {count: state.count++}
                        }else if(action.type==='dee'){
return {count:state.count--}
                        }else{ return state}
                }

2 const store = Redux.createStore(reducer)

3 store.subscrbe(()=>{console.log('发生变化了')})

4 document.queryselector('button').addEventlister('click',function()
                {store.dispatch(reducer({type:'add'}))})

5 store.subscrbe(()=>{console.log(store.getState().count)})
        </html>

8 reduxjs/toolkit（切片）的使用：

第一步安装： npm i react-redux @reduxjs/tookit

第二步 src创建store文件夹，store文件夹下创建index.js文件与module的文件夹，

第三步创建count切片：

1 引入切片 const {createSlice} from '@reduxjs/toolkit'

2 创建reducer的函数并把相关同步异步方法以及reducer导出

const countSlice = createSlice({

name:'countSlice',

initialState:{ countLIst:[] };

reducers:{
addCountList(state,action){
return state.countList.push(action.paylot)
                         }
                }
        })
export function setCountListAsync(){

return async (dispatch)=>{
const res = await axios.get('xxxxx')

dispatch(addCountList(res.data))
                }
        }
const {addCountList } = countSlice.actions
export {addCountList}
const countStore = countSlice.reducer
export default countStore

3 index.js文件中导入；

import {configureStore} from '@reduxjs/toolkit'

import countStore from './module/count.js'

const store = configureStore({
reducer:{
count:countStore,
                }
        })

export default store

4 index.js入口文件中全局注册:

import {Provider} from 'react-redux';

import store from './store/index.js'

<Provider store={store}><App></App></Provider>

5 组件中使用：import {useSelector,useDispatch} from 'react-redux'

const dispatch = useDIspatch()

获取数据 useSelector（state=>state.count.countList）

调用异步的方法 dispathch（setCountListAsync）

9 react-router-dom的使用：

1 进行依赖的安装： npm install react-router-dom

2 创建router文件夹，router文件下创建index.js文件配置路由：

import {createBrowseRouter} from 'react-router-dom'

const routes = createBrowserRouter([
{
path:'/home',

element:<home></home>,

children:[
{
index:true, // 进入home路由默认展示下面这个路由组件

element：<Children><Children>
                                },

{
path:'son',

ellement:<Son></Son>

                                }
                        ]
                }
        ])

3 项目的index.js文件中，用来包裹APP组件：

import {RouterProvider} from 'react-router-dom'

import {routes} from './router/index.js'

<RouterProvider router={routes}></ RouterProvider>

4 如果是在二级出口的话需要使用<Outlet></Outlet> <Link to="/son"></Link> 这里不需要
        加父组件的路径了。

5 searchParams 传参与 params传参。

<Link to="/home?id=10&name='zs' "></Link> 传递参数

const [params] = useSearchParams() console.log(params.get('id')) // 10

<Link to='./home/12'>params传参</Link>

const params = useParams() let id = params.id // 12