React同构与极致的性能优化

最新推荐文章于 2023-10-16 19:04:37 发布
最新推荐文章于 2023-10-16 19:04:37 发布
阅读量772 收藏 3
点赞数 1

前言


  • 随着React的兴起, 结合Node直出的性能优势和React的组件化，React同构已然成为趋势之一。享受技术福利的同时，直面技术挑战，在复杂场景下，挑战10倍以上极致的性能优化。


什么是同构？


  • 一套代码既可以在服务端运行又可以在客户端运行，这就是同构应用。简而言之, 就是服务端直出和客户端渲染的组合, 能够充分结合两者的优势，并有效避免两者的不足。


为什么同构？


  • 性能: 通过Node直出, 将传统的三次串行http请求简化成一次http请求，降低首屏渲染时间

  • SEO: 服务端渲染对搜索引擎的爬取有着天然的优势，虽然阿里电商体系对SEO需求并不强，但随着国际化的推进, 越来越多的国际业务加入阿里大家庭，很多的业务依赖Google等搜索引擎的流量导入，比如Lazada.

  • 兼容性: 部分展示类页面能够有效规避客户端兼容性问题，比如白屏。


性能数据


性能是一个综合性的问题, 不能简单地断言同构应用一定比非同构应用性能好，只能说合适的场景加上合理的运用，同构应用确实能带来一定的性能提升, 先来看一个线上的案例。



通常来说，网络状况越差，同构的优势越明显，下图是在不同网络状况下首屏渲染时间的一组对比：



线上案例


  • 近两年，无论是业界还是阿里内部都涌现了大量同构实践, 业界比较有影响力的包括Facebook, Quora, Medium, Twitter, Airbnb, Walmart、手Q以及QQ兴趣部落等


  • 阿里内部也有大量的应用，仅列举部分beidou开发组做过技术支持的项目

    • 阿里云 - 大数据地产

    • 钉钉 - 企业主页

    • 钉钉 - 钉钉日志和审批模板市场

    • 菜鸟 - 物流大市场

    • 云零售 - 店掌柜

    • Lazada - PDP

    • 国际事业部 - AGLA

    • AILab - 行业解决方案

    • AILab - 智能硬件平台

    • AILab - AliGenie开放平台

    • AILab - AR官网

    • ICBU - ICBU店铺

    • 业务平台 - 门店评价

    • 国际UED - 数据运营

    • 国际UED - 知之

    • 国际UED - 探花

    • 国际UED - Nuke官网及过程管理

    • 国际UED - 会议记录，实时翻译

    • 国际UED - LBS数据地图

    • 国际UED - 数探

    • 国际UED - 微策

    • 国际UED - shuttle

    • 国际UED - fie portal

    • ...


业界生态


  • react-server: React服务端渲染框架

  • next.js: 轻量级的同构框架

  • beidou: 阿里自己的同构框架，基于eggjs, 定位是企业级同构框架


除了开源框架，底层方面React16重构了SSR, react-router提供了更加友好的SSR支持等等, 从某种程度上来说，同构也是一种趋势，至少是方向之一。


思考 与 实现


同构的出发点不是 “为了做同构，所以做了”, 而是回归业务，去解决业务场景中SEO、首屏性能、用户体验 等问题，驱动我们去寻找可用的解决方案。在这样的场景下，除了同构本身，我们还需要考虑的是：


  • 高性能的 Node Server

  • 可靠的 同构渲染服务

  • 可控的 运维成本

  • 可复用的 解决方案

  • ...


简单归纳就是, 我们需要一个 企业级的同构渲染解决方案。


我们是怎么做的？


基于 eggjs 加入可拔插的同构能力


  • beidou-plugin-react 作为原有MVC架构中, view 层的替换, 使用 React 组件作为视图层模板, 可以直接渲染 React Component 并输出给客户端

  • beidou-plugin-webpack集成 Webpack 到框架中, 在开发阶段, 提供代码的编译和打包服务

  • beidou-plugin-isomorphic服务端的 React 运行时: babel-register polyfill 注入: 环境变量, BOM等 非js文件解析: css, images, fonts...

  • 服务端支持css modules

  • 自动路由: 纯静态页面无需编写任何服务端代码，像写纯前端页面一样简单

  • ...

