Virtual DOM

程序员是一门靠手艺吃饭的工作，最根本的就是技术能力。从初级到高级，从高级到资深，从资深到架构，就像爬楼一样，站的越高需要看到的视野越开阔。30岁前程序员靠体力，30岁后需要靠脑力，需要靠技术视野打开更广阔的职业生涯。程序员们很苦恼，技术层出不穷让人应接不暇，需要不停学习新的技术避免被淘汰，但是仅仅靠学习新技术就好了吗？所谓的技术视野到底是什么，又如何去提升呢？ 1 驱动力 首先需要明白做一件事情一定需要一定的驱动力，那么对于提升技术视野的驱动力在哪呢？ 兴趣 兴趣爱好是最好的老师，所以兴趣是第一驱动力。如果你对一门技术充满好奇心，你一定想尽办法弄清楚它的原理，并且迫不及待的进行实践。 谷歌有一个20%的计划，规定员工可以拿出20%的时间从事自己兴趣爱好的事情。于是从中诞生了Gmail, Google Glass等创新性的产品。这些产品的诞生第一原动力就是兴趣爱好！ 态度与使命 兴趣不等于工作，日常工作往往枯燥乏味让人提不起劲，这时候靠什么支撑，可以多想想自己的态度和使命。每一件事情做完后可以反思，是否用了100%的能力，不要留有遗憾。做事也需要有使命感，比如阿里的"让天下没有难做的生意"、腾讯的"科技向善"、美团的"Eat better, live better"，每一家伟大公司都有一个伟大使命，让你的日常工作和公司使命关联起来，瞬间是不是觉得自己在从事一项拯救地球的事业。

什么是Virtual DOM？ Virtual DOM是对DOM的抽象,本质上是JavaScript对象（也就是通过JavaScript语言来描述一段HTML代码）,这个对象就是更加轻量级的对DOM的描述. 虚拟DOM首次产生是React框架最先提出和使用的，其卓越的性能很快得到广大开发者的认可，继React之后vue2.0也在其核心引入了虚拟DOM的概念。在没有虚拟DOM的时候，我们在创建页面的时候一般都是使用HTML标签一个一个的去搭建我们的页面，既然有了DOM节点以后，为什么不直接使用原生DOM，那么原生DOM到底有什么弊端呢？原因是这个样子的，原生DOM中一个Node节点有N多的属性，一旦对DOM进行操作的时候会影响页面性能的核心问题主要在于DOM操作导致了页面的重绘或重排，为了减少由于重绘和重排对网页性能的影响，所以无论在什么项目中尽可能少的去操作DOM节点是性能优化的一大重点。 为什么需要DOM？ 既然我们已经有了DOM,为什么还需要额外加一层抽象? 1. 首先， 前端性能优化的一个秘诀就是尽可能少地操作DOM ，DOM相对较慢，而且频繁变动DOM会造成浏览器的回流或者重绘，这些都是性能的杀手，因此我们需要这一层抽象，在patch过程中尽可能地一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况。 2. 其次，

与React 相似： （1）虚拟DOM（Virtual DOM） 虚拟DOM的诞生是基于：改变真实的DOM状态远比改变一个JS对象的花销要大的多。 虚拟DOM是一个映射真实DOM的JS对象，当有变化产生时，就会创建一个新的虚拟DOM对象，计算新旧Virtual DOM的差别，然后把这些差别应用在真实的DOM上。 虚拟DOM的本质是嵌套着数组的原生对象，当新一项被加进当前JavaScript对象时，一个函数会计算新旧Virtual DOM的差异且反应在真实的DOM上。高性能框架提供了计算这些差异的算法。（核心） Vue在渲染过程中会跟踪每一个组件的依赖关系，不需要重新对整个组件树渲染，Vue默认进行了优化； React每当应用的状态被改变时，全部子组件都会重新渲染，可以通过shouldComponentUpdate（一种生命周期方法）来进行控制，以避免不必要的渲染开销。 （2）可视化组件 组件化应用：把一个应用拆分成功能明确的模块，每个模块之间通过某种方式互相关联 （3）都提供了路由和状态管理模块 不同： （1）模板与JSX 最大的区别是模板不同，Vue模板近似常规的HTML，使用HTML模板进行渲染，把html、css、js组合到一起，用各自的处理方式，提供了模板引擎处理 React推荐使用JSX--一种JS语法扩展（JS混杂着XML语法），使用编程思维书写模板，思路是all in

