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(()