[译]React v16.9 新特性

2019-08-15 admin

今天我们发布了 React 16.9。它包含了一些新特性、bug修复以及新的弃用警告,以便与筹备接下来的主要版本。

一、新弃用

重命名 Unsafe 生命周期方法

一年前,我们宣布 unsafe 生命周期方法重命名为:

  • componentWillMountUNSAFE_componentWillMount
  • componentWillReceivePropsUNSAFE_componentWillReceiveProps
  • componentWillUpdateUNSAFE_componentWillUpdate

React v16.9 不包含破坏性更改,而且旧的生命周期方法在此版本依然沿用。但是,当你在新版本中使用旧的生命周期方法时,会提示如下警告:

Warning:componentWillMount has been renamed,and is not recommended for use.

正如警告所示,对于每种 unsafe 的方法,通常有更好的解决方案。但你可能没有过多时间去迁移或测试这些组件。在这种情况下,我们建议运行一个自动重命名它们的 codemod 脚本:

cd your_project
npx react-codemod rename-unsafe-lifecycles

(注意:这里使用的是 npx,不是 npmnpx 是 Node 6+ 默认提供的实用程序。)

运行 codemod 将会替换旧的生命周期,如 componentWillMount 将会替换为 UNSAFE_componentWillMount :

Codemode in action

新命名的生命周期(例如:UNSAFE_componentWillMount)在 React 16.9 和 React 17.x 继续使用,但是,新的 UNSAFE_ 前缀将帮助具有问题的组件在代码 review 和 debugging 期间脱颖而出。(如果你不喜欢,你可以引入 严格模式(Strict Mode)来进一步阻止开发人员使用它 。)

点击此链接,学习更多关于 版本策略以及稳定性承诺

弃用:javascript: URLs

javascript: 开头的 URL 很容易遭受攻击,因为它很容易意外在标签中(<a href>)引入未经处理的输出,造成安全漏洞。

const userProfile = {
  website: "javascript: alert('you got hacked')",
};
// This will now warn:
<a href={userProfile.website}>Profile</a>

在 React 16.9 中,这种模式将继续有效,但它将输出一个警告,如果你逻辑上需要使用 javascript: 开头的 URL,请尝试使用 React 事件处理程序代替。(万不得已,你可以使用 dangerouslySetInnerHTML 来规避保护,但仍然是不鼓励使用的并且往往会导致安全漏洞。)

在未来的主要版本中,如果遇到 javascript: 形式的 URL,React 将抛出错误。

弃用 “Factory” 组件

在用 Babel 编译 JavaScript 类流行前,React 支持 “factory” 组件,它使用 render 方法返回一个对象。

function FactoryComponent() {
  return { render() { return <div />; } }
}

这种模式令人困惑,因为它看起来太像一个函数组件,但它不是一个。(函数组件只会返回像上述示例中的 <div /> )。

这种模式几乎从未在外部使用过,并且支持它会导致 React 变大、变慢。因此,我们在 16.9 中弃用此模式,并且遇到时,输出警告。如果你在项目中依赖此组件,可以添加 FactoryComponent.prototype = React.Component.prototype 作为解决方法。或者,你可以将它转换为 class 组件或函数组件。

我们预计大多数代码库不会受此影响。

二、新特性

用于测试的一部函数 act()

React 16.8 引入了名为 act() 的新测试实用程序来帮助你编写更匹配浏览器行为的测试代码。例如,对单个 act() 中的多个状态更新进行批处理。这与 React 已有的处理真实浏览器事件时的工作方式相匹配,并有助于为将来 React 组件更频繁地批处理更新做准备。

然而,React v16.8 中的 act() 仅支持同步函数,有时,你可能在测试环境下看到以下警告,但无法轻易修复:

An update to SomeComponent inside a test was not wrapped in act(...).

在 React 16.9 中 act() 支持异步函数 ,你可以在调用它时,使用 await

await act(async () => {
  // ...
});

这将解决以前无法使用 act() 的情况,例如当 state 更新位于异步函数中时。因此,你现在应该能够测试中修复所有关于 act() 的警告了

我们听说,现在还没有足够的信息关于如何使用 act() 编写测试用例。新的测试技巧指南介绍了一些常见方案,以及 act() 如何帮助您编写良好的测试。这些示例使用原生 DOM API,但您也可以使用 React Testing Library 来减少样板代码。它的许多方法已经在内部使用 act()

如果你遇到 act() 的相关问题,请在问题跟踪器上告知我们,我们会尽力提供帮助。

使用 <React.Profiler> 进行性能评估

在 React 16.5 中,我们介绍了新的 React Profiler for DevTools 来帮助开发人员发现项目中的性能瓶颈。在 React 16.9 中,我们提供了一种编程的方式来收集测量你的代码,这就是 <React.Profiler> ,我们预计大多数较小的应用不会使用它,但在大型应用中跟踪性能回归会很方便。

<Profiler> 测量 React 应用程序渲染的频率以及渲染的 “成本” 。其目的是帮助识别应用程序中渲染缓慢的部分,并且可能更益与 memoization 等优化

可以将 <Profiler> 添加到 React 项目中的任意一个子树上,来测量该子树的渲染成本。它需要两个 propsid (string) 和 onRender 回调(function),当树中的组件"提交"更新时,React 将调用它。

render(
  <Profiler id="application" onRender={onRenderCallback}>
    <App>
      <Navigation {...props} />
      <Main {...props} />
    </App>
  </Profiler>
);

要了解关于 Profiler 和传递给 onRender 回调的参数的更多详细信息,请查看 Profiler 文档

注意:

Profiling 会增加一些额外的开销,因此在生产构建中禁止使用它。

如果想要在生产环境中进行性能分析,React 提供了特殊的生产构建,并启用了分析模式。在 fb.me/react-profiling 阅读更多关于如何使用此构建的更多信息。

三、显著的 bug 修复

此版本包含一些一些其他显著的提升:

  • <Suspense> 组件中调用 findDOMNode() 造成崩溃,已修复
  • 保存已删除的子树导致内存泄漏,已修复
  • useEffect 中,使用 setState 引起的循环引用,现在会输出错误(这与在 class 组件中的 componentDidUpdate 使用 setState 导致的错误一致)

感谢所有帮助解决这些问题的贡献者,你可以在此处找到完整的日志。

本文翻译自:https://reactjs.org/blog/2019…

走在最后,欢迎关注:前端瓶子君 前端瓶子君

[转载]原文链接:https://segmentfault.com/a/1190000020074818

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72510.html

文章标题:[译]React v16.9 新特性

相关文章
html5+JavaScript教程-微信打飞机小游戏源码
js &#x2F;&#x2F; JavaScript Document var c = document.getElementById(&quot;dotu&quot;); var cxt = c.getContext(&quot;2d&q...
2015-11-12
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
回到顶部