React中的useEffect四种用法分享

来自:网络
时间:2023-07-25
阅读:
目录

什么是 useEffect ?

官方解释 : useEffect 是一个 React Hook,它允许你将组件与外部系统同步。

什么意思 ? 个人理解就是 它能根据不同的依赖值或者返回值,在不同的时机进行执行。

我们先来说说 第一种用法

1 : useEffect 中 触发更新

示例1 : 当我们在组件创建的过程,自动执行某些操作的时候 , 那我们可以在函数式组件中这样

错误示例

import { useEffect } from 'react'
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
    initData()
})
const initData = () => {
    setCount(count + 1)
}
return ( <div> {count} </div> )
}

如果你这种用 useEffect 你会发现 什么问题 ?

当我们组件 渲染完成去执行 useEffect 调用 initData 函数 函数通过 setCount 设置值触发更新,一旦更新 useEffect 又会在渲染的最后执行,这样就照成了 死循环

所以 你应该这样写 ,传入 useEffect 第二个参数 空数组,代表组件渲染过程中只执行一次

正确示例

import { useEffect } from 'react'
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
    initData()
}, [])
const initData = () => {
setCount(count + 1)
}
return ( <div> {count} </div> )
}

2 : 用法2 重复的 useEffect

示例2 : 当我们在组件渲染的过程中 ,如果你写了多个useEffect 它会怎么做 ?

import { useEffect, useState } from 'react';
function Effect() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('111');
  })
  useEffect(() => {
    console.log('222');
  })
  return (<div> {count} </div>)
}
export default Effect

React中的useEffect四种用法分享

想当然 , 它不会覆盖前面的 useEffect ,会根据你的 编写顺序进行收集,然后循环执行(当然这只是我的猜测,暂时还没看react源码)

3 :依赖值触发回调

当你想去依赖某些变量的时候去触发回调函数,你可以这样。

import { useEffect, useState } from 'react';
function Effect() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('count发生了变化最新值为' + count);
  }, [count])
  return (<div>
    <div>
      {count}
    </div>
    <button onClick={() => setCount(count + 1)}>加1</button>
  </div>)
}
export default Effect

React中的useEffect四种用法分享

当你的第二个参数是数组,并且是依赖项,组件初次渲染也会执行,这是为什么呢 ?

解答 : 如果从 react useState Hook 来说,也就是 react 将你传入的 默认值 给你重新赋值了,所以发生了变化,因此 useEffect 发生了更新

4 :useEffect 的返回值

当useEffect 传入的 回调函数有返回值时并且为一个 函数的时候,它会怎么做?

import { useEffect, useState } from 'react';
const Room = () => {
  useEffect(() => {
    console.log("子组件渲染完成")
    return () => {
      console.log("子组件useeffect 回调函数执行")
    }
  }, [])
  return (<div>
    这是我的房间 , 大家一起来玩呀
  </div>)
}
function Effect() {
  const [show, setShow] = useState(true)
  return (<div>
    <div>
      {show && <Room></Room>}
    </div>
    <button onClick={() => setShow(!show)}>加1</button>
  </div>)
}
export default Effect

React中的useEffect四种用法分享

解答 : useEffect函数 的返回值 如果是函数时 它会在组件销毁的时候自动回调该函数,你可以在该函数中做一些清理操作,等等

结束啦

好了,最后到这次本章了解的知识就到此结束了,如果有哪里写的不对的地方或者有更好的使用方式,欢迎大家在评论区留言!

返回顶部
顶部