当前位置: 首页 > Web前端 > HTML

ReactV16.9来了,无痛升级,加入性能测试【翻译-真香】

时间:2023-04-02 14:59:32 HTML

2019年8月8日,我们发布了React16.9。它包含几个新功能、错误修复和新的弃用警告,以帮助为未来的主要版本做准备。新版本:重命名不安全的生命周期方法一年多前,我们宣布重命名不安全的生命周期方法:componentWillMount→UNSAFE_componentWillMountcomponentWillReceiveProps→UNSAFE_componentWillReceivePropscomponentWillUpdate→UNSAFE_componentWillUpdateReact16.9不包含重大更改,旧版本名称在此版本中继续有效。但是,当您使用任何旧名称时,您会看到一条警告:警告:componentWillMount已重命名且已弃用。正如警告所示,对于每一种不安全的方法,通常都有更好的方法。但是,您可能没有时间迁移或测试这些组件。在这种情况下,我们建议运行一个自动重命名它们的“codemod”脚本:npxreact-codemodrename-unsafe-lifecycles(注意它说的是npx,而不是npm。npx是默认情况下随Node6+一起提供的实用程序。)运行此codemod将用UNSAFE_componentWillMount等新名称替换componentWillMount等旧名称:使用新名称UNSAFE_componentWillMount的Codemod将继续在React16.9和React17.x中工作。但是,新的UNSAFE_前缀将帮助具有问题模式的组件在代码审查和调试会话期间脱颖而出。(如果您愿意,您可以通过选择严格模式进一步阻止它们在您的应用程序中使用。)注意了解更多关于我们的版本政策和对稳定性的承诺。已弃用的javascript:以javascript:开头的URL是一个危险的攻击面,因为很容易在标记中意外包含未类型化输出标记并创建安全漏洞:constuserProfile={website:"javascript:alert('yougothacked')",};//现在将发出警告:Profile在React16.9中,此模式继续工作,但它会记录警告。如果您使用javascript:URLs作为您的逻辑,请尝试使用React事件处理程序。(作为最后的手段,您可以危险地绕过保护SetInnerHTML,但这是非常令人沮丧的,并且通常会导致安全漏洞。)在未来的主要版本中,如果遇到javascript:URL,React将抛出错误。弃用“工厂”组件在使用Babel编译JavaScript类变得流行之前,React支持使用render方法返回对象的“工厂”组件:}}}这种模式令人困惑,因为它看起来太像一个功能组件——但它不是一个。(在上面的例子中,函数组件只会返回

