>[danger]React中的useMemo和memo 在React中，`useMemo`和`memo`都是用來優化組件性能的API，但它們的使用場景和實現方式略有不同。 `useMemo`是一個React Hook，用于緩存函數執行的結果并返回該結果。它接收兩個參數：一個計算函數和一個依賴項數組。當依賴項發生變化時，`useMemo`會重新執行計算函數并返回新的結果。如果依賴項沒有變化，`useMemo`會直接返回緩存的結果，從而避免重復計算，提高性能。 下面是一個示例，演示如何使用`useMemo`來緩存計算結果： ```jsx function MyComponent({ a, b }) { const result = useMemo(() => { console.log("calculating..."); return a + b; }, [a, b]); return <div>Result: {result}</div>; } ``` 在上面的示例中，`useMemo`緩存了計算結果`a + b`，并且只在`a`或`b`發生變化時重新計算。因此，如果`a`或`b`沒有改變，`console.log`語句也不會被觸發。 另外一個用于優化組件性能的API是`memo`。它是一個高階組件(HOC)，用于封裝一個無狀態組件并返回一個新的組件。`memo`通過比較當前和前一個屬性(props)和狀態(state)的值，確定是否需要重新渲染組件。如果屬性和狀態的值沒有變化，`memo`會直接返回緩存的結果，從而提高性能。 下面是一個示例，演示如何使用`memo`來緩存組件的結果： ```jsx const MyComponent = memo(({ a, b }) => { console.log("rendering..."); return <div>Result: {a + b}</div>; }); ``` 在上面的示例中，`memo`封裝了一個無狀態組件，并緩存了其結果。如果`a`或`b`沒有改變，`memo`不會重新渲染組件。 需要注意的是，`useMemo`和`memo`都是用于優化組件性能的API，但它們的使用場景略有不同。`useMemo`適用于緩存計算結果，而`memo`適用于緩存組件渲染結果。同時，`useMemo`可以在函數組件中使用，而`memo`則需要封裝無狀態組件。