什么是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);