首页 > 其他分享 >react 理念

react 理念

时间:2022-12-22 17:34:13浏览次数:61  
标签:React 理念 瓶颈 react 响应 IO

react的理念:

官网原话:我们认为,React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。

我们日常使用App,浏览网页时,有两类场景会制约快速响应

  • 当遇到大计算量的操作或者设备性能不足使页面掉帧,导致卡顿。

  • 发送网络请求后,由于需要等待数据返回才能进一步操作导致不能快速响应。

这两类场景可以概括为:

  • CPU的瓶颈

  • IO的瓶颈

解决cpu瓶颈的方法:时间切片

解决IO瓶颈的方法:React实现了Suspense功能及配套的hook——useDeferredValue (opens new window)。而在源码内部,为了支持这些特性,同样需要将同步的更新变为可中断的异步更新。

 

总结

通过以上内容,我们可以看到,React为了践行“构建快速响应的大型 Web 应用程序”理念做出的努力。

其中的关键是解决CPU的瓶颈与IO的瓶颈。而落实到实现上,则需要将同步的更新变为可中断的异步更新。

 

 

标签:React,理念,瓶颈,react,响应,IO
From: https://www.cnblogs.com/fock/p/16999237.html

相关文章

  • react 高效高质量搭建后台系统 系列 —— 脚手架搭建
    其他章节请看:react高效高质量搭建后台系统系列脚手架搭建本篇主要创建新项目myspug,以及准备好环境(例如:安装spug中用到的包、本地开发和部署、自定义配置react-a......
  • react 高效高质量搭建后台系统 系列
    react高效高质量搭建后台系统前言目标:用react高效高质量搭建后台系统如何实现:搞定一个优秀的、通用的、有一定复杂度的react的后台系统。类似项目就可以依葫芦画瓢快......
  • [Jest] Override original module file with requireActual
    jest.mock('./filename',()=>{constoriginalModule=jest.requireActual('./filename')return{...originalModule,fnA:jest.fn(),fnB:(b:b......
  • #yyds干货盘点# react笔记之学习之完成添加功能
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • #yyds干货盘点# react笔记之学习之完成删除功能
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • react状态管理
    importReact,{useState,useMemo}from"react";/*搜索框案例searchKey-搜索关键字data-搜索结果数据filtered-筛选搜......
  • 命令行创建React项目
      cnpminstall-gcreate-react-app找一个创建项目的目录,用cmd打开资源管理器对应目录运行create-react-appdemo注意:安装过程中最好焦点不要移出cmd窗口,有时候会莫名其......
  • react中的api获取数组排序
    [javascript-SortanarrayofobjectsinReactandrenderthem-StackOverflow](https://stackoverflow.com/questions/43572436/sort-an-array-of-objects-in-reac......
  • 在React中使用CSS Modules
    1.为什么使用CSSModules?在React中,如果你直接在文件中引入index.css,当父组件和子孙组件的class属性相同时,那么会发生CSS样式覆盖的问题。如果解决样式覆盖的问......
  • React报错之React.Children.only expected to receive single React element child
    总览当我们把多个子元素传递给一个只期望有一个React子元素的组件时,会产生"React.Children.onlyexpectedtoreceivesingleReactelementchild"错误。为了解决该错误,......