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

扫盲知识点:

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

相关推荐
aPurpleBerry15 分钟前
JS常用数组方法 reduce filter find forEach
javascript
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v2 小时前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记2 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜2 小时前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=2 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css