摘要：更新日志应对添加以编程方式收集性能测量。在和在将弃用为常见攻击面。添加对事件的支持。在从调用时发出警告，创建循环。在和从错误的渲染器使用时发出警告。
2019年8月8日，我们发布了React 16.9。它包含几个新功能，错误修正和新的弃用警告，以帮助准备未来的主要版本。
新的版本：
重命名不安全的生命周期方法
一年多以前，我们宣布重新命名不安全的生命周期方法：
componentWillMount → UNSAFE_componentWillMount componentWillReceiveProps → UNSAFE_componentWillReceiveProps componentWillUpdate → UNSAFE_componentWillUpdate
React 16.9不包含重大更改，旧版本名称在此版本中继续有效。但是，当您使用任何旧名称时，您将看到警告：
警告：componentWillMount已重命名，不建议使用。
正如警告所示，每种不安全方法通常都有更好的方法。但是，您可能没有时间迁移或测试这些组件。在这种情况下，我们建议运行一个“codemod”脚本，自动重命名它们：
npx react-codemod rename-unsafe-lifecycles
（注意它说npx，不是npm。npx默认情况下是Node 6+附带的实用程序。）
运行此codemod将替换旧名称，如componentWillMount新名称，如UNSAFE_componentWillMount：
Codemod在行动
新的名字 UNSAFE_componentWillMount 将继续在React 16.9和React 17.x中运行。但是，新的UNSAFE_前缀将帮助具有问题模式的组件在代码审查和调试会话期间脱颖而出。（如果您愿意，可以通过选择严格模式进一步阻止他们在您的应用中使用。）
注意
详细了解我们的版本政策和对稳定性的承诺。
弃用javascript:网址
以...开头的URL javascript:是一个危险的攻击面，因为它很容易在标签中意外包含未经过类型化的输出 a标签，并创建一个安全漏洞：
const userProfile = {
website: "javascript: alert("you got hacked")",
};
// This will now warn:
Profile
在React 16.9中，此模式继续有效，但它将记录警告。如果您使用javascript:URL作为逻辑，请尝试使用React事件处理程序。（作为最后的手段，你可以绕过保护dangerouslySetInnerHTML，但是它非常气馁并经常导致安全漏洞。）
在未来的主要版本中，如果遇到javascript:URL ， React将抛出错误。
弃用“工厂”组件
在使用Babel编译JavaScript类之前变得流行之前，React支持使用render方法返回对象的“工厂”组件：
function FactoryComponent() {
return { render() { return ; } }
}
这种模式令人困惑，因为它看起来太像一个功能组件 - 但它不是一个。（函数组件只会
在上面的例子中返回。）这种模式几乎从未在野外使用，并且支持它会导致React略大且比必要的慢。因此，我们在16.9中弃用此模式，并在遇到警告时记录警告。如果您依赖它，添加FactoryComponent.prototype = React.Component.prototype可以作为一种解决方法。或者，您可以将其转换为类或函数组件。
我们不希望大多数代码库受此影响。
新功能 异步act()测试React 16.8引入了一个新的测试实用程序，act()用于帮助您编写更符合浏览器行为的测试。例如，一次act()获取批量内的多个状态更新。这与React在处理真实浏览器事件时的工作方式相匹配，并有助于为将来React将更频繁地批量更新的组件做好准备。
但是，在16.8中act()仅支持同步功能。有时，您可能在测试中看到过类似的警告但无法轻松修复它：
An update to SomeComponent inside a test was not wrapped in act(...).
在React 16.9中，act()也接受异步函数，你可以await调用它：
await act(async () => {
// ...
});
这解决了act()以前无法使用的其余情况，例如状态更新在异步函数内部时。因此，您应该能够立即修复act()测试中的所有剩余警告。
我们听说没有足够的信息来说明如何编写测试act()。新的“ 测试食谱”指南介绍了常见的场景，以及如何act()帮助您编写好的测试。这些示例使用vanilla DOM API，但您也可以使用React Testing Library来减少样板代码。它的许多方法已在act()内部使用。
如果您碰到任何其他不适合您的情况，请告知我们问题跟踪器act()，我们会尽力提供帮助。
性能测量在React 16.5中，我们为DevTools引入了一个新的React Profiler，它可以帮助您找到应用程序中的性能瓶颈。在React 16.9中，我们还添加了一种编程方式来收集所谓的测量
该
render();
要了解更多有关Profiler并传递给参数onRender回调，检查出的Profiler文档。
注意：
分析会增加一些额外的开销，因此在生产构建中禁用它。
为了选择生产分析，React提供了一个特殊的生产构建，并启用了分析。阅读有关如何在fb.me/react-profiling中使用此构建的更多信息。
值得注意的错误修正
此版本包含一些其他显着的改进：
修复findDOMNode()了在
保留删除的子树导致的内存泄漏也已得到修复。
由setStatein 引起的无限循环useEffect现在记录错误。（这类似于你看，当你调用错误setState中componentDidUpdate的一类。）
我们感谢所有帮助解决这些问题和其他问题的贡献者。您可以在下面找到完整的更改日志。
路线图的更新
在2018年11月，我们发布了16.x版本的路线图：
带有React Hooks的小型16.x版本（过去估计：2019年第一季度）
带有并发模式的小型16.x版本（过去的估计：2019年第二季度）
带有Suspense for Data Fetching的未成年人16.x版本（过去估计：2019年中）
这些估计太乐观了，我们需要调整它们。
tldr：我们按时发布了Hooks，但我们正在将Concurrent Mode和Suspense for Data Fetching重新组合成一个我们打算在今年晚些时候发布的版本。
2月份，我们发布了一个稳定的16.8版本，包括React Hooks，一个月后 React Native支持。但是，我们低估了此版本的后续工作，包括lint规则，开发人员工具，示例和更多文档。这使时间线改变了几个月。
现在React Hooks已经推出，并行模式和数据提取的悬念工作正在全面展开。目前正在积极开发的新Facebook网站建立在这些功能之上。使用真实代码对它们进行测试有助于在影响开源用户之前发现并解决许多问题。其中一些修复涉及这些功能的内部重新设计，这也导致时间线滑落。
有了这种新的理解，这就是我们计划下一步做的事情。
一个发行而不是两个
Concurrent Mode和Suspense 为正在积极开发的新Facebook网站提供支持，因此我们有信心他们在技术上接近稳定状态。我们现在也更好地了解了它们为开源采用做好准备之前的具体步骤。
最初我们认为我们会将Concurrent Mode和Suspense for Data Fetching分成两个版本。我们发现这种排序很难解释，因为这些特征与我们最初想到的相关性更大。因此，我们计划在单个组合版本中发布对Concurrent Mode和Suspense for Data Fetching的支持。
我们不希望再次过度推销发布日期。鉴于我们在生产代码中依赖于它们，我们希望今年能够提供16.x版本，并为其提供选择支持。
数据提取的更新
虽然React并未就如何获取数据发表意见，但数据提取的Suspense的第一个版本可能会专注于与固定数据提取库集成。例如，在Facebook，我们正在使用与Suspense集成的即将推出的Relay API。我们将记录像Apollo这样的其他自以为是的图书馆如何支持类似的整合。
在第一个版本中，我们不打算关注我们在早期演示中使用的临时“触发HTTP请求”解决方案（也称为“React Cache”）。但是，我们希望我们和React社区将在首次发布后的几个月内探索该空间。
服务器渲染的更新
我们已经开始研究新的支持Suspense的服务器渲染器，但是我们不希望它为初始版本的并发模式做好准备。但是，此版本将提供一个临时解决方案，允许现有服务器呈现器立即为Suspense回退发出HTML，然后在客户端上呈现其真实内容。这是我们目前在Facebook上使用的解决方案，直到流式渲染器准备就绪。
为什么需要这么长时间？
我们已经发布了导致Concurrent Mode稳定的各个部分，包括新的上下文API，延迟加载Suspense和Hooks。我们也急于释放其他缺失的部分，但是大规模地尝试它们是该过程的重要部分。诚实的回答是，当我们开始时，它只需要比我们预期的更多的工作。与往常一样，我们感谢您在Twitter和我们的问题跟踪器中提出的问题和反馈。
安装
应对
Npm注册表中提供了React v16.9.0。
要使用Yarn安装React 16，请运行：
yarn add react@^16.9.0 react-dom@^16.9.0
要使用npm安装React 16，请运行：
npm install --save react@^16.9.0 react-dom@^16.9.0
我们还通过CDN提供了反应的UMD版本：
有关详细的安装说明，请参阅文档。
更新日志
应对
添加
删除unstable_ConcurrentMode赞成unstable_createRoot。（@acdlite在＃15532）
反应DOM
弃用UNSAFE_*生命周期方法的旧名称。（@bvaughn在＃15186和@threepointone在＃16103）
将javascript:URL 弃用为常见攻击面。（@sebmarkbage在＃15047）
弃用不常见的“模块模式”（工厂）组件。（@sebmarkbage在＃15145）
添加对disablePictureInPicture属性的支持
欢迎加入我们的SegmentFault前端交流群～
目前人数太多，只能我邀请入群了哦～
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116268.html
摘要：更新日志应对添加以编程方式收集性能测量。在和在将弃用为常见攻击面。添加对事件的支持。在从调用时发出警告，创建循环。在和从错误的渲染器使用时发出警告。 2019年8月8日，我们发布了React 16.9。它包含几个新功能，错误修正和新的弃用警告，以帮助准备未来的主要版本。 showImg(https://segmentfault.com/img/bVbwoB5?w=1728&h=666)...
摘要：在年成为最大赢家，赢得了实现的风暴之战。和他的竞争者位列第二没有前端开发者可以忽视和它的生态系统。他的杀手级特性是探测功能，通过检查任何用户的功能，以直观的方式让开发人员检查所有端点。 2016 JavaScript 后起之秀 本文转载自：众成翻译译者：zxhycxq链接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...
摘要：引言于发布版本，时至今日已更新到，且引入了大量的令人振奋的新特性，本文章将带领大家根据更新的时间脉络了解的新特性。其作用是根据传递的来更新。新增等指针事件。 1 引言 于 2017.09.26 Facebook 发布 React v16.0 版本，时至今日已更新到 React v16.6，且引入了大量的令人振奋的新特性，本文章将带领大家根据 React 更新的时间脉络了解 React1...
摘要：需要注意的是，同样的行为也适用于。这意味着我们必须重新绑定每个事件。组件的由调用它的父组件提供，这意味着所有事件都应该与父组件相关联。 原文链接：Vue.js — Considerations and Tricks showImg(https://segmentfault.com/img/bVbqHOd?w=1600&h=1599); Vue.js 是一个很棒的框架。然而，当你开始构建...
摘要：前端日报精选实践总结掘金第期动画与动效之四完全指南众成翻译个编码小技巧教程使用浏览器开发者工具检查动画性能众成翻译中文图书深入理解译变量的正确使用方法知乎专栏正式发布众成翻译来了知乎专栏代码运行过程简述一个人文章的中文 2017-06-21 前端日报 精选 redux-react实践总结 - 掘金【第972期】HTML5动画与动效之四flexbox 完全指南 - 众成翻译19个Java...
阅读 2418·2021-11-18 10:02
阅读 685·2021-10-08 10:04
阅读 2249·2021-09-03 10:51
阅读 3539·2019-08-30 15:44
阅读 2797·2019-08-29 14:09
阅读 2462·2019-08-29 12:21
阅读 2062·2019-08-26 13:45
阅读 1799·2019-08-26 13:25
