【useState】声明 state 变量
useState 会返回一个数组:[当前状态,更新它的函数]
import { useState } from "react"
function Index() {
const [num, setNum] = useState(0)
return <div>
<h1>计数器:{num}</h1>
<button onClick={() => setNum(num + 1)}>增加</button>
</div>
}
export default Index
【useEffect】副作用集合了(组件初始化、更新、销毁)
useEffect 可以接收两个参数
//组件会在初始化和更新的时候执行函数
useEffect(() => {
console.log("useEffect-updata")
})
//组件会在销毁时执行return的函数
useEffect(() => {
console.log("useEffect-updata")
return ()=>{
console.log("useEffect-destroy")
}
})
//组件初始化时执行,只会执行一次
useEffect(() => {
console.log("useEffect-updata")
},[])
//组件初始化时执行或者num变量发生改变时执行
useEffect(() => {
console.log("useEffect-updata")
},[num])
【useContext】获取上下文
useContext 配合着 createContext 一起使用
//父组件
import { useState , createContext } from "react"
import A from "../../components/A/index"
export const C:any = createContext(null)
export const Index = () => {
const [list] = useState([1, 2])
return <C.Provider value={{list}}>
<A></A>
</C.Provider>
}
//子组件
import B from "../B/index"
export default function A(){
return <div>
<B></B>
</div>
}
//孙组件
import { useContext } from "react"
import { C } from "../../view/PageFn/PageFn1"
export default function B(){
const { list } = useContext(C)
return <div>
{list}
</div>
}
【useReducer】useState 的替代方案
useReducer 接收三个参数(回调函数,变量,变量初始化函数)
useReducer 返回一个数组 [变量,执行函数]
import { useReducer } from "react"
const initData = "Hello"
export const Index = () => {
const [state, dispatch] = useReducer(reducer,initData,initFn)
return <div>
<div>state:{state}</div>
<button onClick={()=>dispatch("B")}>打招呼</button>
</div>
}
/* state设置的变量,action传递的参数 */
function reducer(state: any, action: any) {
return `${state} and ${action}`
}
/* state变量的初始化函数 */
function initFn(state: any){
return `${state} A`
}
【useRef】获取dom
import { useRef } from "react"
export const Index = () => {
const el = useRef<any>(null)
const hanleGetEl = ()=>{
console.log(el.current.focus())
}
return <div>
<input type={"text"} ref={el} />
<button onClick={hanleGetEl}>Focus El</button>
</div>
}
【useImperativeHandle】配合forwardRef一起使用
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值
import { forwardRef, useImperativeHandle, useRef } from "react"
//父组件
export const Index = () => {
const AInput = forwardRef(A)
const AInputRef = useRef<any>(null)
//点击按钮执行子组件暴露的focus方法
const handleFocus = ()=>{
AInputRef.current.focus()
}
return <div>
<AInput ref={AInputRef}></AInput>
<button onClick={handleFocus}>Get El</button>
</div>
}
//子组件
function A(_props:any,ref:any){
const inputRef = useRef<any>(null)
useImperativeHandle(ref,()=>({
focus:()=>{
inputRef.current.focus()
}
}))
return <input type="text" ref={inputRef} />
}