一、JSX本质

JSX等同于Vue的模板
Vue模板不是html 而是一个render函数  JXS也不是JS 本质就是createElement函数

React.createElement类似于h函数，但传参不同，子元素可以不写成数组 返回的也是node
第一个参数不一定是tag名 也可以是组件名 如Input(React中组件名首字母必须大写！）
用void(0) 代表this




style:




加载组件：




事件




列表



二、合成事件



dispatchEvent：派发事件
合成事件机制：
  • 为了更好的兼容性和跨平台 虽然不能完全脱离DOM事件 但尽可能地拜托DOM的逻辑
  • 挂载到document减少内存消耗 避免频繁解绑

三、batchUpdate和setState

之前学过了
setState有时候异步 有时候同步 有时候合并 有时候不合并 那这是为什么呢！
setState主流程：

异步走左边 （dirtyComponents 就是现在state已经被更新的components）先把组件存进去
同步左右边


这是因为，我们设置了isBatchingUpdates 通过判断这个值 来决定是否为batch update




所以setState本身无所谓异步还是同步 就是看它是否命中batchUpdate机制
可以命中batchupdate机制的：
  • 生命周期（和它调用的函数）
  • React中注册的事件
  • 总之是React可以“管理”的入口


不能命中的：
  • setTimeout setInterval
  • 自定义DOM事件
  • 总之是React管不着的入口

四、transaction


流程图：
也就是先执行initialize 后执行方法 最后执行close

简单例子，感受一下：

这就是一个机制 服务于batchUpdate

五、组件渲染更新

一些要点：
  • JSX如何渲染为页面
  • setState之后如何更新页面

渲染时：
  • 拿到props state
  • render生成vnode
  • 使用patch渲染到页面上
更新时：
  • setState（newState)生成dirtyComponents（可能有子组件）
  • render生成newVnode
  • 使用patch渲染到页面上
  • patch又被拆分两个阶段：
  • 阶段1：reconciliation阶段 执行diff算法 纯JS计算
  • 阶段2：commit阶段 将idff结果渲染在DOM中
reconciliation阶段还可以继续拆分 通过window.requestIdleCallback 判断DOM需要渲染时暂停 空闲时恢复 
这种方法就叫做fiber