ReactJs 初涉

React是”一个用于构建用户界面的JavaScript类库”。
起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架都不满意，所以就自己写了一套，并且在13年开源了。官网描述其出发点为：用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time)。

核心概念

• Just the view
  React仅仅是UI, 所以它可以作为一个小特征，轻易地在已有项目中使用。
  
  传统的前端MVC(模型-视图-控制器)一般是将数据作为Model层，逻辑处理作为Controller层，页面渲染作为View层。核心问题就会变成如何将来自于服务器端或者用户输入的数据，动态并且高效的反应到用户界面上。
  React可作为MVC框架中的View层，通过一个 render() 方法，接受输入的参数并返回展示的对象。以下这个例子使用了JSX，它类似于XML的语法输入的参数通过 render() 传入组件后，将存储在this.props。
  注：this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

  class Greeting extends React.Component{
    render(){//the heart of React.js
      //pass in any typeof js objects, methods...
      return<div>{this.props}</div>;
    }
  }
  

• Virtual DOM
  react中的组件跟页面真实dom之间会有一层virtual dom(虚拟dom)，virtual dom是内存中的javascript对象，它具有与真实dom一致的树状结构。
  每次试图更新view时，react都会重新构建virtual dom树，然后将其与上一次virtual dom树作对比，依靠react强劲的核心算法dom diff找出真正发生变更的节点，最后映射到真实dom上，这也是react号称性能高效的秘密所在。
  依赖于virtual dom，对React而言，每一次界面的更新都是整体更新，而不是层叠式更新(即一个复杂的，各个UI之间可能存在互相依赖的时候，每一次独立的更新可能会引发其他UI的变化，假如我们的目的是更新C的数据，逻辑流很可能是这样的 A –>B–>C–>A–>B–>C，这种情况下中间状态的DOM操作就是极大的浪费)。
  
• Components
  组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。例如，Facebook的instagram整站都采用了React来开发，整个页面就是一个大的组件。
  对于React而言，完全是一个新的思路，从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。
  通过这种方式，每个组件的UI和逻辑都定义在组件内部，和外部完全通过API来交互，通过组合的方式来实现复杂的功能。React认为一个组件应该具有如下特征：
  （1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
  （2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
  （3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；
  （4）可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。
• Top down data flow
  数据绑定在小的例子里会工作的很好。然而，当你的app不断地迭代时，声明依赖会快速地引入循环。循环。循环。。。
  
  在这种情况下，你能预测一个Model发生变化时会发生什么吗？推理是非常非常困难的，因为它的执行次序可能是非常随意的。
  在React里面，数据流是一个方向的：从拥有者到子节点。数据仅向一个方向传递,可以认为它是单向数据绑定。
  然而，有很多应用需要你读取一些数据，然后传回给你的程序。会频繁地想更新某些React state。
  React也支持双向数据绑定，级隐式地强制在DOM里面的数据总是和某些React state保持一致
  可以使用提供的ReactLink实现双向绑定，其仅仅是一个onChange/setState()模式的简单包装和约定。它不会从根本上改变数据在React应用中如何流动。(即本质还是top-down data flow)