React useCallback使用教程

//最简单用法
   useEffect(() => {
     //只有方法体，相当于componentDidMount和componentDidUpdate中的代码
    document.title = count;
  })
  //加返回值用法
  useEffect(() => {
    //添加监听事件，相当于componentDidMount和componentDidUpdate中的代码
    window.addEventListener('resize', onChange, false);
    //返回的函数用于解绑事件，相当于componentWillUnmount中的代码
    return () => {
      window.removeEventListener('resize', onChange, false)
    }
  })
  //加空数组参数用法
  useEffect(() => {
    // 相当于 componentDidMount
    window.addEventListener('resize', onChange, false)
    return () => {
      // 相当于 componentWillUnmount
      window.removeEventListener('resize', onChange, false)
    }
  }, []);
  //加监听值用法
  useEffect(() => {
   //只有当count的值发生变化，此函数才会执行
    console.log(`count change: count is ${count}`)
  }, [ count ]);

// 用于记录 getData 调用次数
let count = 0;
function App() {
  const [val, setVal] = useState("");
  function getData() {
    setTimeout(()=>{
      setVal('new data '+count);
      count++;
    }, 500)
  }
  useEffect(()=>{
    getData();
  }, []);
  return (
    <div>{val}</div>
  );}

// 用于记录 getData 调用次数
let count = 0;
function App() {
  const [val, setVal] = useState("");
  function getData() {
    setTimeout(() => {
      setVal("new data " + count);
      count++;
    }, 500);
  }
  return <Child val={val} getData={getData} />;}function Child({val, getData}) {
  useEffect(() => {
    getData();
  }, [getData]);
  return <div>{val}</div>;}

useEffect(() => {
  getData();}, []);

const getData = useCallback(() => {
  setTimeout(() => {
    setVal("new data " + count);
    count++;
  }, 500);}, []);

document.addEventListener('mousemove',handleMouse,true)

onst handleMouse= useCallback(() => {
//xxxx
    console.log("clicking");
  }, []);