React Hooks使用 Memo/Callback Hooks

import React, { useState, useMemo, memo, useCallback } from "react";
// useMemo的写法与useState相同,但是调用时机不同,useState执行的是副作用，在组件渲染完成后执行，useMemo参与渲染，是在渲染的时候执行
const Foo = memo(function Foo(props) {
  // 配合memo使用
  console.log("Foo render");
  return <h1 onClick={props.goClick}>{props.count}</h1>;
});

// hooks组件
function App() {
  const [count, setCount] = useState(0); // useState 默认值 0 返回一个数组，第一个是变量，第二个修改变量的方法
  const [num, setNum] = useState(0);
  const double = useMemo(() => {
    return count * 2;
  }, [count === 3]); //[]为计算的条件，条件越精确，计算就越少

  // 第一种传递函数，未经优化处理直接渲染
  // const goClick = () => {
  //   console.log('====================================');
  //   console.log('Foo render');
  //   console.log('====================================');
  // }

  // 第二种通过useMemo传递函数, 优化渲染性能
  // const goClick = useMemo( () => {
  //   return () => {
  //     console.log('====================================');
  //     console.log('goClick render');
  //     console.log('====================================');
  //   }
  // },[])

  // 第三种通过useCallback函数，优化渲染性能，useCallback(()=>{},[]) 等价于 useMemo(()=>{return fn},[])，前提条件是useMemo返回的是一个函数才等价于useCallback

  // 不依赖变量
  // const goClick = useCallback(()=>{
  //   console.log('====================================');
  //   console.log('goClick render');
  //   console.log('====================================');
  // }, [])

  // 依赖变量的
  // const goClick = useCallback(() => {
  //   console.log('====================================');
  //   console.log('goClick render');
  //   console.log('====================================');
  //   setNum(num+1)
  // }, [num])

  // 省略依赖变量的
  const goClick = useCallback(() => {
    console.log("====================================");
    console.log("goClick render");
    console.log("====================================");
    setNum(num => num + 1); // 默认参数是 num
  }, []);

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点击{double}
      </button>
      <Foo count={double} goClick={goClick}></Foo>
    </div>
  );
}

export default App;