扫盲知识点:
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