useState
用于為函數(shù)組件保存狀態(tài)柬采。當(dāng)狀態(tài)改變，組件重新渲染時且警。狀態(tài)值依然不變粉捻，通過set方法來改變狀態(tài)值
import { useState } from "react"
import { Button, View, Text } from "react-native"
const App = () => {
const [count, setCount] = useState<number>(0)
return <>
<View>
<Text>{count}</Text>
<Button
title="+1"
onPress={() => {
setCount(count + 1)
}}></Button>
</View>
</>
}
- 1.接收唯一的參數(shù)即狀態(tài)初始值，初始值可以時任意的數(shù)據(jù)類型
- 2.返回值為數(shù)組斑芜，數(shù)組中存儲狀態(tài)值和更改狀態(tài)值的方法肩刃。方法名稱約定以set開頭，后面加上狀態(tài)名稱
- 3.方法可以被調(diào)用多次杏头，用以保存不同的狀態(tài)值
- 4.參數(shù)可以時一個函數(shù)盈包，函數(shù)返回什么，初始狀態(tài)值就是什么醇王，函數(shù)只會被調(diào)用一次呢燥，用在初始值時動態(tài)值的情況
//從其他頁面?zhèn)魅氲闹底鳛槌跏贾担? const [count, setCount] = useState<number>(()=>{
return props.count
})
- 5.設(shè)置狀態(tài)值方法的參數(shù)可以是一個值，也可以是一個函數(shù)
const handleCount = () => {
setCount((count)=>{
//也可以直接return 100寓娩，這樣的話count就直接被賦值為100了
return count + 1
})
}
這樣叛氨，點擊按鈕，count自增的功能就實現(xiàn)了棘伴。
- 6.設(shè)置狀態(tài)值的方法本身是異步的
const handleCount = () => {
setCount((count)=>{
return count + 1
})
//這里的count不一定就是count+1后的值
console.log(count)
}
useEffect
讓函數(shù)型組件擁有處理副作用的能力寞埠，類似生命周期函數(shù)。
執(zhí)行時機(jī)
可以把useEffect看做componentDidMount（組件掛載）排嫌、componentDidUpdate（組件更新）和componentWillUnmount（組件卸載）這三個函數(shù)的組合畸裳。
- 1.useEffect(()=>{})
componentDidMount和componentDidUpdate，組件裝載和組件更新時執(zhí)行 - 2.useEffect(()=>{},[])
componentDidMount淳地，組件裝載時執(zhí)行 - 3.useEffect(()=>()=>{})
componentWillUnmount怖糊，組件卸載時執(zhí)行
//組件掛載完成之后執(zhí)行帅容，組件數(shù)據(jù)更新完成之后執(zhí)行
useEffect(() => {
console.log('hello world!')
})
//組件掛載完成之后執(zhí)行
useEffect(() => {
console.log('hello world!')
}, [])
//組件被卸載之前執(zhí)行
useEffect(() => {
return () => {
console.log('組件被卸載了')
}
})
useEffect(() => {
//組件掛載時執(zhí)行定時器
const timerId = setInterval(() => {
setCount(count+1)
},1000)
//組件卸載時清除定時器
return () => {
clearInterval(timerId)
}
},[])
useEffect的第二個參數(shù)
//組件掛載完成之后執(zhí)行，組件數(shù)據(jù)更新完成之后執(zhí)行
useEffect(() => {
console.log('hello world!')
})
//組件掛載完成之后執(zhí)行伍伤，count改變之后執(zhí)行
useEffect(() => {
console.log('hello world!')
},[count])
當(dāng)不設(shè)置第二個參數(shù)時并徘，useEffect將會在掛載和更新時都會執(zhí)行。但是有些情況扰魂，并不需要useEffect執(zhí)行麦乞，這個時候我們就可以設(shè)置第2個參數(shù)劝评，來指定useEffect在count改變的情況下執(zhí)行（組件掛載和count變化的情況下）姐直，這個時候就可以減少一些沒必要的執(zhí)行操作。
useEffect結(jié)合異步函數(shù)
useCallback
性能優(yōu)化蒋畜，緩存函數(shù)声畏，使組件重新渲染得到相同的函數(shù)實例。
每次組件重新渲染時姻成，得到的是相同的函數(shù)實例插龄，就不會導(dǎo)致里層的函數(shù)重新個渲染
useRef
獲取DOM元素對象
保存數(shù)據(jù)(跨組件周期)
useState保存的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化科展，會觸發(fā)重新渲染均牢。
useRef即使組件重新渲染，保存的數(shù)據(jù)仍然還在才睹，useRef保存的數(shù)據(jù)被更改不會觸發(fā)組件重新渲染徘跪。
useMemo
useMemo的行為類似Vue的計算屬性，可以監(jiān)測某個值的變化砂竖，根據(jù)變化值計算新值真椿。計算出的新值可以參與試圖渲染
useMemo會緩存計算結(jié)果，如果監(jiān)測值沒有發(fā)生變化乎澄，即將組件重新渲染突硝，也不會重新計算。此行為可以有助于避免在每個渲染上進(jìn)行昂貴的計算置济。
//當(dāng)count發(fā)生變化時解恰，useMemo才會重新執(zhí)行，引用result的組件重新渲染浙于。count不變的話护盈，result就不會變化，被緩存下來
const result = useMemo(() => {
return count * 2
},[count])
memo方法
性能優(yōu)化羞酗，如果本組件中的數(shù)據(jù)沒有發(fā)生變化腐宋，阻止組件更新。類似組件中的PureComponent 和 shouldComponentUpdate
//count不變化，test組件不會重新渲染
const test = memo(() => {
return <Text>{count}</Text>
})
