react

JSX的编译和执行

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

用babel编译JSX文件的结果

"use strict";

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  render() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Hello, world!"), /*#__PURE__*/React.createElement("h2", null, "It is ", this.state.date.toLocaleTimeString(), "."));
  }

}

render() 函数里的jsx被编译了成React.createElement 如同vue的模版template编译成render函数 里面用createElement和JSX编译的结果差不多

snabbdom 虚拟DOM库，react vue都借鉴了他 snabbdom的h函数把js模拟的DOM结构转为虚拟DOM树 vnode

snabbdom的patch方法会diff两个虚拟dom树 然后最小更新

patch分为两个阶段 1执行diff算法，纯js计算，计算出最小更新，2将diff结构渲染DOM

每个vnode都有一个elem 是实际的dom 去更新这个dom

把JSX的语法转译为React.createElement函数即h函数，函数的入参是js模拟的dom结构 React.createElement函数会生成vnode虚拟DOM树，每次触发render函数会生成新的虚拟DOM树，比较diff新旧两个DOM，得出最小更新范围，更新最小范围的真实DOM！！！！！这就是数据驱动视图，有效的控制DOM操作

Vnode patch（elem， vnode） patch（vnode，newVnode） diff

vue初次渲染过程 1、解析模版为render函数（或在开发环境中已完成，vue-loader） 2、 // 触发响应式，监听data属性getter，setter 3、执行render函数，触发data的getter,监听这个data属性，生成vnode， patch(elem, vnode)

更新过程 修改data，触发setter（此前在getter中已被监听），重新执行render函数生成newVnode，patch(vnode, newVnode)

合成事件

react中的事件是合成事件

更好的兼容性和跨平台（桌面端和移动端？）

载到document，减少内消耗，避免频繁解绑

方便事件统一管理

setSate

1、有时异步（普通使用），有时同步（setTimeout、DOM事件） 2、有时合并（对象形式），有时不合并（函数形式）

React和vue

1、都支持组件化 2、都是数据驱动视图 3、都是用vdom操作DOM 4、React使用JSX拥抱JS 5、Vue使用模版拥抱html 6、React函数式编程，Vue声明式编程

组件之间通讯

1、父子组件通讯props 2、自定义事件 3、redux和context

redux

1、单向数据流 用户发出action，reducer中算出新的state，更新视图view

2、使用异步action 使用redux中间件（redux-thunk） redux-promise