基于 vue 快速上手 React

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