用法

• 将函数组件进行性能优化，作为纯组件

import React, { useCallback, useState, Fragment } from 'react';
import Child from './Child';

export default () => {

    const [count, setCount] = useState(0);

    const cb = useCallback(() => {
        setCount(count => count + 1);
    }, [count]);
    
    return (
        <Fragment>
            <div>count is {count}</div>
            <Child click={cb}/>
        </Fragment>
    );
}

import React, { memo } from "react";

type ChildProps = {
  click: () => void;
};

// 经过memo封装后，当props未发生变化时不会被重新渲染。
export default memo<ChildProps>((props) => {
  const { click } = props;
  console.log("i am child");

  return <div onClick={click}>i am child</div>;
});

• 监听某一个状态的变化，决定是否要触发相应的函数，类似useEffect，但useEffect主要用于副作用的逻辑处理，useMemo的callback用于处理高性能的计算逻辑。
• 官网介绍：https://zh-hans.reactjs.org/docs/hooks-reference.html#usememo

import React, { useState, useMemo } from "react";
import ReactDOM from "react-dom";

const App = () => {

  const [ a, setA ] = useState(0);
  const [ b, setB ] = useState(0);

  const memos = useMemo( () => {
    console.log('memos...')
    return a;
  }, [a] );


  const clickABtn = () => {
    setA(a + 1);
  }

  const clickBBtn = () => {
    setB(b + 1);
  }

  return (
    <>
      a: {a}
      <br />
      b: {b}
      <br />
      <button onClick={clickABtn}>A click</button>
      <br />
      <button onClick={clickBBtn}>B click</button>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));