基于 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
相关推荐
五号厂房10 分钟前
仿照AntDesign,实现一个自定义Tab
前端
Bob999817 分钟前
三大浏览器(Firefox、Opera、Chrome)多个Profile管理!
开发语言·javascript·eclipse·sqlite·ecmascript·hbase
Frankabcdefgh25 分钟前
前端面试 js
开发语言·javascript·原型模式
浏览器爱好者35 分钟前
如何删除Google Chrome中的所有历史记录【一键清除】
前端·chrome
埃兰德欧神36 分钟前
三分钟让你的H5变身‘伪原生’,揭秘H5秒变应用的魔法配置
javascript·html·产品
米开朗基杨37 分钟前
Cursor 最强竞争对手来了,专治复杂大项目,免费一个月
前端·后端
Lonwayne38 分钟前
Web服务器技术选型指南:主流方案、核心对比与策略选择
运维·服务器·前端·程序那些事
学习机器不会机器学习1 小时前
深入浅出JavaScript常见设计模式:从原理到实战(1)
开发语言·javascript·设计模式
hax1 小时前
deepseek-R1 理解代码能力一例
javascript·deepseek
brzhang1 小时前
效率神器!TmuxAI:一款无痕融入终端的AI助手,让我的开发体验翻倍提升
前端·后端·算法