。)这种模式几乎从未在野外使用过,支持它会导致React比必要的更大和更慢。因此,我们在16.9中弃用了这种模式,并在遇到时记录了警告。如果您依赖它,添加FactoryComponent.prototype=React.Component.prototype可能是一种解决方法。或者,您可以将其转换为类或函数组件。我们不希望大多数代码库受此影响。新的异步act()测试React16.8引入了一个新的测试实用程序act(),以帮助您编写更接近浏览器行为的测试。例如,一个act()批量获取多个状态更新。这与React在处理真实浏览器事件时的工作方式相匹配,并有助于为React将更频繁地批量更新的未来组件做好准备。但是,在16.8中,act()仅支持同步函数。有时,您可能在测试中看到了类似的警告但无法轻松修复它:测试中对SomeComponent的更新未包含在act(...)中。在React16.9中,act()也接受异步函数,您可以使用await调用它:awaitact(async()=>{//...});这解决了之前无法使用act()的其余情况,例如当状态更新在异步函数内时。因此,您应该能够立即修复act()测试中剩余的任何警告。我们听说没有关于如何编写测试act()的足够信息。新的“测试食谱”指南描述了常见场景以及act()如何帮助您编写好的测试。这些示例使用vanillaDOMAPI,但您也可以使用React测试库来减少样板代码。act()已经在内部使用了它的许多方法。如果您遇到任何其他不适合您的事情,请在问题跟踪器act()上告诉我们,我们会尽力提供帮助。性能测量在React16.5中,我们为DevTools引入了一个新的ReactProfiler,它可以帮助您找到应用程序中的性能瓶颈。在React16.9中,我们还添加了一种名为的编程方式来收集测量值。我们不希望大多数较小的应用程序使用它,但它可能对跟踪较大应用程序中的性能回归很方便。衡量React应用程序渲染“渲染成本”的频率。其目的是帮助识别应用程序中速度较慢的部分,并可能从记忆化等优化中受益。可以在React树中的任何位置添加一个来测量渲染那部分树的成本。它需要两个道具:一个id(字符串)和一个onRender回调(函数),当树中的组件“提交”更新时调用。render();要了解有关Profiler和传递给onRender回调的参数的更多信息,请查看Profiler文档。注意:分析会增加一些额外的开销,因此在生产构建中禁用它。为了选择加入分析,React提供了一个启用了分析的特殊生产构建。在fb.me/react-profiling阅读更多关于如何使用这个构建的信息。值得注意的错误修复此版本包含一些其他值得注意的改进:修复了在树内调用时findDOMNode()崩溃的问题。由于保留已删除的子树而导致的内存泄漏也已得到修复。由setStatein引起的无限循环useEffect现在会记录错误。(这类似于您在componentDidUpdate的类中调用错误setState时看到的情况。)我们感谢所有帮助解决这些问题和其他问题的贡献者。您可以在下面找到完整的变更日志。路线图更新2018年11月,我们发布了16.x版本的路线图:带有ReactHooks的小型16.x版本(过去估计:2019年第一季度)带有并发模式的小型16.x版本(过去估计:2019年第二季度)次要16。xreleaseswithSuspenseforDataFetching(过去估计:2019年年中)这些估计过于乐观,我们需要对其进行调整。tldr:我们按时发布了Hooks,但我们正在将ConcurrentMode和SuspenseforDataFetching重新组合到我们计划在今年晚些时候发布的版本中。2月,我们发布了一个稳定的16.8版本,其中包括ReactHooks,一个月后发布了对ReactNative的支持。但是,我们低估了此版本的后续工作,包括lint规则、开发人员工具、示例和更多文档。这将时间线推迟了几个月。现在ReactHooks出来了,关于并行度和数据抽取的悬念工作如火如荼。目前正在积极开发中的新Facebook网站以这些功能为基础。使用真实代码测试它们有助于在影响开源用户之前发现并修复许多问题。其中一些修复涉及对这些功能进行内部重新设计,这也导致了时间线的延迟。有了这种新的理解,这就是我们下一步计划做的事情。一个版本而不是两个ConcurrentMode和Suspense为正在积极开发中的新Facebook网站提供支持,因此我们相信它们在技术上接近稳定状态。我们现在也更好地了解了他们在准备好采用开源之前采取的具体步骤。最初我们认为我们将把ConcurrentMode和SuspenseforDataFetching拆分成两个版本。我们发现这种排序很难解释,因为这些特征比我们最初想象的更相关。因此,我们计划在一个组合版本中发布对并发模式和数据获取暂停的支持。我们不想再次夸大发布日期。鉴于我们在生产代码中依赖它们,我们希望在今年交付16.x版本并选择加入对它们的支持。数据提取的更新虽然React没有评论如何获取数据,但第一个版本的SuspenseforDataExtraction可能会专注于与固定数据提取库的集成。例如,在Facebook,我们正在使用即将推出的与Suspense集成的RelayAPI。我们将记录其他固执己见的库(如Apollo)如何支持类似的集成。在第一个版本中,我们不会专注于我们在早期演示中使用的临时“触发HTTP请求”解决方案(也称为“React缓存”)。然而,我们希望我们和React社区能够在最初发布后的几个月内探索这个空间。服务器渲染的更新我们已经开始研究一个新的支持Suspense的服务器渲染器,但我们不希望它为并发模式的初始版本做好准备。但是,此版本将提供一个临时解决方案,允许现有的服务器渲染器立即为Suspense回退发出HTML,然后在客户端上渲染它们的真实内容。这是我们目前在Facebook使用的解决方案,直到流式渲染器准备就绪。为什么要花这么长时间?我们发布了导致并发模式稳定的各个部分,包括新的上下文API、延迟加载Suspense和Hooks。我们也渴望发布其他缺失的部分,但大规模试用它们是该过程的重要部分。诚实的回答是,它只需要比我们开始时预期的更多的工作。一如既往,我们感谢您在Twitter和我们的问题跟踪器中提出的问题和反馈。安装应在Npm注册表中提供Reactv16.9.0。要使用Yarn安装React16,请运行:yarnaddreact@^16.9.0react-dom@^16.9.0要使用npm安装React16,请运行:npminstall--savereact@^16.9.0react-dom@^16.9.0我们还通过CDN提供UMD版本的React:有关详细的安装说明,请参阅文档。变更日志应添加API以编程方式收集性能测量值。(#15172中的@bvaughn)移除unstable_ConcurrentMode以支持unstable_createRoot。(#15532中的@acdlite)ReactDOM弃用了UNSAFE_*生命周期方法的旧名称。(@bvaughn在#15186和@threepointone在#16103)弃用javascript:URL作为常见的攻击面。(#15047中的@sebmarkbage)弃用不常见的“模块模式”(工厂)组件。(#15145中的@sebmarkbage)向