跳至主要内容

[Tips] React 從新手到進階 - Learn the weird part of React

Render​

什麼時候 re-render​

推薦閱讀

一般來說，沒有用任何優化的情況下：

  • Parent Component 一旦 re-render，它的所有 Child Component 就會 re-render
重點

如果你用 useCallback 的目的只是想要避免 Children Components re-render，不要這麼做，因為（再沒有搭配 React.memo 前）它沒用。

避免 parent re-render 後 child component re-render​

使用 useMemo​

其中一種方式時使用 useMemo，例如：

export const Page = () => {
  const [counter, setCounter] = useState(0);

  const memoizedCountriesList = useMemo(() => <CountriesList />, []);

  return (
    <div>
      <h1>Country settings</h1>
      <button type="button" onClick={() => setCounter(counter + 1)}>
        Click here to re-render Countries list (open the console) {counter}
      </button>

      {memoizedCountriesList}
    </div>
  );
};
重點

不要在一個 React 元件中建立另一個元件（例如，這張圖），盡可能把每個元件獨立出來。每個在 React 元件中所建立的元件，只要這個 React 元件一 re-render，內層的元件就需要從 DOM unmount、re-mount，這是非常消耗效能的事。

state​

state 的值為什麼和我想的不同​

Optimization​

props 沒有變更的 component 要如何避免它重新 render​

了解 React 什麼時候會重新 render​

Hooks​

useRef​

  • usePrevious
  • keep function do not changed