1.useEffect() useEffect是一个处理副作用的hook
useEffect(() => { return () => { // 可以返回函数 可以在组件卸载时 或者是 组件执行完上一次更新时 执行清除定时器的任务 } }, []) // 三种情况
第二个参数的选择有三种情况
* 第一种情况 不传第二个参数 组件更新每次都执行回调
* 第二个情况 传入一个空数组 只会在渲染时执行一次回调
* 第三种情况，数组中有依赖项 只要依赖项发生变化 回调就会执行
TS与JS的用法几乎一样，不需要做处理
2.useState 首先这是一个泛型函数，接受一个类型变量来指定状态的类型
const [count, setCount] = useState(0)
const [count, setCount] = useState<number>(0) // 此时不需要指明类型 因为有类型推导
但是如果定义的是数组或者对象, 此时这种情况必须指定类型
const [list, setList] = useState<Array<{ id: number, name: string }>>([])
3.useRef
在TS中必须要指明类型
useRef<HTMLInputElement>(null)
console.log(input.current.value) // value是HTMLInputElement的属性
useRef初始值是空的，所以需要非空判断的
// 可选链操作符
console.log(input.current?.value) //此时表示 如果current为null 或者undeifned 不再执行
// 非空断言 一定要保证非空断言的变量不为空
console.log(input.current!.value) // 主观上的判断 只会屏蔽ts的提示错误 而不会影响js执行的错误
// 流程控制
if (input.current) {
// 此时不需要进行类型非空断言 因为if帮助屏蔽了ts的空的类型
console.log(input.current.value)
}
