（八）React原理

函数式编程

一种编程范式，概念比较多
纯函数
不可变值

回顾SCU和redux代码

vdom和diff

h函数
vnode数据结构
patch函数
只比较同一层级，不跨级比较
tag不相同，则直接删掉重建，不再深度比较
tag和key，两者都相同，则认为是相同节点，不再深度比较
Vue2.x Vue3.0 React三者实现vdom细节都不同
核心概念和实现思路，都一样
面试主要考察后者，不用全部掌握细节

JSX本质

JSX等同于Vue模板
Vue模板不是html
JSX也不是JS

// https://www.babeljs.cn/

// // JSX 基本用法
// const imgElem = <div id="div1">
//     <p>some text</p>
//     <img src={imgUrl}/>
// </div>

// // JSX style
// const styleData = { fontSize: '30px',  color: 'blue' }
// const styleElem = <p style={styleData}>设置 style</p>

// // JSX 加载组件
// const app = <div>
//     <Input submitTitle={onSubmitTitle}/>
//     <List list={list}/>
// </div>

// // JSX 事件
// const eventList = <p onClick={this.clickHandler}>
//     some text
// </p>

// // JSX list
// const listElem = <ul>{this.state.list.map((item, index) => {
//     return <li key={item.id}>index {index}; title {item.title}</li>
// })}</ul>


// // 总结
// React.createElement('div', null, [child1, child2, child3])
// React.createElement('div', {...}, child1, child2, child3)
// React.createElement(List, null, child1, child2, '文本节点')
// // h 函数
// // 返回 vnode
// // patch

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

合成事件

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

    // 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力
    // 2. event.nativeEvent 是原生事件对象
    // 3. 所有的事件，都被挂载到 document 上
    // 4. 和 DOM 事件不一样，和 Vue 事件也不一样

为何要合成事件机制

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

setState batchUpdate

有时异步（普通使用），有时同步（setTimeout、DOM事件）
有时合并（对象形式），有时不合并（函数形式）
后者比较好理解（像Object.assign），主要讲解前者

核心要点

setState主流程

batchUpdate机制

setState是同步还是异步

setState无所谓异步还是同步
看是否能命中batchUpdate机制
判断isBatchingUpdates

哪些能命中batchUpdate机制

生命周期（和它调用的函数）
React中注册的时间（和它调用的函数）
React可以“管理”入口

哪些不能命中batchUpdate机制

setTimeout setInterval等（和它调用的函数）
自定义的DOM时间（和它调用的函数）
React“管不到”的入口

transaction（事务）机制

组件渲染过程

JSX如何渲染为页面
setState之后如何更新页面
面试考察全流程

回顾Vue组件渲染和更新过程

回顾JSX本质和vdom

JSX即createElement函数
执行生成vnode
patch(elem,vnode)和patch(vnode,newVnode)

回顾dirtyComponents

讲解内容

组件渲染过程

props state
render()生成vnode
patch(elem,vnode)

组件更新过程

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

更新的两个阶段

上述的patch被拆分为两个阶段：
reconciliation阶段 - 执行diff算法，纯JS计算
commit阶段 - 将diff结果渲染DOM

可能会有性能问题

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

解决方案 fiber

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

关于fiber

React内部运行机制，开发者体会不到
了解背景和基本概念即可

小结

组件渲染和更新过程
更新的两个阶段，reconciliation及commit
React fiber