useState
用于为函数组件保存状态。当状态改变，组件重新渲染时。状态值依然不变，通过set方法来改变状态值
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.接收唯一的参数即状态初始值，初始值可以时任意的数据类型
- 2.返回值为数组，数组中存储状态值和更改状态值的方法。方法名称约定以set开头，后面加上状态名称
- 3.方法可以被调用多次，用以保存不同的状态值
- 4.参数可以时一个函数，函数返回什么，初始状态值就是什么，函数只会被调用一次，用在初始值时动态值的情况
//从其他页面传入的值作为初始值，
const [count, setCount] = useState<number>(()=>{
return props.count
})
- 5.设置状态值方法的参数可以是一个值，也可以是一个函数
const handleCount = () => {
setCount((count)=>{
//也可以直接return 100，这样的话count就直接被赋值为100了
return count + 1
})
}
这样，点击按钮，count自增的功能就实现了。
- 6.设置状态值的方法本身是异步的
const handleCount = () => {
setCount((count)=>{
return count + 1
})
//这里的count不一定就是count+1后的值
console.log(count)
}
useEffect
让函数型组件拥有处理副作用的能力，类似生命周期函数。
执行时机
可以把useEffect看做componentDidMount（组件挂载）、componentDidUpdate（组件更新）和componentWillUnmount（组件卸载）这三个函数的组合。
- 1.useEffect(()=>{})
componentDidMount和componentDidUpdate，组件装载和组件更新时执行 - 2.useEffect(()=>{},[])
componentDidMount，组件装载时执行 - 3.useEffect(()=>()=>{})
componentWillUnmount，组件卸载时执行
//组件挂载完成之后执行，组件数据更新完成之后执行
useEffect(() => {
console.log('hello world!')
})
//组件挂载完成之后执行
useEffect(() => {
console.log('hello world!')
}, [])
//组件被卸载之前执行
useEffect(() => {
return () => {
console.log('组件被卸载了')
}
})
useEffect(() => {
//组件挂载时执行定时器
const timerId = setInterval(() => {
setCount(count+1)
},1000)
//组件卸载时清除定时器
return () => {
clearInterval(timerId)
}
},[])
useEffect的第二个参数
//组件挂载完成之后执行，组件数据更新完成之后执行
useEffect(() => {
console.log('hello world!')
})
//组件挂载完成之后执行，count改变之后执行
useEffect(() => {
console.log('hello world!')
},[count])
当不设置第二个参数时，useEffect将会在挂载和更新时都会执行。但是有些情况，并不需要useEffect执行，这个时候我们就可以设置第2个参数，来指定useEffect在count改变的情况下执行（组件挂载和count变化的情况下），这个时候就可以减少一些没必要的执行操作。
useEffect结合异步函数
useCallback
性能优化，缓存函数，使组件重新渲染得到相同的函数实例。
每次组件重新渲染时，得到的是相同的函数实例，就不会导致里层的函数重新个渲染
useRef
获取DOM元素对象
保存数据(跨组件周期)
useState保存的数据，当数据发生变化，会触发重新渲染。
useRef即使组件重新渲染，保存的数据仍然还在，useRef保存的数据被更改不会触发组件重新渲染。
useMemo
useMemo的行为类似Vue的计算属性，可以监测某个值的变化，根据变化值计算新值。计算出的新值可以参与试图渲染
useMemo会缓存计算结果，如果监测值没有发生变化，即将组件重新渲染，也不会重新计算。此行为可以有助于避免在每个渲染上进行昂贵的计算。
//当count发生变化时，useMemo才会重新执行，引用result的组件重新渲染。count不变的话，result就不会变化，被缓存下来
const result = useMemo(() => {
return count * 2
},[count])
memo方法
性能优化，如果本组件中的数据没有发生变化，阻止组件更新。类似组件中的PureComponent 和 shouldComponentUpdate
//count不变化，test组件不会重新渲染
const test = memo(() => {
return <Text>{count}</Text>
})
