基于 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
相关推荐
vvilkim3 小时前
深入理解 TypeScript 中的 implements 和 extends:区别与应用场景
前端·javascript·typescript
GISer_Jing3 小时前
前端算法实战:大小堆原理与应用详解(React中优先队列实现|求前K个最大数/高频元素)
前端·算法·react.js
武昌库里写JAVA4 小时前
SpringCloud
vue.js·spring boot·毕业设计·layui·课程设计
写代码的小王吧4 小时前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
小小小小宇5 小时前
CSS 渐变色
前端
snow@li5 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
小小小小宇6 小时前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)6 小时前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy6 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
记得早睡~6 小时前
leetcode122-买卖股票的最佳时机II
javascript·数据结构·算法·leetcode