标签：疑惑 const 测试 num setNum 刷新 useEffect 页面

1.监听组件自己的数据

第一种：组件内数据不发生改变，react自带的diffling算法，起了作用，页面不刷新，回调也不会执行

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

export default function C() {
    const [num,setNum] = useState(0);
    useEffect(()=>{
        console.log("我被执行了");
    })
    const add1 = ()=>{
        setNum(num)
    }
  return (
    <div>
      <input type="text" placeholder={num}/>
      <button onClick={()=>add1()}>+1</button>
    </div>
  )
}

 

 第二种：第二参数啥也不写，只要组件里面num变了：useEffect中的回调一直执行；页面一直刷新，刷新也就意味着再一直渲染

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

export default function C() {
    const [num,setNum] = useState(0);
    useEffect(()=>{
        console.log("我被执行了");
    })
    const add1 = ()=>{
        setNum(num+1)
    }
  return (
    <div>
      <input type="text" placeholder={num}/>
      <button onClick={()=>add1()}>+1</button>
    </div>
  )
}

 

 第三种：useEffect第二参数是一个[]，只要组件内数据num改变，只执行一次回调，之后不再执行该回调；页面一直渲染，

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

export default function C() {
    const [num,setNum] = useState(0);
    useEffect(()=>{
        console.log("我被执行了");
    },[])
    const add1 = ()=>{
        setNum(num+1)
    }
  return (
    <div>
      <input type="text" placeholder={num}/>
      <button onClick={()=>add1()}>+1</button>
    </div>
  )
}

 

 第四种：useEffect第二参数是num依赖，即[num]，只要num改变，就会执行回调，否则不执行回调；页面一直刷新；当第一次数据改变之后，比如+1后，num=2，进行setNum后，useEffect回调不执行，但是页面刷新一次，此后执行该操作，页面将不再刷新，除非num改变，会再出现"页面刷新一次，此后执行该操作，页面将不再刷新"。

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

export default function C() {
    console.log(111)
    const [num,setNum] = useState(0);
    useEffect(()=>{
        console.log("我被执行了");
    },[num])
    const add1 = ()=>{
        setNum(num+1)
    }
    const shuaxin = ()=>{
        setNum(num)
    }
  return (
    <div>
      <input type="text" placeholder={num}/>
      <button onClick={()=>add1()}>+1</button>
      <button onClick={()=>shuaxin()}>刷新</button>
    </div>
  )
}

监听自己的组件的数据总结：

1. 首先整个组件内数据不变，useEffect回调、页面刷新只执行一次
2. 整个组件内数据先发生改变，回调一次页面刷新一次，随后不变，回调不执行，页面刷新一次，也就是说，只要整个组件内数据发生改变，页面一直刷新，回调看第二参数
3. 控制第二参数，不写，整个组件只要有数据改变，就执行回调；为【】，无论数据改变，回调只执行一次；为【num】监听num，只针对num变，回调就执行

2.监听组件外来数据

标签：疑惑,const,测试,num,setNum,刷新,useEffect,页面
From： https://www.cnblogs.com/qiao-16/p/16638838.html