useHooks

import React, { useState, useEffect, useRef } from "react";

/**
 * react运行机制：
 * useState和useEffect，都是在页面render的时候生成了本次render的state，function，effects
 * 所以页面每次有更新，都会执行effect方法
 * 如果后面跟的是一个空数组，只会在第一次执行的时候调用。这样以后render的时候，都不会生成新的effects
 * 这样可能会导致，拿到的state不是最新的state
 * 如果要拿到最新的state，可以在数组后面监听某个值的变化，从而再去做effect的事情，保证这次的render是
 * state的更新，拿到最新的一份state的数据。
 * */ 


/**
 * useRef
 * 1、保存全局的一个状态，这样就不会导致状态的一个丢失，拿到的永远是最新一次render的状态。
 * 2、可以获取到dom的节点，调用方法。
 * **/

const LikeButton: React.FC = () => {
  const [count, setCount] = useState(0);
  const [on, setOn] = useState(false);
  const [pos, setPos] = useState({ x: 0, y: 0 });

  const countRef = useRef(0);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {  // 不传参的情况下，每次页面有更新都会执行一次
    document.title = `tap ${count} num`;
  }, [count])

  useEffect(() => { // react 在执行这次effect的时候，会把上次的effect清除
    console.log(' addEventListener')
    const changePos = (e: MouseEvent) => {
      setPos({ x: e.clientX, y: e.clientY })
    }
    // console.log(' addEventListener', pos);
    document.addEventListener('click', changePos);
    return () => {
      // 会在下一次执行上面 addEventListener 方法的时候，回调这个removeEventListener
      // 先把上次的状态清除
      // console.log(' removeEventListener', pos);
      document.removeEventListener('click', changePos);
    }
  }, []);

  return (
    <>
      <div onClick={() => { 
        setCount(count + 1); 
        countRef.current = (count + 1);

        if (inputRef.current) {
          inputRef.current.focus();
        }
        
      }}>相加<span>{count}</span></div>

      <div onClick={() => {
        console.log(' == 延迟3秒获取state ， 点击这个按钮，然后狂点相加的时候，alert弹出的count只会是点击按钮那一刻的count ==');
        setTimeout(()=>{
          alert(count);
          console.log(' === ref ==', countRef.current);
        }, 3000)
      }}>延迟3秒去获取状态的具体值</div>

      <div onClick={() => { setOn(!on) }}>{on ? 'on' : 'off'}</div>

      <div>posX{pos.x} === posY{pos.y}</div>
      <input ref={inputRef} />
    </>
  )
}

export default LikeButton;

自定义hooks

import { useEffect, useState } from "react";

/**
 * 自定义hooks
 * 但是这些hooks都是相互隔离的，A页面的pos和B页面的pos的数据是指向的不同内存
 * 虽然显示的数据是一样的，但是实际的内存指向都是不一样的
 * */ 

const useMousePostion = () => {
  const [pos, setPost] = useState({ x: 0, y: 0 });

  useEffect(()=>{
    const handleMove = (e: MouseEvent) => {
      setPost({ x: e.clientX, y: e.clientY });
    }
    document.addEventListener('mousemove', handleMove);
    return () => {
      document.removeEventListener('mousemove', handleMove);
    }
  }, [])
  return pos;
}

export default useMousePostion;




  const pos = useMousePostion();