useEffect ——React 个人学习笔记（9）

useEffect

这啥

用来执行副作用的

跟vue的watch差不多吧

useEffect(setup, dependencies?)

• setup函数 执行副作用的函数,可以返回一个cleanup函数 在组件卸载的时候执行
• dependencies 依赖数组,引用所有响应式值的列表

基本使用

import { useEffect, useState } from 'react'

function Effect() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`点击了${count}次`)
  })
  return (
    <>
      <p>
        点击了
        {count}
        次
      </p>
      <button onClick={() => setCount(count + 1)} type="button">点击</button>
    </>
  )
}

export default Effect

执行时机自己体会一下哈哈哈

只在必要的时候给useEffect添加依赖项 避免一些不必要的重新渲染

清除副作用

  useEffect(() => {
      return () => {
      // 会在组件卸载时执行
      }
  })

可以用来清除一些定时器或者时间监听器

来一个简单的例子

  useEffect(() => {
    const timeout = setTimeout(() => {}, 1000)
    return () => {
      clearTimeout(timeout)
    }
  })

跳过初始渲染

改造一下就行了

import { useEffect, useRef, useState } from 'react'

function Effect() {
  const [count, setCount] = useState(0)
  const mount = useRef(false)
  useEffect(() => {
    if (mount.current)
      console.log(`点击了${count}次`)
    else
      mount.current = true
  }, [count])
  return (
    <>
      <p>
        点击了
        {count}
        次
      </p>
      <button onClick={() => setCount(count + 1)} type="button">点击</button>
    </>
  )
}

export default Effect