React.memo() ⇒ Functional

一般情況父層的資料更新，父層與子層會一起渲染，React.memo只接收props傳遞值的變動更新子層，父層的state改變不會驅動子層更新，進而達到效能優化。

以下範例App state在變動時被React.memo包起來的Memo並不會被render

// App.js
import React from "react";
import Memo from "./Memo";

export default function App() {
  const [isRender, setIsRender] = React.useState(true);
  console.log("render");
  return (
    <>     
			<Memo />
      <button onClick={() => setIsRender(!isRender)}>Change</button>
    </>
  );
}

// Memo.js
import React from "react";

// export default () => {}
export default React.memo(() => {
  console.log("Memo render");
  return (
    <>
      <div>React Memo Test !</div>
    </>
  );
});

PureComponent ⇒ class

不用自己實作shouldComponentUpdate，PureComponent會透過 shallow-compare （類似淺拷貝的方法）比較，與React.memo()功用類似

// App.js
import React from "react";
import Pure from "./Pure";

export default function App() {
  const [isRender, setIsRender] = React.useState(true);
  console.log("render");
  return (
    <>     
			<Pure />
      <button onClick={() => setIsRender(!isRender)}>Change</button>
    </>
  );
}

// Pure
import React from "react";

// class Pure extends React.Component {
class Pure extends React.PureComponent {
  render() {
    console.log("pureComponent");
    return (
      <>
        <div>Pure Pure</div>
      </>
    );
  }
}

export default Pure;