这里不再赘述具体如何实现，有兴趣的读者可以阅读我们的开源同构框架beidou -- https://github.com/alibaba/beidou


热点问题


任何一种技术都有其适用场景和局限性, 同构也不例外，以下试举一二，以做抛砖引玉。


  • 内存泄漏

  • 性能瓶颈

  • ...


内存泄漏不是同构应用所特有的，理论上所有服务端应用都可能内存泄漏，但同构应用是“高危群体”, 具体如何解决请参考本人的《Node应用内存泄漏分析方法论与实战》（https://github.com/alibaba/beidou/blob/master/packages/beidou-docs/articles/node-memory-leak.md），接下来重点剖析下性能优化。


极致的性能优化


前面也提到了，同构应用并不一定就比非同构应用性能好，影响性能的因素实在太多了，再来看一组数据：



上图是基于Node v8.9.1 和 React@15.5.4, 开4个进程采集到的数据, X轴是最终生成页面节点数量，Y轴红色的线表示RT(包括渲染时间和网络时间), 绿色的柱子表示QPS. 可以看出来：


  • 随着页面节点的增多渲染时间可能变得很长，QPS下降非常迅速。在页面节点超过3000左右的时候，QPS接近个位数了，而且实际页面中可能包含较复杂的逻辑以及不友好的写法，情况可能会更糟。


顺带提一下, 笔者采样了淘宝首页 和淘宝某详情页以及Lazada某详情页，页面节点数分别是2620、2467和3701. 大部分情况下，页面节点数低于1000， 比如菜鸟物流市场首页看起来内容不少，其实节点数是775。


那针对3000节点以上的页面，我们该怎么做呢？笔者总结了以下策略并重点阐述其中一两点：


  • 采用编译后的React版本: 根据Sasha Aickin的博客，React15在Node4、Node6、Node8下，采用编译后的版本性能相比未编译版本分别提升了2.36倍、3倍、3.85倍


  • 模块拆分: 模块拆分有利于并发渲染，目前ICBU店铺装修采用的就是这种方式


  • 模块级别缓存: 页面中某些模块其实是很适合缓存的，比如Lazada详情页中节点数虽然高达3701, 但其实页头部分就占比55.5%，页尾占比3.5%，而页头页尾是常年不变的.


  • 组件级缓存： 最小粒度的缓存单位了，性能提升依赖于缓存的范围和命中率，运用得当，可能带来非常大的性能提升。参考walmartlabs（https://medium.com/walmartlabs/reactjs-ssr-profiling-and-caching-5d8e9e49240c）


  • 采用hsf代替http对外提供服务: hsf的网络消耗远低于http, 在店铺同构实践中，改用hsf, java端调用Node端的耗时缩短了一半。


  • 部分模块客户端渲染(对SEO无用的部分): 直接降低SSR部分的复杂度


  • 智能降级: 当流量暴增，接近或超过阈值时，会直接导致服务的RT快速上升。可以实时监测CPU和内存的使用率，超过一定的比例自动降级为客户端渲染，降低服务端压力，CPU和内存恢复常态时，自动切回服务端渲染。


  • 采用Node8: 同样在店铺实践中，采用Node8相比Node6, 渲染时间从28ms降低到了18ms, 提升幅度为36%.


  • 采用最新版React16: facebook官方数据（https://reactjs.org/blog/2017/09/26/react-v16.0.html#better-server-side-rendering），在Node8下，React16相比编译后的react15仍有3.8倍提升，相比未编译的React15更是有数量级的提升。


组件级缓存


如果说性能优化有"万能"的招式，那一定是缓存, 从Nigix缓存到模块级缓存到组件级缓存，其中最让人兴奋的就是组件级缓存，让我们一起来看看如何实现。


  • 拦截React的渲染逻辑，业界主要有三种实现方式

    • Fork一份React, 暴力加入缓存逻辑, 代表库是react-dom-stream, 虽然这个库的人气很高，但笔者还是反对这种实现方式的。

    • 通过require hook拦截instantiateReactComponent的载入并注入缓存逻辑，参考react-ssr-optimization（https://github.com/aickin/react-dom-stream）

    • 扩展ReactCompositeComponent的mountComponent方法，参考electrode-react-ssr-cachin（https://github.com/electrode-io/electrode-react-ssr-caching/blob/master/lib/ssr-caching.js#L148-L161）


  • 注入缓存逻辑, 代码如下


