在 React 当中,不要使用让 TypeScript 变成 AnyScript。好处是我们要在第二次阅读,写重构,维护的时候,会更加的方便。
实际项目中的类型
- 最好将类型抽象出,单独的放在 types.ts 中,每一个组件都有自己的 type 文件,用于保存各种数据的类型。
hooks
useState
- 定义试图值类型
- 定义试图引用类型
- 试图异步更新 使用 async/await
- 避免较多的数据
- 范型约束
useRef
- 引用 dom
- 引用 值
- 引用 卸载防止内存泄漏
# 引用 dom
const Page: React.FC<any> = () => {
const domRef = useRef<HTMLDivElement>(); # 引用 dom
const valueRef = useRef<boolean>(false); # 引用基础类型值
const refRef = useRef<boolean>({}); # 引用引用类型值
React.useEffect(() => {
return() {
domRef.current = undefined; # 卸载 dom 引用,防止内存泄漏
value.current = false; # 卸载普通值
refRef.current = {} # 卸载引用类型的值
}
}, [])
}
useEffect
专门处理副作用,类型上能讲的不多。
Props
props 的类型能说的就比较多了,那么如何定义 props 的类型?