初识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，也许会放弃，但是尽力而为。