常用的react hook

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

Effect Hook

effect 效应;影响;结果 的意思 在react中 useEffect 可以在组件中执行操作

一般使用方法：

import { useEffect } from 'react'

useEffect(()=>{
    //一些方法
})

我最开始接触这个hook 是因为页面初始化后需要请求数据，加载进页面。 比如说有一个 getUserInfo() 的方法来拉去用户数据，那么可以：

import { useEffect ,useState} from 'react'
import { getUserinfo } from 'api'

const [userinfo,setUserinfo] = useState({})

useEffect(()=>{
    const ok = getUserinfo()
    
    setUserinfo(...ok)

})

Effect 还有一个返回函数，用以在react 清除的时候执行它，比如我们要在该页面加载后拉去用户信息。在页面卸载后再次把用户信息删除掉，这种情况下只需要在useEffect 中返回一个函数，在这个函数中定义删除用户信息的方法就可以了。

import { useEffect ,useState} from 'react'
import { getUserinfo } from 'api'

const [userinfo,setUserinfo] = useState({})

useEffect(()=>{
    const ok = getUserinfo()
    
    setUserinfo(...ok)
    
    return function clearUserinfo(){
        setUserinfo({})
    }

})

如果我们希望在组件中，随着父组件某个属性的变化，子组件做出相应的改变，也可以使用effect ，useEffect可以传入第二个参数，用以应对这种情况。

比如我们希望在 name变化的时候，子组件中随之相应变化

//子组件
const [name,setNmae] = useState()

useEffect(()=>{

   setName(name)

},[props.name])

react会自动帮你判断，props.name 是否变化了，如果变了就会做相应的方法，如果没有变化，就不会之星相应的操作。

那么如果只想执行一次effect ，可以在第二个参数处传入一个 [] 空数组。因为effect不依赖于props 或者state 中值，所以它只会运行一次。

import { useEffect ,useState} from 'react'
import { getUserinfo } from 'api'

const [userinfo,setUserinfo] = useState({})

useEffect(()=>{
    const ok = getUserinfo()
    
    setUserinfo(...ok)

},[])

如果第二个参数不传递[] 空数组的时候，会导致运行时，useEffect 更新状态，如果状态更新，就会再次出发useEffect。

第二个参数，[] 中可以传递多个值的时候，会比较每一个值，其中有一个变化的时候，就执行。