• useMemo 接受两个参数，第一个参数是一个函数，返回值用于产生保存值。 第二个参数是一个数组，作为 dep 依赖项，数组里面的依赖项发生变化，重新执行第一个函数，产生新的值。

import React, { useMemo, useState } from "react";
import './App.css';

function App() {
    let [num1, setNum1] = useState(0);

    const add1 = () =>{
      setNum1(num1+1);
    }

    let newNum: any = useMemo(()=>{
      /** 逻辑运算 **/
     return num1 * 10;
    },[ num1 ]) // 只有 num1 改变的时候，重新计算newNum的值。
  
    return (
        <div className="App">
          <h1 onClick={add1}>num1：{num1}</h1>
          <h1>num1 * 10 = {newNum}</h1>
      </div>
    );
}

export default App;

• 减少不必要的 DOM 循环

import React, { useMemo, useState, useRef} from "react";
import './App.css';

function App() {
    let [items, setItems] = useState(['张三','李四','王五']);
    const inputRef = useRef<any>(null);

    const add = () =>{
      console.log()
      let value = inputRef.current.value;
      if(value){
        items.push(value);
        setItems(Object.assign([], items));
      }
    }

    return (
         /* 用 useMemo 包裹的items可以限定当且仅当items改变的时候才更新此items，这样就可以避免items重新循环 */
        <div className="App">
          <input type="text" ref={inputRef}/>

          <button onClick={add}> 加一个 </button>
          {useMemo(() => (
                <div>{
                  items?.map((v, i) => (
                        <p key={i} > {v} </p>
                    ))}
                </div>
          ), [items])}
      </div>
    );
}

export default App;

• 减少子组件渲染

/* 只有当props中，list列表改变的时候，子组件才渲染 */
const  goodListChild = useMemo(()=> <GoodList list={ props.list } /> ,[ props.list ])