初识React

初识React

现代前端开发有很多的新名词,真是眼花缭乱。最近几年最火的三大框架,Vue, React, Angular, 作为一个专职前端,不学习学习,都不好意思说自己是做前端的,那这一波新的’潮流‘到底刮起的什么呢?我们前仆后继的体验新框架,新技术,是在尝鲜的过程中跑跑Hello World!, 还是仔细体会‘风潮’的本质呢?在下学艺不精,斗胆以React,为例来体会新潮流下的前端开发。何为React首先,我们要明白,新工具的出现或许是为了解决痛点,可能是开发的痛点,亦或是用户的痛点,不能为了使用而使用,用jQuery,很能好解决的问题,或许对新工具就没有那么强的需求,还凭空增加学习成本。三个简单问题,初步认识React:

React是什么?

React有什么?

怎么使用React?

A JavaScript library for building user interfaces.上述即为React的本质:为构造用户界面而生的JavaScript库。也是我们常说的view层。React开篇就告知全世界,我就是个view层库,任务很简单,构造界面。这就很好的回答了第一个问题。传统的前端开发,直接,明确。需要哪个元素隐藏,不论是使用原生JavaScript还是jQuery,我们都能很明确的操作它。这个它就是我们前端接触得非常多的一个重点—DOM节点,传统的前端开发就是对DOM的操作,进而完成对界面的更新。而新潮流带来的一个更新就有一点—数据驱动。数据驱动,减少了对DOM的直接操作。是通过数据的变化,自然而然地界面‘自动’更新了。这是二种开发模式中一个重大变化,个人认为,这也是二种开发模式下最大的不同。依然关注DOM,直接对它的操作是慢的,我们应该尽量减少对它的操作,对于前端性能的优化中,同样也存在着批量或者其他方式来减少DOM操作的优化手段,而React中借鉴了Virtual DOM(虚拟DOM)的概念。Virtual DOM可以粗鄙的认为是,当数据更新时,会现在内存中创建一个虚拟的DOM树,比对真是DOM树和虚拟树(VTree)后,以最小操作来实现真是DOM的更新。这里主要包括两个相对重要的过程:DOM diff和DOM patch,暂时不深入了解,只需知道data changes —> virtual DOM create —> dom tree diff —> patch的大致过程。

很显然,以上的认识是不够充分的,但对于现阶段是足够的,接下来,我就利用互联网浩瀚的知识海洋,参考大牛,来一步一步创建一个新的属于自己的React,也许会放弃,但是尽力而为。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180607G0DFNV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券