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

局长
 局长
发布于 2018年10月25日
收藏 6

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.

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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:React v16.6.0 发布,新增 lazy, memo 和 contextType 等便捷特性
加载中

最新评论(2

溪涧顽石
溪涧顽石
啊 ,lazy 好东西哟~
k
keep_wan
好。有了代码分割方案。不用再第三方了。我还是比较喜欢函数式编程
返回顶部
顶部