react useEffect 的使用学习记录

useEffect 是react hook函数, 他不是由事件引起而是渲染本身引起的操作，比如发送ajax，操作dom等

import { useEffect } from 'react'

function App(){
   useEffect(() => {
       // 渲染完成执行，
   })
    return (
       <div></div>
    )
}

useEffect 可传入两个参数第一个参数是渲染完成后的副作用函数, 第二个是依赖项

当不传入依赖项，会在组件渲染完成执行和组件状态改变执行副作用函数
当传入依赖项为空，只会在组件渲染完成执行
当传入指定依赖项，会在组件渲染完成执行，和指定依赖项状态更新执行

import { useEffect, useSate } from 'react'

function App(){
    const [ count. setCount] = useState()
    // 当不传入依赖项， 渲染完成 + 组件状态发生改变
    useEffect(() => {
        console.log("执行了") 
    })
    
    // 当传入依赖项为空数组   只会在渲染完成执行
     useEffect(() => {
        console.log("执行了") 
    }, [])
    
    // 当传入指定依赖项 会在组件渲染完成 count状态更新执行
    
    useEffect(() => {
        console.log("执行了") 
    }, [count])
    
    const handelConunt = () => {
        setCount(count + 1)
    }
    return (
        <div>
            <button onClick={handelConunt}>+</button>
        </div>
    )
}

清除useEffect 副作用

以下示例演示了在useEffect里定义了一个定时器当我们在隐藏son组件时定时器依旧会执行这时候我们就要清除副作用函数

import { useEffect, useState } from "react"

function Son(){
    useEffect(() => {
       setInterval(() => {
           console.log("执行了")
       }, 1000)
    }, [])
    return(
        <div>
            我是son组件
        </div>
    )
}
function App(){
    const [ time, setTime ] = useState(true)
    return (
        <div>
          { time && <Son />}
          <button onClick={setTime(false)}>隐藏Son组件</button>
        </div>
    )
}

清除

import { useEffect, useState } from "react"

function Son(){
    useEffect(() => {
       const timer= setInterval(() => {
           console.log("执行了")
       }, 1000)

       return(() => {
         clearInterval(timer)
       })
    }, [])
    return(
        <div>
            我是son组件
        </div>
    )
}
function App(){
    const [ time, setTime ] = useState(true)
    return (
        <div>
          { time && <Son />}
          <button onClick={setTime(false)}>隐藏Son组件</button>
        </div>
    )
}

react useEffect 的使用 学习记录

react useEffect 的使用学习记录