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

内容简介：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.

Note: This feature is not yet available for server-side rendering. Suspense support will be added in a later release.

详情请查看发布公告，点此获取源码。

【声明】文章转载自：开源中国社区 [http://www.oschina.net]

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。