1. Hook 函数
a. useState（响应式数据）
import {useEffect,useState} fromm "react"
function App(){const [data,setData]=useState(0)const setClick=()=>{// 1.普通修改setData(data+1)// 2.多次修改，因为 setData 是异步修改 data 值,所以需要通过回调函数的方式修改setData((value)=>value+1)setData((value)=>value+1)setData((value)=>value+1)}
return (<div onClick={setClick}>{data}</div>)
}
b. useEffect（生命周期）
import {useEffect,useState} fromm "react"
function App(){const [data,setData]=useState('this is app')// 1.没有依赖项时，表示 组件初始化加载+组件更新时的生命周期useEffect(()=>{//组件初始化加载+组件更新时console.log("没有依赖项")retrun ()=>{// 组件卸载时}})// 2.传入特定依赖项时，表示 组件初始化加载+依赖数据更新时的生命周期useEffect(()=>{//组件初始化加载+依赖数据更新时console.log("传入特定依赖项时")retrun ()=>{// 组件卸载时}},[data])// 3.传入特定依赖项为[]时，表示 组件初始化加载时useEffect(()=>{//组件初始化加载时一次console.log("传入依赖项为[]")retrun ()=>{// 组件卸载时}},[data])}
c. useMemo
// react 在更新数据时，会重新渲染执行组件
import {useMemo,useState} fromm "react"
function App(){const [count,setCount]=useState(0)
const data=useMemo(()=>{// 当 count 更新时调用 return count
},[count])
}
d. useCallback
// react 在更新数据时，会重新渲染执行组件
import {useMemo,useState} fromm "react"
function App(){// 可以防止父组件更新触发子组件更新
const changCal=useCallback(()=>{console.log("父组件更新了")
},[])return (<A changCal={changCal}></A>)
} function A({changCal}){console.log("子组件更新了")
return (<button onClick={changCal}>按钮</button>
)
}
2. 组件间通信
1.父==>子
/**子组件通过props接受数据
*/
function Son(props){return <div>{props.name}</div>
}//父组件
function App(){const name ='this is app name'return (<Son name={name}></Son>)
}1.1插槽
/**子组件通过 props.chilren 可以接受父组件插槽传递过来的内容
*/
function Son(props){return <div>{props.chilren}</div>
}//父组件
function App(){return (<Son><div>插槽内容<div/></Son>)
}//=========================================2.子==>父
//子组件通过回调函数的方式向父组件传递信息
function Son(props){const data="this is son data"const fun=()=>{props.calback(data)}return <button onClick={fun}></button>
}//父组件向子组件传递一个函数
function App(){const callback =(value){}return (<Son callback={callback}></Son>)
}
import {createContext,useContext} from "react"
const MsgContext=createContext()//中间组件
function A(props){return <B></B>
}//底层组件通过 useContext 接受数据
import {useContext} from "react"
function B(props){// const msg=useContext(MsgContext)return (<div>{msg}</div>)
}/**
顶层组件通过 createContext 的 Provider
向底层注入数据
*/function App(){const data='this is app'return (<MsgContext.Provider value={data}><A></A></MsgContext>)
}
3. Redux 状态管理
//npm install @reduxjs/toolkit react-redux/** store.jsx文件
1.创建一个整体的大 store
*/
import {configureStore} from '@reduxjs/tookit'
import part from './part.jsx'
export default configureStore({reducer:{part:part}
})/** part.jsx文件
2.创建一个局部 store
*/
import {createSlice} from "@reduxjs/toolkit"
const partSlice=createSlice({name:'part',//初始化 store 数据initialState:{count:0,list:[]},reducers:{/**可以操作 store 数据state：store 数据action: 接受的参数*/increment:(state,action)=>{state.count++// state.count = action.payload},asyncAxios:(state,action)=>{state.list=action.payload}}
})
counst {increment,asyncAxios} =partSlice.actions//如果需要异步操作 store 数据，可以通过通过中间函数异步操作 store 数据
const asynchronous=()=>{return async (dispatch)=>{const res=await axios.get("http://")dispatch(asyncAxios(res.data))}
}export {increment,asynchronous}
export default partSlice.reducer;/** main.jsx文件
3. 通过 react-redux 建立连接
*/
import store from './store/store.jsx';
import { Provider } from 'react-redux';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>
);/**
4.使用 store 数据
useSelector 获取 store 数据
useDispatch 调用 action 方法，改变数据
*/
import { useDispatch, useSelector } from "react-redux";
import { increment,asynchronous } from "../../store/com.tsx";
const A = () => {const partStore = useSelector((state) => state.part.value)const dispatch = useDispatch()const storeClick = () => {// 同步操作 store 数据dispatch(increment())}// 异步操作 store 数据useEffect(()=>{dispatch(asynchronous())},[dispatch])return (<div><div><button onClick={storeClick}> store: {partStore}</button></div></div>)
}
4. router 路由
import {createBrowserRouter} from 'react-router-dom'
import Home from '../views/home/index.tsx'
import Login from '../views/login/index.tsx'
const router=createBrowserRouter([{//( /:id? )此部分是 params 传参占位使用的，如若不进行 params 传参可以去掉path:'/home/:id?',element:<Home/>,// 子路由children:[]},{//( /:id? )此部分是 params 传参占位使用的，如若不进行 params 传参可以去掉path:'/login',element:<Login/>,},]
)
export default router
import {RouterProvider} from "react-router-dom"
// 导入路由表
import router from './router/index'
function App() {return (<>// 路由组件展示<RouterProvider router={router} /></>)
}
export default App
import { useNavigate } from 'react-router-dom'function Login() {const navigate = useNavigate()const loginClick=()=>{navigate('/home')// 1.query传参navigate('/home?id=123')// 2.params传参(需要在路由表中的路径中进行占位)navigate(`/home/123`)}return (<div><button onClick={loginClick}>登录</button></div>)
}
export default App
import { useSearchParams,useParams,Outlet } from 'react-router-dom'function Home() {// 1.query：接收参数const [searchParams]=useSearchParams()const id=searchParams.get('id')// 2.params：接收参数const params=useParams()return (<div>query参数： {id}params参数： {params.id}子路由的展示： <Outlet/></div>)
}
export default Home