const ReactCompositeComponent = require("react/lib/ReactCompositeComponent");

ReactCompositeComponent.Mixin._mountComponent = ReactCompositeComponent.Mixin.mountComponent;
ReactCompositeComponent.Mixin.mountComponent = function(rootID, transaction, context) {
 
  const hashKey = generateHashKey(this._currentElement.props);
  if (cacheStorage.hasEntry(hashKey)) {
    // 命中缓存则直接返回缓存结果
    return cacheStorage.getEntry(hashKey);
  } else {
    // 若未命中，则调用react的mountComponent渲染组件，并缓存结果
    const html = this._mountComponent(rootID, transaction, context);
    cacheStorage.addEntry(hashKey, html);
    return html;
  }
};


  • 设置最大缓存和缓存更新策略


lruCacheSettings: {
      max: 500,  // The maximum size of the cache
      maxAge: 1000 * 5 // The maximum age in milliseconds
  }


上述缓存逻辑是基于属性的，能覆盖大部分的应用场景，但有一个要求，属性值必须可枚举且可选项很少. 请看下面的场景。



淘宝某页面上有大量的商品，而淘宝的商品又何止百万，就算某个被缓存，下次被命中的可能性依然微乎其微。那如何解决这个问题？聪明的读者可能已经看出来了，虽然每个商品最终渲染的结果千变万化，但结构始终是一致的，因此结构是可以缓存的。



要实现结构的缓存，需要在上述逻辑上额外新增三步。


  • 生成中间结构：

    • 以组件<Price>${price}</Price>为例，将变量price以占位符${price}代替set(price, "${price}"), 再调用react原生的mountComponent方法则可以生成中间结构<div>${price}</div

  • 缓存中间结构

  • 生成最终组件


以上就是组件级缓存的实现方式, 特别要提醒的是缓存是把双刃剑，运用不当可能会引发内存泄漏以及数据的不一致。


React16 SSR


  • FB在9.26发布了React16正式版，之前万众期待的SSR性能提升（https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67）没有让大家失望, 引用React核心开发Sasha Aickin的对比图：

笔者拿之前的应用升级到React16, 对比下3909节点，RT从295ms降到了51ms, QPS从9提升到了44, 提升非常明显。


实战


接下来通过一个例子，展示如何一步步地提升性能。代码仓库（https://github.com/alibaba/beidou/tree/master/examples/performance） -- https://github.com/alibaba/beidou/


10倍以上性能提升


  • 首先构造一个非常复杂的页面, 页面节点数是3342, 对比之下，淘宝首页首屏的页面节点数是831, 异步充分加载之后(懒加载完成),整个页面节点数为3049. 注： 淘宝页面为动态页面，每次采样可能会有差异。



  • 初始平均渲染时间为295.75ms(Node6.92, React15.6.2), 注: 图中有296.50ms,317.25ms,297.25ms,295.75ms四个平均值，是因为开启了四个进程，采样最后一个，下同。




  • 启用babel性能加速插件, 平均渲染时间为219.00ms



  • 采用Node8.9.1(或更新版本)平均渲染时间为207ms



  • 采用production模式平均渲染时间为81.75ms



  • 部分内容客户端渲染，平均渲染时间为44.63ms



  • 部分内容组件级别cache,平均渲染时间为22.65ms



  • 采用React16(或更新版本)，平均渲染时间为5.17ms



  • 结合React16和部分客户端渲染，平均渲染时间为2.68ms



至此，服务端渲染时间已经最初的295.75ms降低到了2.68ms，提升了超过100倍。


更多性能策略


其实除了上述应用的策略，还有其它的策略，比如：


  • 采用Async, 有数据称性能提升30%, 笔者试了下，未见明显提升。应该是经过了babel的编译，最终没有发挥出Async的优势，这是因为beidou框架在服务端要支持import等ES6的写法以及支持React的JSX语法。其实也非常简单，直接缩小babel的编译范围，在beidou框架中是可以自己定义的。

  • 降低React组件的嵌套层级。试验数据，同样的页面节点数，服务端渲染时间和组件的嵌套层级是线性正相关的。

  • 热点缓存 ...


万变不离其宗


