useMemo和useCallback

useMemo 和 useCallback 是 React 的两个高级 Hooks，分别用于优化渲染性能和避免不必要的重新渲染，和vue中的计算属性computed相似（缓存）

1.useMemo

useMemo 用于避免在每次渲染时都执行高开销的计算。它会返回一个 memoized（缓存）的值，这个值仅在其依赖项发生变化时才会重新计算。

import React, { useState, useEffect, useMemo } from 'react';

function App() {

  const [x, setx] = useState(0)

  const [y, sety] = useState(0)

  console.time("xxx")

  const computedValue = useMemo(() => {

    let a = 0;

    for (let i = 0; i < 1000000000; i++) {

      a += y

    }

    return a

  }, [y])

  console.timeEnd("xxx")

  console.log(computedValue)

  return (

    <div>

      <div>   x:{x};;;;y{y}</div>

      <div>

        <button onClick={() => setx(x + 1)}>xxx</button>

        <button onClick={() => sety(y + 1)}>yyy</button>

      </div>

    </div>

  )

}

export default App

当y发生变化时computedValue会重新计算，x变化时候由于computedValue没有依赖x，所以不会重新计算

2.useCallback

useCallback 用于返回一个记忆化的回调函数。只有当其依赖项发生变化时，该函数才会更新。这有助于避免在每次渲染时都创建新的函数实例，从而提高性能并减少不必要的重新渲染。

import React, { useState, useCallback } from 'react';

function ParentComponent() {

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

// 使用 useCallback 来记忆化这个回调函数

// 注意这里我们没有将 count 作为依赖项，因此 handleIncrement 不会随着 count 的变化而变化 const handleIncrement = useCallback(() => {

setCount(count => count + 1);

}, []);

// 空数组意味着 handleIncrement 不会基于任何 props 或 state 的变化而重新创建

return (

<div> <p>Count: {count}</p>

<ChildComponent onIncrement={handleIncrement} />

<button onClick={handleIncrement}>Increment</button>

</div>

);

}

function ChildComponent({ onIncrement }) {

// ChildComponent 可能会基于 onIncrement 的引用是否改变来决定是否重新渲染

// 使用 useCallback 可以确保即使 ParentComponent 重新渲染，onIncrement 的引用也不会改变（除非我们显式地将它作为依赖项）

return (

<div> <button onClick={onIncrement}>Increment from Child</button> </div> );

}

export default ParentComponent;

ParentComponent 有一个状态 count 和一个用于增加 count 的回调函数 handleIncrement。handleIncrement 是通过 useCallback 创建的，并且没有依赖任何变量（依赖项数组是空的 []）。这意味着，无论 ParentComponent 渲染多少次，handleIncrement 的引用都将保持不变。

ChildComponent 接收 onIncrement 作为 prop，并可能基于这个 prop 的引用是否变化来决定是否重新渲染。因为 handleIncrement 是通过 useCallback 创建的，并且没有依赖任何变量，所以即使 ParentComponent 重新渲染，ChildComponent 接收到的 onIncrement 引用也会保持不变，这有助于避免不必要的渲染。