初探目前，在前端开发领域，Angular、React、Vue这几大框架占据着主流地位，并可能会持续很长时间。在三门框架中，从数据绑定机制来看，vue和angular采用了双向数据绑定的MVVM模式，而reactvirtualDom没有双向数据绑定机制，需要实现通过API输入的双向场景。下面主要分析一下react的一些特点和用法。一、万物皆组件1组件的本质React的核心思想是：封装组件。每个组件维护自己的状态和UI，当状态发生变化时，整个组件会自动重新渲染。基于这种做法的一个直观感受是，我们不再需要来回寻找某个DOM元素，然后操作DOM来改变UI。2创建组件的方式(1)函数式定义的无状态组件,mountNode)(2)es5原生方式React.createClass定义的组件React.createClass是React最先推荐的创建组件的方式。这是ES5原生JavaScript实现的React组件。(3)extendsReact.Component定义的es6形式的组件React.Component用于创建ES6形式的react组件。目前强烈推荐React创建有状态组件的方式，最终会取代React.createClass形式；相对来说，在React.createClass中可以更好的实现代码复用。2.React的生命周期React中有四种方式触发render：?先renderInitialRender?调用this.setState（不是setState会触发render，React可能合并操作，然后render一次）?父组件被更新（一般是props发生变化，但即使props没有发生变化或者父子组件之间没有数据交换，也会触发render）?调用this.forceUpdate3.ReactVirtualDom技术1传统页面开发，或多或少都会涉及到dom操作，而在进行dom操作时，会有相应的各种优化策略，尽可能的减少页面重新布局和重绘的次数。2比如下面批量dom更新主要有3个优化：1使用documentFragment进行批量dom更新，然后一次性更新到document2克隆你要更新的节点，在克隆的节点上进行dom批量更新，然后clone这个节点与原来的节点交换3.先隐藏要更新的节点，然后做dom的批量更新，最后重新显示隐藏的节点。传统的手动批量更新复杂且容易出错，而React的虚拟DOM技术让我们远离了这种复杂性，我们不再需要考虑何时以及如何进行DOM性能调优。基于React开发时，所有的DOM构建都是通过虚拟DOM进行的。每当数据发生变化时，React都会产生：触发相应组件的render方法；重建一个新的虚拟DOM树；结合当前新的虚拟DOM树和之前的旧树进行比较；获取DOM结构的差异，计算最小变更集，并执行实际的浏览器DOM更新（批量更新）。虽然每次都需要构造一个完整的虚拟DOM树，但是由于虚拟DOM是内存数据，性能极高，只对实际DOM进行Diff部分操作，就可以达到提升性能的目的。这样，在保证性能的同时，开发者不再需要考虑由于某些数据的变化，如何更新到一个或多个特定的DOM元素，也不需要额外编写性能优化的代码，完全交给React类库来做，我们只需要关心如何在相应的数据状态下实现相应组件的render方法，让开发变得简单。那么使用虚拟DOM技术的React性能如何呢？4.React总结1ReactJs是基于组件化开发的，所以说到底你的页面应该是由几个小组件组成的一个大组件。2可以通过属性将值传给组件，也可以通过属性将内部结果传给父组件（留给大家研究）；如果你想对一些值的变化做DOM操作，你需要将这些值放在状态中。3给组件添加外部css样式时，类名要写成className而不是class；添加内部样式时，应该是style={{opacity:this.state.opacity}}而不是style="opacity:{this.state.opacity};"。4组件名称的第一个字母必须大写。5变量名用{}包裹，不能加双引号。