借用《功夫》中的一句经典台词天下武功，无坚不破，唯快不破，同样的， 随着时间的推移，上面这些策略策略迟早会被破，比如react16 ssr重构之后，之前的组件级别缓存逻辑不再有效。 另外，可能由于架构设计/技术选型根本就使不上劲，比如react16是今年9月26才正式发版，很多第三方组件还没来得及升级，如果应用中有些组件强依赖于react15或者更早的版本，可能根本就没法利用react16的性能优势。


那么有没有一种万能的办法，能够做到唯快不破呢？


答案是： 有的。 只有掌握了方法论，才能在不断变化中，找到适合自己应用的性能优化策略。


具体的方法论，请参考本人的另外一篇文章《唯快不破，让nodejs再快一点》（https://github.com/alibaba/beidou/blob/master/packages/beidou-docs/articles/node-performance-optimization.md）。


注： 本文为第12届D2前端技术论坛《打造高可靠与高性能的React同构解决方案》分享内容，已经过数据脱敏处理。


出处：https://github.com/alibaba/beidou/blob/master/packages/beidou-docs/articles/high-performance-isomorphic-app.md


版权申明：内容来源网络，版权归原创者所有。除非无法确认，我们都会标明作者及出处，如有侵权烦请告知，我们会立即删除并表示歉意。谢谢。


-END-


架构文摘

ID：ArchDigest

互联网应用架构丨架构技术丨大型网站丨大数据丨机器学习

更多精彩文章，请点击下方：阅读原文

