美文网首页
使用useEffect

使用useEffect

作者: 取个帅气的名字真好 | 来源:发表于2022-08-12 19:48 被阅读0次
  • 对应Vue的mounted加载。第二个参数为空数组
  useEffect(()=>{
    console.log('mounted加载');
  },[])
  • 对应mounted 或 update 之后更新。第一个参数正常函数
  useEffect(()=>{
    console.log('对应mounted 或 update 之后更新');
  })
  • 第一个参数的函数中返回一个函数
  useEffect(()=>{
    return ()=>{
      console.log('组件销毁执行'); 
    }
  })
  • 根据n变化之后而更新,第二个参数为[n].
import { useEffect, useState } from "react";

function xxx(){
  const [n, setN] = useState(1)
  const x = ()=>{
    setN(n + 1)
  }
  useEffect(()=>{
    console.log('n变化之后更新');
  },[n])

  return (<div onClick={x}>+1{n}</div>)
}
export default xxx

相关文章

  • 详解react useEffect 和 useLayoutEff

    useEffect 引用官方 使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件...

  • Hooks API

    useEffect useEffect的使用 参考上篇文章 执行时机: useEffect可以看做componen...

  • react ESlint警告: React Hook useEf

    问题在使用useEffect时,当我们将函数的声明放在useEffect函数外面时或者使用useState定义的历...

  • 使用useEffect

    对应Vue的mounted加载。第二个参数为空数组 对应mounted 或 update 之后更新。第一个参数正常...

  • useEffect 闭包陷阱

    使用 useEffect 比较容易出现问题是闭包陷阱,尽量尝试不使用 useEffect,见第4。 1. 错误演示...

  • 封装了一个react下拉刷新上拉加载组件

    useState,useEffect,React.memo,Ts 使用等

  • useEffect

    使用useEffect完成副作用操作。赋值给useEffect的函数会在组件渲染到屏幕之后执行。 在函数组件主体内...

  • useEffect和useLayoutEffect

    useEffect 该 Hook 接收一个包含命令式、且可能有副作用代码的函数 使用 useEffect 完成副作...

  • React Hook

    使用:在不编写class组件的情况下使用 useState useEffect / uselayoutEffec ...

  • 用 1 个Todolist 学会常用原生 Hook

    序言: 看完学会使用 useCallback, useState, useRef, useEffect, useC...

网友评论

      本文标题:使用useEffect

      本文链接:https://www.haomeiwen.com/subject/qzlfgrtx.html