Effect基础用法整理

Effect :

初次进入的时候 会执行一次页面加载触发 相当于componentDidDidMount

useEffect(()=>{})不传第二个值 只要是状态改变就会触发 ====componentDidUpdate

useEffect(()=>{},[])传入空数组 只会页面初始化componentDidMount

后面 页面状态怎么变化 都不会走 因为数组为空 监听值为空 useEffect(()=>{},["xx"]) 只要是"xx"状态改变就会触发 ====computed 或者说 是带有深度监听的watch

import React,{useEffect,useState} from 'react'
//Effect  :
//初次进入的时候 会执行一次页面加载触发 相当于componentDidDidMount 
//useEffect(()=>{})不传第二个值  只要是状态改变就会触发 ====componentDidUpdate
//useEffect(()=>{},[])传入空数组  只会页面初始化componentDidMount 
//  后面 页面状态怎么变化 都不会走 因为数组为空 监听值为空
//useEffect(()=>{},["xx"]) 只要是"xx"状态改变就会触发 ====computed 或者说 是带有深度监听的watch
//useEffect(()=>{
    // return ()=>{}  组件卸载的时候触发 ===componentWillUnmount 
//}) 

export default function Effect() {
    const [count , setCount]=useState(5)
   
    useEffect(()=>{
      return ()=>{  
        console.log("卸载useEffectPlus+++++DidMount")
       }
      
     
    },[])
   const handel=()=>{
    // let time=
    setInterval(() => {
       setCount(count-1) 
    }, 1000)
    setCount(count+1)
   }

  return (
    <div>Effect
       
        <button onClick={handel}>按钮 </button>======={count}
    </div>
  )
}

父组件

import React,{useEffect,useState} from 'react' Effect : 页面加载触发 相当于didmount

不传第二个值 想当于updata 任何状态改变都会触发

传入第二个数组 相当于watch 监听传入值得状态

传入空数组 只会页面初始化didmount 后面 页面怎么变化 都不会走

import React,{useEffect,useState} from 'react'
//Effect  :
//页面加载触发 相当于didmount 
//不传第二个值 想当于updata  任何状态改变都会触发
//传入第二个数组  相当于watch 监听传入值得状态
//传入空数组  只会页面初始化didmount   后面 页面怎么变化 都不会走

import Effeplus from './Effeplus'
export default function Effect() {
    const [count , setCount]=useState(1)
    const [count2 , setCount2]=useState(2)
    const [flag , setflag]=useState(false)
    useEffect(()=>{
        console.log("useEffect+++++didMount");
        console.log("updata+watch");
    },[count])
   const handel1=()=>{
    setCount(count+1)
   }
   const handel=()=>{
    setCount2(count2+1)
   }
    const handelChange=()=>{
setflag(!flag)
    }
  return (
    <div>Effect
        <button onClick={handel1}>按钮 </button>======={count}
        <button onClick={handel}>按钮 </button>======={count2}
        <button onClick={handelChange}>按钮 </button>======={count2}
         {flag&&<Effeplus></Effeplus>}
    </div>
  )
}