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...