掃盲知識點：
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({
? ? ? ? ? ? ? ? reducers:{
? ? ? ? ? ? ? ? ? ? ? ? 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
????????
? ? ? ? ?
可行性分析)
】共享內存詳解以及進程互斥概念)
