React 源碼閱讀-7_038

React 源碼閱讀-7

memo

React.memo 爲高階組件。它與 React.PureComponent 非常相似，但它適用於函數組件，但不適用於 class組件。

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

如果你的函數組件在給定相同 props 的情況下渲染相同的結果，那麼你可以通過將其包裝在 React.memo 中調用，以此通過記憶組件渲染結果的方式來提高組件的性能表現。這意味着在這種情況下，React 將跳過渲染組件的操作並直接複用最近一次渲染的結果。

此方法僅作爲性能優化的方式而存在。但請不要依賴它來“阻止”渲染，因爲這會產生 bug。

默認情況下其只會對複雜對象做淺層對比，如果你想要控制對比過程，那麼請將自定義的比較函數通過第二個參數傳入來實現

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 傳入 render 方法的返回結果與
  將 prevProps 傳入 render 方法的返回結果一致則返回 true，
  否則返回 false
  */
}
export default React.memo(MyComponent, areEqual);

何時使用React.memo（）

組件經常重新渲染,又是差不多的內容.純展示組件,渲染相同的props,比如只是數字的更新,其他無變化.

// Initial render
<MovieViewsRealtime
  views={0}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>

// After 1 second, views is 10
<MovieViewsRealtime
  views={10}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>

// After 2 seconds, views is 25
<MovieViewsRealtime
  views={25}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>


function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <MemoizedMovie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  )
}
// etc

React.memo() and callback functions

這裏的 callback 指的是usecallback
react新增的api.還沒看到那一部分,暫時先 mark 一下

const MemoizedLogout = React.memo(Logout);

function MyApp({ store, cookies }) {
  const onLogout = useCallback(() => cookies.clear(), [cookies]);
  return (
    <div className="main">
      <header>
        <MemoizedLogout
          username={store.username}
          onLogout={onLogout}
        />
      </header>
      {store.content}
    </div>
  );
}

https://segmentfault.com/a/11...

https://dmitripavlutin.com/us...

https://zh-hans.reactjs.org/d...