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