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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 包含用于函数组件的“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日志并进行多维度分析。
目录
相关文章
|
2月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
176 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
5天前
|
前端开发 API UED
React 按需加载 Lazy Loading
随着 Web 应用复杂度增加,页面加载速度成为影响用户体验的关键因素。React 提供了按需加载(Lazy Loading)功能,通过 `React.lazy` 和 `Suspense` 实现动态加载组件,减少初始加载时间,提升性能。本文从基础概念入手,探讨常见问题、易错点及解决方案,并通过代码示例详细说明。
16 0
|
1月前
|
前端开发
React Memo
10月更文挑战第11天
31 6
|
2月前
|
缓存 前端开发
React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
React中的`memo`是高阶组件,类似于类组件的`PureComponent`,用于避免不必要的渲染。`useCallback` Hook 用于缓存函数,避免在每次渲染时都创建新的函数实例。`memo`可以接收一个比较函数作为第二个参数,以确定是否需要重新渲染组件。`useMemo`用于缓存计算结果,避免重复计算。两者都可以用来优化性能,但适用场景不同:`memo`用于组件,`useMemo`和`useCallback`用于值和函数的缓存。
83 1
|
4月前
|
缓存 前端开发
react18【系列实用教程】memo —— 缓存组件 (2024最新版)
react18【系列实用教程】memo —— 缓存组件 (2024最新版)
110 0
|
4月前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
276 0
|
6月前
|
前端开发 UED 开发者
react路由懒加载lazy直接使用组件标签引发的问题?
react路由懒加载lazy直接使用组件标签引发的问题?
437 0
|
11月前
|
存储 前端开发 JavaScript
React Memo不是你优化的第一选择(二)
React Memo不是你优化的第一选择(二)
|
11月前
|
JSON 前端开发 JavaScript
React Memo不是你优化的第一选择(一)
React Memo不是你优化的第一选择(一)
|
6月前
|
前端开发 JavaScript UED
react中的forwardRef 和memo的区别?
react中的forwardRef 和memo的区别?
122 0