认识 V（React V）的技术实现细节

目的：分析分割 V 功能的可能技术例如，目前流行的render props技术 V计算功能分割技术不成熟，是因为我们对逻辑计算行为的可分割原理缺乏认识

class MouseTracker extends React.Component {
  constructor(props) { //1
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this); //2
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) { //3
    this.setState({ //4
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {//5
    return ( //6
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}> //7
        <h1>移动鼠标!</h1>
        <p>当前的鼠标位置是 ({this.state.x}, {this.state.y})</p> // 8
      </div>
    );
  }
}

React 技术的一个前提是，它是制作VV，而不是直接依赖DOM的V，像Backbone老一代SPA框架那样；
第二，React 制作VV的API 工具根据定制性和制作不同种类V不同，有三类：

第一，手动制作R变量或 VV实例（另外两种都制作VV实例的模板），例如 const staticView = this a static view</ SPAN>; 第二，提供一定抽象的 R函数组件；可以用参数props进行实例派生；第三，提供状态属性的抽象 R 类组件；参数props进行实例，并且提供状态智能，和灵活形式定制功能；
第三，制作VV的流程是，用API工具 return的 VV实例，给ReactDOM这个库进行渲染；
第四，函数和类组件都是抽象的VV模板，这些抽象的VV实例（可R 组件）模板，需要经参数（props）实例化为 VV实例；
第五，为了满足工程需要，抽象的VV模板除了抽象一些形式数据（props 为data ），行为（props 为 callback function），还需要抽象出形式部分（props 为 VV本身）；

上面的 MouseTracker 就是使用第三个API，类制作；开始代码解释：

1 这个是类构造函数，由 R 类组件提供很自动化，它隐藏了很多秘密；
2 这个和 JS Class实例化对象的原理有关，似乎对象在创建时候，和 handleMouseMove 不相关而造成的；
3 这是这个类的自定义方法，是V的重要形式，交互输入；
4 
5 render是 R 类组件最特殊的一个方法，它 return 一个VV实例（JSX语法）
6
7 JSX 绑定交互输入
8 状态的交互输出