原文作者:Sebastian Markbåge
译者:UC 国际研发 PPP
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)
英文原文: