React 官方发布 V16.6.0,新增支持 lazy,memo 和 contextType

简介: 包含用于函数组件的“PureComponent/shouldComponentUpdate”、用 Suspense 进行代码的分割、以及在类组件中获取 Context 的更简单的方法等。

原文作者:Sebastian Markbåge

译者:UC 国际研发 PPP

image.png

10 月 23 日,React 官方发布 React 16.6.0 正式版,此版本为我们带来了一些便捷的新功能。

包含用于函数组件的“PureComponent/shouldComponentUpdate”、用 Suspense 进行代码的分割、以及在类组件中获取 Context 的更简单的方法等。

让我们来看看完整的更新日志。

更新日志:
https://reactjs.org/blog/2018/10/23/react-v-16-6.html#changelog

React.memo

在类组件中,使用 PureComponent/shouldComponentUpdate 可以在 props 没有变化时(注:浅比较)减少渲染的次数。现在,你可以通过 React.memo 在函数组件中使用这一功能了。

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

React.lazy:用 Suspense 实现代码分割

你可能已经看过 Dan 在冰岛 JSConf 中关于 React Suspense 的演讲。现在你可以把需要动态引入的代码以参数的形式传递给 React.lazy(),然后再使用 Suspense 组件引用它,以此实现代码分割。

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

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

Suspense 组件还将支持在开始编译时动态获取编译需要的数据。

注意:此功能尚不可用于服务端渲染。将在之后的版本中添加Suspense support。

static contextType

在 React 16.3 中,我们引入了官方 Context AP I作为先前 Legacy Context API 的替代。

const MyContext = React.createContext();

结合我们收到的反馈,在类组件中采用新的 render prop API 可能会比较不现实。因此,我们添加了一个方便的 API 来访问类组件的上下文。

class MyClass extends React.Component {
  static contextType = MyContext;
  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* render something based on the value of MyContext */
  }
}

static getDerivedStateFromError()

React 16 引入了 Error Boundaries 来处理 React 渲染中抛出的错误。还有 componentDidCatch 这个生命周期函数,在发生错误后也会被触发。它非常适合于对错误日志的记录。你还可以调用 setState 来对用户展示不同的 UI。

在错误触发之前,我们会把抛出错误的渲染树的节点渲染为 null。这有时会破坏不期望其 ref 为空的父组件。也使它无法从服务器上的错误中恢复,因为服务端渲染不会触发 Did 的生命周期函数。

为此我们添加了另一种错误方法,允许你在渲染完成之前渲染降级 UI。请参阅 getDerivedStateFromError() 的文档。

注意:getDerivedStateFromError() 尚不可用于服务端渲染。但在将来的版本中,也将支持服务器端渲染。我们提前发布是希望你可以提前做好使用准备。

StrictMode 相关弃用

在 16.3 中,我们引入了 StrictMode 组件。它允许你选择对应用中潜在的问题作出警告。

我们向 StrictMode 已弃用 API 列表中新增了两个 API,如果你没有用 StrictMode,别担心,这个更新不会影响到你:

  • ReactDOM.findDOMNode() - 这个 API 经常被误用,并且大多数使用它都是不必要的。在 React 16 中它也可能出乎意料地慢。请参阅文档以了解可能的升级路径。
  • Legacy Context 使用 contextTypes 和 getChildContext - Legacy context 使得 React 更慢、更大。这就是为什么我们强烈建议升级到新的 context API。希望新增的 contextType API 能把这些变得容易些。

如果在升级时遇到问题,我们将很乐意收到你的反馈。

安装

npm 已经支持 React v16.6.0,要使用 Yarn 安装 React 16,请运行:

yarn add react@^16.6.0 react-dom@^16.6.0

要使用 npm 安装 React 16,请运行:

npm install --save react@^16.6.0 react-dom@^16.6.0

我们还通过 CDN 提供了 React 的 UMD 版本:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

有关详细的安装说明,请参阅文档。

文档地址:
https://reactjs.org/docs/installation.html

更新日志

React
添加 React.memo() 作为 PureComponent 在函数组件中的替代。(@acdlite in #13748)

添加 React.lazy() 代码拆分组件。(@acdlite in #13885)

React.StrictMode 现在会对 legacy context API 的使用作出警告。(@bvaughn in #13760)

React.StrictMode 现在会对 findDOMNode 的使用作出警告。(@sebmarkbage in #13841)

重命名 unstable_AsyncMode为unstable_ConcurrentMode。(@trueadm in #13732)

重命名 unstable_Placeholder 为 Suspense,delayMs 为 maxDuration。(@gaearon in #13799 和 @sebmarkbage in #13922)

React DOM
添加 contextType,用以更方便的获取类中的上下文。(@bvaughn in #13728)

添加 getDerivedStateFromError 生命周期方法以在将来的服务端渲染中捕获错误。(@bvaughn in #13746)

使用 而不是 时将会告警。(@trueadm in #13829)

修复 iOS Safari 上的灰色叠加层 bug。(@ philipp-spiess in #13778)

修复因覆盖 window.event 而导致的 bug。(@ sergei-startsev in #13697)

React DOM Server
添加支持 React.memo()。(@alexmckenley 编号为#13855)

添加支持 contextType。(@alexmckenley 和 @sebmarkbage in #13889)

Scheduler(实验性)
将包重命名为 scheduler。(@gaearon in #13683)

支持优先级,延续和包装回调。(@acdlite in #13720 和 #13842)

改进非 DOM 环境中的回退机制。(@acdlite in #13740)

将 requestAnimationFrame 提前。(@acdlite in #13785)

修复 DOM 检测更彻底。(@trueadm in #13731)

修复 interaction tracing 的 bugs。(@bvaughn in #13590)

将 envify transform 添加到包中。(@mridgway in #13766)

英文原文:

https://reactjs.org/blog/2018/10/23/react-v-16-6.html

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
5月前
|
前端开发 UED 开发者
react路由懒加载lazy直接使用组件标签引发的问题?
react路由懒加载lazy直接使用组件标签引发的问题?
152 0
|
5月前
|
前端开发 JavaScript UED
react中的forwardRef 和memo的区别?
react中的forwardRef 和memo的区别?
47 0
|
5月前
|
存储 前端开发 JavaScript
React Memo不是你优化的第一选择(二)
React Memo不是你优化的第一选择(二)
|
5月前
|
JSON 前端开发 JavaScript
React Memo不是你优化的第一选择(一)
React Memo不是你优化的第一选择(一)
|
存储 缓存 前端开发
Create React App 被 React 官方抛弃了吗?
在 Beta 版本的 React 新文档中,是有在显眼的位置提到推荐使用 Vite 启动的,而正式版文档则替换成了 React 社区的几个知名框架:
|
前端开发 调度
带你深入React 18源码之:useMemo、useCallback和memo
在这篇文章中,我们将探讨useMemo、useCallback和memo的用法和区别,并通过源码分析来理解它们的工作原理,开整!
带你深入React 18源码之:useMemo、useCallback和memo
|
前端开发
React的memo和useMemo的作用
React的memo和useMemo的作用
109 0
|
前端开发
react实战笔记113:react中memo的使用
react实战笔记113:react中memo的使用
54 0
react实战笔记113:react中memo的使用
|
前端开发
|
Kubernetes 前端开发 Cloud Native
React Server Components 遇上 Kubernetes,官方 Demo 改造之上云试玩
React Server Components 遇上 Kubernetes,官方 Demo 改造之上云试玩
119 0
React Server Components 遇上 Kubernetes,官方 Demo 改造之上云试玩