|
一、reactHooks
useEffect、useState、useRef、useContext、useMemo
- useState useState使得函数组件具有状态
imoirt {useState} from "reatc"
export default Demo(){
const [count,setCount] = useState(0); //count初始值为0
return (
<Button onClick={setCount(count+1)}></Button>
)
}
- useEffect 可以实现简易版的生命周期
useEffect(()=>{},params) useEffect函数会在函数组件首次加载的时候默认执行一次,useEffect对params进行了监听,如果params发生变化则useEffect函数会再次执行
useEffect通常的应用如下:
只在函数组件初次加载时候执，params为[]空数组
imoirt {useEffect} from "reatc"
function LogIn(){
useEffect(()=>{},[])
return <button>登录</button>
}
更新某个/某些状态值的时候执行
import {useEffect} from "reatc"
const [count,setCount] = useState(0); //count初始值为0
const [total,setTotal] = useState(0); //total初始值为0
function LogIn(){
useEffect(()=>{},[count,total])
return (<button>登录</button onClick={()=>{setCount(count+1)}}>
<button onClick={()=>{setTotal(total+1)}}>注册</button>)
}
调用setCount更新函中的状态值的时候执行 ，与上面的区别是不管哪个值,只要改变了useEffect就会执行
import {useEffect} from "reatc"
function LogIn(){
useEffect(()=>{})
return <button>登录</button>
}
useEfeft清除副作用
每更新状态useEffect都会执行,这样就会产生一些额外的副作用 。试想如果我们在useEffect里面写了如下代码
useEffect(()=>{
let timer = setTimeout(()=>{
console.log("timer");
},1000)
},[count,total])
每次更新count或者total的时候都会重新声明一个定时器，控制台会有许多输出,为了清除副作用需要在useEffect中再添加一些代码
useEffect(()=>{
let timer = setTimeout(()=>{
console.log("timer");
},1000)
return ()=>{clearTimeout(timer)}
},[count,total])
现在有一个场景,点击button的时候让input聚焦,先看看creatreRef是怎么实现的
export default class Demo(){
inputElemet = createRef();
inputFocus=()=>{
inputElemet?.current.focus();
}
return (<div>
<input ref={inputElement}></input>
<button onClick={this.inputFocus}>focus</button>
</div>)
}
再来看看useRef的写法
import{useRef} from "react"
export default function Demo(){
inputElemet = useRef();
inputFocus=()=>{
inputElemet?.current.focus();
}
return (<div>
<input ref={inputElement}></input>
<button onClick={this.inputFocus}>focus</button>
</div>)
}
看上去useRef和createRef的使用方法一致，但其实二者有着本质的差别,
每次页面刷新时,使用createRef获取的元素都是最新的,而使用useRef获取的元素每次都会返回相同的引用
|