关于Hook用法简单介绍

目标：

- hooks：useState,useEffect,useRef等hooks的使用

- redux：useDispatch, reducer, useSelector等的使用

1.useEffect

useEffect ==>用来管理副作用函数，第一个参数为回调函数，第二个参数为数组即[]，数组定义依赖项 在typescript中使用和javascript中使用完全一致

用法//
useEffect(() => {
  setInterval(()=>{
    
  },1000)
}, [])

2.useStat

useStat ==>用来定义一个属性，或来修改属性值

//Ts中用法
// 使用泛型
const [name, setName] = useState<string>('张三')
const [age, setAge] = useState<number>(28)
const [isProgrammer, setIsProgrammer] = useState<boolean>(true)

// 如果你在set函数中的参数不符合声明的变量类型，程序会报错
<button onClick={() => setName(100)}>按钮</button>  // 报错



//进阶用法
type Channel = { id: number, name: string}[]
const [age, setAge] = useState<Channel[]>([])

3.useRef

useRef==>用来获取非受控组件的值

const inputRef = useRef(null)
<input type="text" ref="inputRef" />
onClick = () => {
  console.log(inputRef.current.value)  // 这里报错
}

这里是因为inputRef.current，系统判断为null，后面不能为.value所以报错

//正确写法 
const inputRef = useRef<HTMLInputElement>(null)
console.log(inputRef.current!.value) //配合非空断言

---

redux在ts中基本使用

4.useSelector

useSelector==>用来拿到仓库里的数据

// 之前获取数据
const todos = useSelector( state  => state.todos) // 这里会报错

//正确写法
const todos = useSelector<{todos:[]} ,{id:number, name:string,isDone:boolean}[]>(state => state.todos)
console.log(todos)

获取RootState的类型

对于4模块的简单运用就可以使用store.getState()方法

通过这个方法可以使用typeof 再配合 ReturnType内置方法使用 下面来个例子就明白了

export type RootState = ReturnType<typeof store.getState>



//再将上述RootState导入到需要用到useSelector的组件中再进行如下操作
import { RootState } from '../store'

// 获取todos数据
const todos = useSelector((state: RootState) => state.todos)

5.useDispatch

useDispatch ==>一般用于发异步请求 在typescript中使用和javascript中使用完全一致

import { Dispatch } from "react"
import { useSelector, useDispatch } from "react-redux"

import { RootStateType } from '../store'
export default function Home() {
    const dispatch = useDispatch<Dispatch<{type:string,payload:any}>>()
    dispatch({
        type: 'abc',
        payload: 123
    })