[聚焦React] 8 React原理

8-2 函数式编程
纯函数（不可变值）：返回一个新值
SCU
redux
8-3 vdom和diff

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

diff 优化:

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

8-4 JSX本质
jxs等同与vue模版， jxs不是js

• React.createElement即h函数，返回vnode
• 第一个参数， 可能是组件， 可能是html、tag
• 组件名， 首字母必须大写（tag是小写）

8-5 合成事件机制
优势：

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

8-6 setState和batchUpdate机制
setState主流程

setState是异步还是同步？

• setState无所谓异步还是同步
• 取决于是否能命中batchUpdate机制
• 判断isBatchingUpdates

batchUpdate机制:

8-7 transaction（事务）机制

transaction.initialize = function () { consle.log('initialize') }
transaction.close = function() { consle.log('close') }
function method() { consle.log('123') }
transaction.perform(method); // initialize -> 123 -> close

8-8 组件渲染和更新过程
JSX如何渲染为页面? JSX 即createElement函数

• props state
• render() 执行生成vnode
• patch(elem, vnode)

setState之后如何更新页面?

• setState(newState) -> dirtyComponents(可能有子组件)
• render()生成vnode
• patch(vnode, newVnode)

8-9 React-fiber 性能优化
更新的（patch）两个阶段：

• reconciliation阶段（执行diff算法， 纯JS计算）
• commit阶段（将diff结果渲染DOM）

可能存在的性能问题：

• JS是单线程， 且和DOM渲染共用一个线程
• 当组件足够复杂， 组件更新时计算和渲染都压力大
• 同时再有DOM操作请求（动画、鼠标拖动等），会有卡顿

解决方案fiber

• 将reconciliation阶段进行任务拆分（commit无法拆分）
• DOM需要渲染时暂停， 空闲时恢复
• window.requestIdleCallback

什么是fiber？是React内部运行机制。