之前做移动端开发，最近开始接手部分前端工作，一上来就是使用react框架来做。虽然之前对前端知识有所了解，但也仅仅是了解层面。想整理一下前端历史，看看自己是否遗漏前端必要的基础知识。
前端开发者开始基本上只需要根据后台提供的数据将网页内容排版呈现出来即可。用户的交互行为一般仅限于填写一个表单，然后把数据提交到服务器，提交成功后，直接刷新整个页面。
1.反复刷新页面，尤其是内容复杂的页面，对浏览器的渲染性能消耗很大。一个很小的局部交互动作，就会引起整个页面的刷新，显然对于浏览器性能是非常大的浪费。同时，由于页面刷新，导致不必要的等待和“闪屏”，这些对于有节操的产品汪或者程序猿都是难以容忍的。
2.由交互产生的很多细腻的前端数据，其实也很难交给后台处理，因为这是我们无处安放的临时状态。例如一个菜单是收起还是打开，一个面板是隐藏还是弹出，如果前端不去记录这些view对应的状态，那么后台就要记录这些状态，否则页面刷新后，这些状态信息就会丢失。即使我们不在乎页面和服务器之间通信的时间浪费，我们也很难想象有什么理由要在服务器上记录这些只和view相关的临时状态，毕竟这些状态不对应任何后台业务数据。
Ajax出现与局部页面更新。大量交互数据更新，我们需要把页面中元素取出来，重新赋值，再放回去。很麻烦。
Jsp：是能在html中插入java代码，html中显示java对象，变量值。
Jsx：js中插入标签xml，xml中显示js对象、变量。
react的奇思妙想：可不可以把浏览器里的DOM tree克隆一份完整的镜像到内存，也就是所谓的“virtual DOM”，当页面的state发生变化以后，根据最新的state重新生成一份virtual DOM（相当于在内存里“刷新”整个页面），将它和之前的virtual DOM做比对（diff），然后在浏览器里只渲染被改变的那部分内容。
改变state，view自动更新
view的组件化和模块化非常有利于分工协作、代码的积累复用以及单元测试。这对于提高团队开发的效率无疑具有非常重要的意义，这也是react广受青睐的重要原因之一，
决定页面呈现的state可以通过模块属性（props）从父模块传递到子模块。这种"树状"分流机制，有点像植物将养分（state）从根部不断运输到细枝末叶的过程
前端工作像拼接积木一样，搭出想要的界面
网友评论