一.特性 fragment 模版支持fragment和string类型，对应ReactElement数组和字符串 v16.2.0还提供了JSX的fragment支持：<></> error boundary 组件级错误处理，支持捕获子组件树内部异常，UI层的兜底方案 portal 允许组件树与DOM树结构不一致，用于hovercards，tooltips等场景 例如tooltip在DOM结构上target与tip一般是兄弟关系（布局需要），而逻辑上tip是属于target的，是父子关系，portals特性用来处理这种场景 特殊的，事件冒泡经过处理，portals组件的父组件仍然能接到冒泡通知（React 16之前就内置了用来抹平DOM事件冒泡差异的事件系统，这里顺便支持拐弯冒泡 示例） support for custom DOM attributes 之前内置了HTML/SVG属性名白名单，自定义属性会被拦截并忽略掉，React 16去掉了这个限制 去掉该限制有2个原因，其一，这层内置的属性过滤对于非标准的（比如proposal阶段的）新属性和其它库/框架（比如Angular、Polymer）很不友好；其二，bundle里要内置一份体积不小的属性白名单，维护起来还挺麻烦 improved server-side rendering 号称比React 15快3倍

百度网盘下载 第1章 准备工作 介绍了 Flow、Vue.js 的源码目录设计、Vue.js 的源码构建方式，以及从入口开始分析了 Vue.js 的初始化过程。 1-1 课程简介 1-2 准备工作 1-3 认识 Flow-文档 1-4 认识 Flow 1-5 Vue.js 源码目录设计-文档 1-6 Vue.js 源码目录设计 1-7 Vue.js 源码构建-文档 1-8 Vue.js 源码构建 1-9 从入口开始-文档 1-10 从入口开始 第2章 数据驱动 详细讲解了模板数据到 DOM 渲染的过程，从 new Vue 开始，分析了 mount、render、update、patch 等流程。 2-1 数据驱动-文档 2-2 数据驱动 2-3 new Vue 发生了什么-文档 2-4 new Vue 发生了什么 2-5 Vue 实例挂载的实现-文档 2-6 Vue 实例挂载的实现 2-7 render-文档 2-8 render 2-9 Virtual DOM-文档 2-10 Virtual DOM 2-11 createElement-文档 2-12 createElement 2-13 update-文档 2-14 update 第3章 组件化 分析了组件化的实现原理，并且分析了组件周边的原理实现，包括合并配置、生命周期、组件注册、异步组件。 3-1 组件化-文档 3-2

vue和react的区别 React严格上只针对MVC的view层，Vue则是MVVM模式 virtual（虚拟） DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而对于React而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制 组件写法不一样，React推荐的做法是 JSX + inline style，也就是把HTML和CSS全都写进JavaScript了，即'all in js'；Vue推荐的做法是webpack+vue-loader的单文件组件格式，即html，css，js写在同一个文件 数据绑定：vue实现了数据的双向绑定，react数据流动是单向的 state对象在react应用中不可变的，需要使用setState方法更新状态；在vue中，state对象不是必须的，数据由data属性在vue对象中管理 redux和vuex的区别 vuex是redux的基础上进行改变，对仓库的管理更加明确 使用mutation来替换redux中的reducer vuex有自动渲染的功能,所以不需要更新 vuex是专门为vue提供的状态管理工具,而redux是一个泛用的状态管理框架 vuex的实现原理 Vuex的状态存储是响应式的，当Vue组件从store中读取状态时

转载请注明： http://www.panaihua.com/react-base/ 简介 React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话，那么 React 的组件就相当于 MVC 里面的 View。说白点就是帮助我们将界面分成各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。 一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的，这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。 React.js 不是一个框架，它只是一个库。它只提供 UI （view）层面的解决方案。在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。 JSX React的核心机制就是实现了一个虚拟DOM，利用虚拟DOM来减少对实际DOM的操作从而提升性能，组件DOM结构就是映射到这个虚拟的DOM上，React在这个虚拟DOM上实现了一个diff算法，当要更新组件的时候，会通过diff寻找要变更的DOM节点，再把这个修改更新到浏览器实际的DOM节点上，所以实际上不是真的渲染整个DOM树，这个虚拟的DOM是一个纯粹的JS数据结构，所以性能比原生DOM会提高很多；

