react 中的 Hooks

 什么是hooks?
// hooks是react新版本提供的组合式API语法, 类似于vue3组合式API
// hooks有什么用?
// 使函数式组件拥有组件状态和生命周期功能, 避免this指向问题, 提高运行效率

总结:在函数式组件中, 使用hooks语法模拟状态数据的步骤
    1, 从react中导入语法函数setState
        import React, { useState } from "react"
    2, 在函数式组件中, 使用setState创建状态数据
        const [name, setName] = useState("名字")
    3, 在组件模板中, 直接调用状态名即可
        自定义状态name: {name}-{age}
    4, 使用setState函数返回的更新函数修改状态值, 参数是新值,修改后自动刷新界面
        setName("吴亦凡")

// useEffect() 这个函数可以用来模拟组件的生命周期函数, 他有两个参数, 
    // 第一个参数是回调函数, 当组件初始化完成和状态更新时调用
    // 第二个参数是一个数组,可选, 数组中是状态名, 指定那些状态值更新会触发回调函数
    useEffect(()=>{
        // 如果不加第二个参数, 初始化时调用, 任何状态更新都会调用
        console.log("组件初始化,或有状态更新ComponentWillUpdate")
    })  
    useEffect(()=>{
        // 如果第二个参数是空数组, 则只在初始化时调用,状态更新时不会调用
        console.log("ComponentDidMount")
    }, [])
    useEffect(()=>{
        // 如果第二个参数数组中有状态名, 则只会在数组中的状态更新时调用
        console.log("NameWillUpdate")
    }, [name])

关于路由跳转

编程式导航跳转
import { useNavigate} from "react-router-dom"
 navigate("/home")
 navigate("/home?name=fanfan&age=20")
 navigate("/home/fanfan/20")
navigate("/home", {
            query: {name: 'fanfna'},
            params: {age: 20},
            data: {sex: false},
            state: {phone: "1243124"}
     })

import {useLocation, useMatch, useSearchParams, useParams} from 
   获取react路由传值信息
    const location = useLocation()
    const [search] = useSearchParams()
    const params = useParams()
     match也可以接收动态路由传值, 需要加参数, 可以重置动态路由字段名
     const match = useMatch("/home/:x/:y")
    console.log(1, location, search.get("name"));
    console.log(2, params);
     console.log(3, match.params);