React架构设计：项目实战经验分享前言这是第一次在GitChat上发布自己的文章，近期我在负责开发一个大型电商平台项目，所采用的前端架构是React.js。设计到的技术栈有Reactjs、React-Router、Redux、Nodejs、Webpack、Sass等等。所以思来想去，还是就现在最火的框架React.js来跟小伙伴们聊聊前端。大家应该都知道，以往的前端工作内容，只是一些切图写一些样式。甚至有的公司这些活都是交给设计来完成，当时根本就没有什么前端相关的话题。但是随着业务需求越来越复杂，传统的“前端”已经无法满足实现这些复杂的功能点。HTML5跟CSS3的问世，彻彻底底的推翻了整个“前端”。我一开始是写Java的。13年从Java转成前端，整整四年时间，见证了前端这三年来天翻地覆的更新。就去年聊的水生火热的三大框架(React、vue、angular)来聊聊,很多干前端的，干后端的都问过我一个问题：“这么多前端框架，哪个好？”。我一般都笑笑跟他们说我也不知道。一个框架的问世到拥有这么多的使用者，你能说它不好吗？那么问题来了，我们要去学哪个才好呢？在这里我给的建议是：“精通其一，熟悉其二，最终还是原生Javascript”。在这里我主要介绍的是Reactjs。分享给大家我近期开发的电商项目涉及到的知识点。如果你是准备近期着手学习Reactjs的，我可以推荐给你一些学习方法。如果你已经玩React易如反掌了，我们可以一起聊聊React，聊聊JavaScript。如果你是React专家级别的，老司机请带带我。废话就不多说了。总之一句话，希望小伙伴能共同学习，共同进步。下面进入正题；原理在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（VirtualDOM）的机制：在浏览器端用Javascript实现了一套DOMAPI。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（EventLoop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM...