谁都没有看见过风，更不用说你和我了。但是当纸币在飘的时候，我们知道那是风在数钱。 React 影响着我们工作的方方面面，我们每天都在使用它，只窥其表却难以窥其里。正所谓看不如写，本篇文章的目的就是从原理层面探究 React 是如何工作的。 工具 在写文章之前，为了方便理解，我准备了一个懒人调试仓库 simple_react ，这个仓库将 benchmark 用例（只有两个 ^ ^）和 React 源码共同放在 src 文件夹中，通过 snowpack 进行热更新，可以直接在源码中加入 log 和 debuger 进行调试。当然这里的“源码”并不是真的源码，因为 React 源码中充斥着巨量的 dev 代码和不明确的功能函数，所以我对源码进行了整理，用 typescript 对类型进行了规范，删除了大量和核心流程无关的代码（当然也误删了一些有关的 ^ ^）。 如果你只是希望了解 React 的运行流程而不是写一个可以用的框架的话，那么这个仓库完全可以满足你学习的需要。当然，这个仓库基于 React16.8 ，虽然这个版本并不包括当前的航道模型 Lane 等新特性，但是是我个人认为比较稳定且更适合阅读的一个版本。 （如果希望调试完整的源码，也可以参考 拉取源码 通过 yarn link 来进行 debug） 文章结构 fiber 架构设计及首次渲染流程 事件委托机制 状态的更新 时间片

学习html5的同学很多都在考虑。没有计算机基础能不能学会呢?在html5开发领域中没有特别的专业区分，能不能学会?跟有没有计算机专业知识也没有太大的关系，只能说有计算机专业，上手会快一点，并不能代表他一定比你学的好。 其实很多计算机专业的学习html5也要从基础班开始学起，而非计算机专业的学员只要比别人多付出点努力，不比那些计算机专业的人学的差。所以主要的还是你感不感兴趣，或者说你是否急需要掌握一门技能来养活自己。只要你想要学习，只要你是用心学习，相信你定不会比任何一个学员差，不过要是你决定了要踏入html5的世界，那你就要做好吃苦的准备，做好奋斗的准备，改变总是痛苦的，没有基础不可怕，没有高学历也不用担心，现在唯一要做的用心的认真的学习。 现在的社会日新月异，高速的发展，需要我们这一代人掌握一定的计算机知识，要不断的学习充电，不断的提升自己的价值，想给自己充电的朋友，建议从现在做起，从当下开始，步步为营，日日精进，总有一天能达到自己的目标。于是总结了几个学习中要注意的要点，希望和各位苦恼于技术水平卡在瓶颈不知道该怎么提高的年轻工程师们分享。 1 夯实基础 要成为一名年薪30W的前端工程师，基础一定要掌握牢固，基础知识一问三不知，岂不是要贻笑大方。css，js基础知识一定要掌握得很熟练，你能使用css实现斑马条纹背景，毛玻璃效果吗？能给图片实现滤镜效果，能实现所有自适应布局效果吗

前言 面试竞争力越来越大，是时候撸一波Vue和React源码啦； 本文将前2个月面试总结成从20个层面来对比Vue和React的源码区别； 文章有点长，可以收藏，慢点品尝； 如果需要了解API的区别，请戳： Vue 开发必须知道的 36 个技巧 React 开发必须知道的 34 个技巧 文章源码： 请戳 ，原创码字不易，欢迎star！ 1.Vue和React源码区别 1.1 Vue源码 来张Vue源码编译过程图 图片来源： 分析Vue源码实现 1.1.1 挂载 初始化$mounted会挂载组件,不存在 render 函数时需要编译(compile); 1.1.2 compile 1.compile 分为 parse，optimize 和 generate，最终得到 render 函数； 2.parse 调用 parseHtml 方法，方法核心是利用正则解析 template 的指令，class 和 stype，得到 AST； 3.optimize 作用标记 static 静态节点，后面 patch,diff会跳过静态节点； 4.generate 是将 AST 转化为 render 函数表达式，执行 vm._render 方法将 render 表达式转化为VNode，得到 render 和 staticRenderFns 字符串； 5.vm._render 方法调用了 VNode