React v16.6.0 发布，新增 lazy, memo 和 contextType 等便捷特性

栏目: 软件资讯 · 发布时间: 6年前

内容简介：React 开发团队于2018年10月24日在官方博客宣布了 React 16.6.0。开发团队表示，该版本新增了不少便利的特性，下面我们不妨去了解一下吧！按照官方的说法，React.memo() 主要是用于函数式组件，作为 PureCompon...

React 开发团队于2018年10月24日在官方博客宣布了 React 16.6.0。开发团队表示，该版本新增了不少便利的特性，下面我们不妨去了解一下吧！

按照官方的说法，React.memo() 主要是用于函数式组件，作为 PureComponent 的替代方案；React.lazy() 则是使用 Suspense 进行代码分割的方法；新增的 contextType 则是作为一种更符合使用习惯的方式用于从类订阅上下文。

React.memo

Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

React.lazy: Code-Splitting with Suspense

You may have seen Dan’s talk about React Suspense at JSConf Iceland. Now you can use the Suspense component to do code-splitting by wrapping a dynamic import in a call to React.lazy().

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

The Suspense component will also allow library authors to start building data fetching with Suspense support in the future.