架构文摘
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React移动web极致优化
02-25
最近一个季度，我们都在为手...需要更好的性能的，可以上ReactNative。但是，这其实暗示学习的曲线非常陡峭。单单是Webpack+React+Redux就已够一个入门者够呛，更何况还要兼顾直出和手机客户端。不是一般人能hold住所有
React SSR
zep
02-25 3466
一、为什么需要SSR呢？ 单页面富应用的局限： 之前我们开发的应用程序，如果直接请求可以看到上面几乎没有什么内容。 但是为什么我们页面可以看到大量的内容呢？ 因为当我们请求下来静态资源之后会执行JS，JS会去请求数据，并且渲染我们想要看到的。 但是这个过程存在另外两个问题： 问题一：首屏显示的速度较慢； 问题二：不利于SEO的优化； 如何解决这个问题呢？ 采用服务端渲染； 二、认识SSR和同构？ SSR（Server Side Rendering，服务端渲染），指的是页面在服务器
react-ssr
woyebuzhidao321的博客
04-12 1342
一、ReactSSR相关概念回顾 什么是客户端渲染 CSR：Client Side Rendering 服务器端仅返回 JSON 数据, DATA 和 HTML 在客户端进行渲染 什么是服务器端渲染 SSR：Server Side Rendering 服务器端返回HTML, DATA 和 HTML 在服务器端进行渲染 客户端渲染存在的问题 首屏等待时间长, 用户体验差 页面结构为空, 不利于 SEO SPA 应用中服务器端渲染解决的问题 二、实现ReactSSR雏形 项目结构 react-ssr s
手把手教你实现React SSR服务端渲染【含demo实现】
daisyboom的博客
10-16 1933
渲染模式其实远不止以上几种，很多场景下都可以进行相应的优化。以下是一些我能想到的场景：在录入或更新数据时通过WebHook等通知构建系统进行增量构建，算是ISR的一种变种在SSR场景下可以对静态组件和动态组件进行区分，将静态组件使用SSG输出，然后将其拼接到页面中。所以没有最好的只有最适合的，按需选择最适合自己需求的渲染模式即可。
React SSR 原理解析和实践
军火库
09-28 830
CSR（Client Side Rendering）就是在浏览器从服务器中获取到的只是一个带有空 div 标签的 html 文件，然后执行 js 文件生成 dom 和操作 dom，日常中开发的后台管理类的系统大多都是 CSR 的模式。SSR（Server Side Rendering）是在服务端已经完成渲染工作，浏览器从服务器获得的是完整的网页的 dom 字符串。不同于以前通过后端模板等方案生成页面，现在的 React、Vue、Svelte 等优秀框架都有 SSR 的解决方案。
react18的SSR
zhangqling的博客
04-22 2056
react18-ssr 一、服务端渲染 我们的页面DOM结构由服务端产生的，就是服务端渲染。 const express = require("express"); const app = express(); app.get("/", (req, res) => { res.send("<html><body><h2>hello</h2></body></html>"); }); app.listen(8300, ()
react-react面试题之性能优化的手段.zip
最新发布
03-20
react面试题 react_react面试题之性能优化的手段
浅谈React组件之性能优化
11-26
1. 单个React组件的性能优化 React利用Virtual DOM来提升渲染性能，虽然每一次页面更新都是最组件的从新渲染，但是并不是将之前的渲染内容全部抛弃重来，借助Virtual DOM，React能够计算出对DOM树的最少修改，这...
浅谈react性能优化的方法
10-18
主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-react ssr
quanxin0222的博客
11-26 1891
reactssr的方法有很多，但在思路上基本都是可以互通的。本文提供一种reactssr的方法。 一、要达到什么功能？ 既然是服务端渲染，那么本事就得是达到服务端渲染解决的一些固有问题，比如seo、直接输出已经被渲染成html文档片段 页面切换时，使用客户端渲染的路由；页面刷新时，使用服务端路由返回当前页面 二、分析功能 一、使用的技术栈 开发依赖：wepback、webpack-cli等脚手架相关、babel、preset-react等编译相关、nodemon、npm-run-all等命令行工具
beidou：服务器渲染的React应用的同构框架
02-05
北斗 :milky_way: 服务器渲染的React应用的同构框架 中文文档- 产品特点 :check_mark:︎与客户端渲染相比，性能提高了2-5倍 :check_mark:︎搜索引擎优化（SEO） :check_mark:︎支持ES6 / ES7 / ES8 :check_mark:︎支持TypeScript :check_mark:︎支持React renderToNodeStream :check_mark:︎支持自动前缀的SCSS / Sass :check_mark:︎支持自动路由器 :check_mark:︎扩展支持的默认Webpack配置 :check_mark:︎支持视图渲染中间件 :check_mark:︎用户友好的CLI工具 :check_mark:︎很多 2.0版 新的功能 突破性变化：将内部babel升级到7 突破性变化：将内部Webpack升级到4 完全支持TypeScript，只需一行配置即可启用：
react-最小而美的EggReactSSR服务端渲染应用骨架
08-15
最小而美的Egg React 服务端渲染应用骨架
egg-react-ssr：最小而美的Egg + React + SSR服务端渲染应用框架，同时支持JS和TS
02-05
简体中文| Egg + React + SSR样板 最小而美的服务端渲染应用模板，特点 小：实现方式简洁，生产环境内置出来的捆绑包为同等复杂度的next.js项目的0.7倍，生成文件数量排序于next.js减少非常多 全：支持HMR，支持本地开发以及生产环境CSR / SSR两种渲染模式无缝切换，支持定制组件的渲染模式，同时支持TypeScript版本 美：基于和框架，拥有强大的插件生态，配置非黑盒，方便加入当前业务的个性化逻辑 正在使用这个项目的公司（应用）列表，按补充时间排序，如果您正在使用但列表中没有列出来的话请提问题，欢迎推广分享。 如果是Serverless环境，推荐同样写法但基于S
egg-react-ssr：这是社区上少有的工程化体系完善，极简的React服务端渲染框架。采用egg + mysql + sequelize + react + redux + redux thunk + axios + antd构建的一个从0到1的框架，并非利用现有的next.js或Nuxtjs框架。通过代码分割懒加载，CSRSSR无缝切换，对SPA写法无侵入等优势
02-14
蛋React单反 采用鸡蛋+ mysql + sequelize + react + redux + redux-thunk + antd构建的服务端渲染框架 快速开始 有关更多详细信息，请参见 。 发展 $ npm i $ npm run dev $ open http://localhost:7001/ 部署 npm脚本 使用npm run lint检查代码样式。 使用npm test运行单元测试。 使用npm run autod自动检测依赖项升级，有关更多详细信息，请参见 。
React服务端渲染（SSR）入门及项目搭建
qssn的博客
06-15 3225
服务端渲染是什么？我们什么情况下需要使用它？想要了解这些，需要简单聊聊前端渲染的发展史。服务端渲染并不是什么新兴的技术，动态网页技术（、等）其实就是服务端渲染，网页都是由后端获取数据并将其放入到网页模板中，然后返回完整的HTML到浏览器渲染。这样做的渲染方式有明显的缺点，每次数据改变都需要重新再去获取数据并组装新的HTML、网页和后端逻辑耦合等。直到的出现。的出现，使得前后端得以分离。在该模式下，后端依然会返回一个HTML页面，后续通过AJAX来动态获取数据，利用DOM操作动态更新网页内容。......
React原生实现SSR
随风浅入画
04-21 2019
原生实现React服务端渲染 github项目代码地址 一 如何实现ssr 1.创建node服务实例 express.static('public') 指定静态文件的访问路径,比如在html中访问script的src属性时 会以这个文件夹为根路径 // 创建node服务实例 方便在其它地方应用 import express from 'express' const app = express() app.use(express.static('public')) // 服务运行在3000端口 app.l
如何在 React 18中 利用Suspense 实现 服务端渲染(SSR)
趣谈前端
07-14 1066
概述React 18 将包括对 其服务器端渲染 (SSR) 性能的架构做了改进。这些改进带来了实质性的效果，是几年来其团队工作的结晶。大多数的改进点都是在幕后进行的，但您需要了解一些选择加入机制，尤其是您在不适用框架的情况下。主要的新API是 pipeToNoWritable, 您可以在 "升级到服务器上的React18" 这篇文章中阅读了解。在最终的正式版本中，我们也将...
面试官：说说React-SSR的原理
beifeng11996的博客
01-03 386
到此为止我们就实现了一个简易的同构框架。同构渲染其实就是将同一套react代码在服务端执行一遍渲染静态页面，又在客户端执行一遍完成事件绑定。它的优势是，加快首页访问速度以及SEO友好，如果你的项目没有这方面的需求，则不需要选择同构。它的缺点是，不能在服务端渲染期间操作DOM、BOM等api，比如document、window对象等，并且它增加了代码的复杂度，某些代码操作需要区分运行环境。在实际项目中，建议使用Next.js框架去做，站在巨人的肩旁上，可以少踩很多坑。
使用 React 18 流式传输 SSR 的指南
分享身边生活经验blog
04-04 689
就其核心而言，实施 SSR 的最重要原因是：表现搜索引擎优化 (SEO)用户体验（UX）本质上，存在使用 SSR 的 React 应用程序的特定渲染流程。6 种最佳修复电子邮件从 iPhone 上的邮件应用程序中消失的方法首先，服务器接管客户端获取所有数据并渲染整个 React 应用程序的责任。这样做之后，生成的 HTML 和 JavaScript 从服务器发送到客户端。最后，该客户端将 HTML 显示在屏幕上并将其与适当的 JavaScript 连接，这也称为水合过程。现在，
react中的性能优化
07-27
在React中进行性能优化是非常重要的，特别是当应用程序变得复杂或数据量较大时。以下是一些React中的性能优化技巧： 1. 使用React的Memo组件或PureComponent类来避免不必要的重新渲染。这些组件会对props和state进行浅比较，只有在它们发生变化时才会重新渲染。 2. 使用React的shouldComponentUpdate生命周期方法或使用React.memo高阶组件手动控制组件的重新渲染。这些方法可以让你根据需要来决定是否重新渲染组件。 3. 使用React的虚拟化库，如react-virtualized或react-window，来优化长列表或大型数据集的渲染。这些库只渲染可见的部分，而不是整个列表。 4. 使用React的Context API来避免props层层传递。这可以减少组件之间的耦合，并提高性能。 5. 使用React的useCallback和useMemo钩子来缓存函数和计算结果，以避免不必要的重复计算。 6. 使用React的Batching机制来合并多个setState调用，以减少渲染次数。可以使用setState的回调函数或使用React的unstable_batchedUpdates方法。 7. 避免在render方法中执行昂贵的计算或操作。可以将它们移到生命周期方法中，或者使用useEffect钩子在组件挂载后执行。 8. 使用React DevTools来分析组件渲染的性能瓶颈。它提供了有关组件渲染时间和更新次数的详细信息。 这些是一些常见的React性能优化技巧，但具体的优化策略可能因应用程序的特性而异。重要的是要进行基准测试和性能分析，以确定哪些部分需要进行优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值