react的三大hook-useState,useEffect,useRef

useState

介绍

  useState是react的一个内置的hook，主要用于渲染页面的数据，经常配合useEffect使用，useEffect用于检测useState的变化和更新useState的值。

例子

  useState需要接受两个参数，第一个是代表当前值的变量，第二个是一个更新值的方法。

interface Person{
    name:string
    age:number
    height:number
    identify:string
}
export default function App(){
   const [data,setData] = useState<Person>({...})

   return <div>
        <span>data.name</span>
        <span>data.age</span>
        <span>data.height</span>
        <span>identify</span>
   </div>
}

注意

  在更新useState的时候，执行的是异步操作，所以需要把更新操作放在事件或者useEffect里面，当useState更新后，在取值的时候取到的是旧值。如下：

  const [data,setData] = useState<Person>
  function xxx(){
      setData({***})
      const temp = data //此时取到的值不是最新的，因为setData是异步操作
  }

useEffect

介绍

  useEffect是一个在React中使用的hook函数，用于更新状态和执行回调函数。它会在组件的每次渲染过程中执行，并根据条件返回一个新的函数。

例子

  根据conditon的值来更新data的值。useEffect第一个参数是一个回调函数，第二个参数是依赖参数项。

   const [data,setData] = useState<Person>({...})
   const [condition,setCondition] = useState('****')
   useEffect(()=>{
    //   xxxxx
    //   xxxxx
    //   xxxxx
    setData({xxxxx})
   },[])
   return <div>
        <span>data.name</span>
        <span>data.age</span>
        <span>data.height</span>
        <span>identify</span>
   </div>

注意

  在选择依赖项的时候要注意，不然会产生死循环导致一直执行回调函数。

useRef

介绍

  useRef最常用的用法就是可以在获取dom元素（在react中并不推荐直接获取dom元素而是通过useREf绑定）。   其次useRef跟useState不一样，更新不会触发组件重新渲染，更新后可以立马获取到最新值。

例子

  与组件绑定后就可以获取dom元素，如果用typescript开发，在取值的时候要注意进行类型断言（(user.current as HTMLInputElement)）。

import { useRef } from "react"

export default function App(){
    const user = useRef(null)
    const pass = useRef(null)
    return <div>
        <div>用户<input type="text" ref={user}/></div>
        <div>密码<input type="text" ref={pass}/></div>
        <input type="button"  value="login" onClick={()=>{
             if(user.current!=null && pass.current!=null){
              console.log(`${(user.current as HTMLInputElement).value} and ${(pass.current as HTMLInputElement).value}`);
             }
        }}/>
    </div>
}

  如果要进行复杂类型的处理，推荐用useRef,因为用useRef更新值后可以立马获取最新值，而useState却不行。

useRef

  useRef可以及时更新值

import { useRef } from "react"
export default function App(){
    const vara = useRef(0)
    return <div>
        <input type="button"  value="login" onClick={()=>{
              vara.current++
              console.log(vara.current);
             }
        }/>
    </div>
}

运行结果

useState

  useState在更新值后，立即获取到的是上一个状态的旧值。

import {  useState } from "react"
export default function App(){
    const [vara,setVara] = useState(0)
    return <div>
        <input type="button"  value="login" onClick={()=>{
              setVara(old=>old+1)
              console.log(vara);
             }
        }/>
    </div>
}

运行结果

总结

  useState用于对页面的渲染，而且大多数需要配合useEffect使用，但是在复杂数据处理上有缺陷。   useEffect用于检测一些数据的变化执行相应回调函数，但是在选择依赖项时要谨慎选择。   useRef用于绑定dom元素和进行一些复杂数据处理，但是不能渲染到组件上。