ReactHook useMemo

执行时机

• 在组件渲染过程中，React 会首先执行所有的 useMemo。这意味着 useMemo 返回的值会在渲染之前计算并缓存
• 紧接着，在所有 DOM 变更之后但在浏览器绘制之前执行 useLayoutEffect
• 浏览器绘制之后执行 useEffect

代码示例:

const set = new Set();
function App()
{
  const [count, setCount] = useState(1);
  const [memory, setMemory] = useState(set);
  const [count2,setCount2]=useState(2);

  
  const memoizedValue = useMemo(() => {
    memory.add(count);
    console.log(memory)
    return count;
  }, [count]);
  set.add(memoizedValue);
  console.log(memory)
  console.log('渲染')

  return <div>
      <h4>{count}</h4>
      <h4>{set.size}</h4>
      <h4>{count2}</h4>
      <h4>{memoizedValue}</h4>

      <div>
          <button onClick={() => setCount(count + 1)}>+</button>
          <button onClick={()=>{ setCount2(count2+1);setMemory(memory.add(memoizedValue));}}>回调</button>
          <button></button>
      </div>
  </div>;

}