好程序员Web前端教程之React原理解析及优化技巧
好程序员Web前端教程之React原理解析及优化技巧,React既是当前企业选拔人才的主要技能之一,也是每一个Web前端人才需要掌握的知识。有不少同学想要快速掌握React,接下来就给大家简单介绍React原理以及相关性能优化技巧。
ReactJS起源于Facebook内部项目,是一个用来构建用户界面的JavaScript库,相当于MVC架构中的V层框架。与市面上其他框架不同的是,React把每一个组件当成了一个状态机,组件内部通过state来维护组件状态的变化,当组件的状态发生变化时,React通过虚拟DOM技术来增量并且高效的更新真实DOM。 React核心技术——虚拟DOM(Virtual DOM):对于每一个组件,React会在内存中构建一个相对应的DOM树,基于React开发时所有的DOM构造都是通过虚拟DOM进行,每当组件的状态发生变化时,React都会重新构建整个DOM数据,然后将当前的整个DOM树和上一次的DOM树进行对比,得出DOM结构变化的部分(Patchs),然后将这些Patchs再更新到真实DOM中。整个过程都是在内存中进行,因此是非常高效的。 React把每个组件都当作一个状态机来维护和管理,因此每个组件都拥有一套完整的生命周期,大致可以分为三个过程:初始化、更新和销毁。生命周期的每一个过程都明确的反映了组件的状态变化,对于开发来说就能很容易的把握组件的每个状态,不同的状态时期做对应的事情,互不干扰。 React性能优化技巧 由于React中性能主要耗费在于update阶段的diff算法,因此性能优化也主要针对diff算法。 1、减少diff算法触发次数。减少diff算法触发次数实际上就是减少update流程的次数,正常进入update流程有三种方式:setState、父组件render、forceUpdate。 2、shouldComponentUpdate。使用shouldComponentUpdate钩子,根据具体的业务状态,减少不必要的props变化导致的渲染。如一个不用于渲染的props导致的update。另外,也要尽量避免在shouldComponentUpdate 中做一些比较复杂的操作, 比如超大数据的pick操作等。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Django框架基础步骤
Python云框架 mysite/ 外层目录,可更改名字 mysite/ 工程目录,保存代码和文件 _init_.py 一个将mysite定义为包的空文件 settings.py 部署和配置整个工程的配置文件(配置文件) urls.py URL路由的声明文件(路由文件) wsgi.py 基于WSGI的web服务器的配置文件 manage.py 一个与Django工程进行交互的命令工具 django-admin //Django框架全局管理工具 django-admin <command> [options] 作用: 建立并管理Django工程 建立并管理Django工程使用的数据库 控制调试或日志信息 运行并维护Django工程 manage.py \>python manage.py <command> [options] //只针对当前生成的工程 步骤: 步骤1:新建工程:Django-admin startproject mysite 步骤2-1:修改工程 :创建一个具体应用(app) 步骤2-2:修改工程:修改应用的views.py:对URL的具体...
- 下一篇
两行代码险些搞垮 JavaScript 生态,受影响项目超百万
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 4 月 25 日,一个名为 is-promise 的 npm 库进行了更新并发布了 v2.2.0 版本,没想到这一次更新却使 JavaScript 生态陷入危机,据媒体报道,目前已有数百万个项目受到了影响,而事件的始作俑者竟是一个仅仅“单行”的 JavaScript 库。 事件回顾 is-promise 库主要用来测试 JavaScript 对象是否为“Promise”,并在开发时使用该函数返回布尔值 yes 或 no,开发者可以通过 one-liner 调用并在自己的项目中使用这个库。4 月 25 日,is-promise 正常进行更新,发布了 is-promise v2.2.0,但由于该版本并未遵循正确的 ES 模块标准,从而导致更新完成后,由于不正确的 ES 模块标准,所有在构建时使用 is-promise 库的项目几乎全部发生故障。虽然这一错误不会使现有项目崩溃,但它却对开发者编译自己项目的新版本造成了影响。来看一下“肇事者”: declare function isPromis...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Linux系统CentOS6、CentOS7手动修改IP地址
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8编译安装MySQL8.0.19
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Red5直播服务器,属于Java语言的直播服务器
- CentOS6,CentOS7官方镜像安装Oracle11G
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池