React原理学习

vdom和diff

• h函数
• vnode数据结构
• patch函数

diff算法

• 只比较同一层级，不跨级比较
• tag不相同，则直接删掉重建，不再深度比较
• tag和key两者都相同，认为是相同节点，不再深度比较

JSX本质

查看react编译结果：Babel

编译后为createElement函数（h函数 ），返回vnode。

// 参数一：标签名 / 组件变量
// 参数二：attributes
// 参数三及往后：children / text
React.createElement('tagname', null, [])
React.createElement('tagname', null, child1, child2, ...) 

组件名首字母大写（React规定），用于区分html tag / 自定义tag

合成事件

• 所有事件挂载到document上
• event不是原生的，是SyntheticEvent合成事件对象
• 和Vue事件不同，和dom事件也不同

优势：

• 更好的兼容性和跨平台
• 载到document，减少内存消耗，避免频繁解绑
• 方便事件的统一管理（事务机制）

setState和batchUpdate

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

同步setState过程

isBatchingUpdates = true

this.setState({
   
	count: this.state.count + 1,
});

isBatchingUpdates = false

异步setState过程

isBatchingUpdates = true

setTimeout(() &