自定义Hook useUpdate

useEffect 如何在第二次才更新n

有问题的写法

//更新
 //想在n更新的时候去更新
        //[]里面写了什么，那就是那个东西变了就去执行
        //注意：还没有点+1 ，控制台显示n变了是因为n从undefined 变成0了 

	useEffect(() => { 
	          console.log('n变了')
	        }, [n])
        

怎样在真正点击后才变化时才显示n变了？

思路

• 使用自定义Hook ，用一个state来记录n变化的次数，
• 判断一下，从第二次开始显示n变了

方法一：

代码如下

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

//第一个组件
const App = (props) => {

    const [m, setM] = useState(0);
    const [n, setN] = useState(0);
    const onClickN = () => {
      setN(n + 1);
    };
    const onClickM = () => { 
      setM(m + 1);
    }

    //写在App内
            //写一个state用来记n变了几次,默认0次
            const [nUpdateCount, setNUpdateCount] = useState(0);
            //需要每次n变化的时候把count加1
            //写useEffect 更新，给count+1
            useEffect(()=>{ 
              // setNUpdateCount(nUpdateCount+1) //这样写会有一个警告
              setNUpdateCount(x=> x+1)
            },[n])
             
             //加一个判断，如果count>1才显示n变了
            useEffect(() => { 
              if(nUpdateCount >1){  
                  console.log('n变了') 
                }
             },[nUpdateCount])


  return (
    <div>
      {n}
      <button onClick={ onClickN }>
        +1
      </button>
      <hr />
      {m}
      <button onClick={ onClickM }>
        +1
      </button>
      <hr/>
    </div>
  )
};



export default App;

方法二：自定义Hook useUpdate

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

  //解决useEffect 在n没真正变化的时候显示n变了 
    //方法二：自定义Hook
    //写在App组件外
    const useUpdate = (fn,array) =>{
      const [count, setCount] = useState(0);
      useEffect(() => {
        setCount( x => x+1);
      },[...array]);
      
      useEffect(()=>{
        if(count > 1){
          fn();
        }
      },[count]);
    };
//第一个组件
const App = (props) => {

    const [m, setM] = useState(0);
    const [n, setN] = useState(0);
    const onClickN = () => {
      setN(n + 1);
    };
    const onClickM = () => { 
      setM(m + 1);
    }
    
    //和useEffect一样的使用
    
    useUpdate(() =>{
      console.log("n变了");
    },[n])


	return (
	   <div>
	      {n}
	      <button onClick={ onClickN }>
	        +1
	      </button>
	      <hr />
	      {m}
	      <button onClick={ onClickM }>
	        +1
	      </button>
	      <hr/>
	    </div>
	  )
	};

export default App;