React原理

函数式编程
- 回顾SCU和redux代码
vdom和diff
JSX本质
合成事件
- 为何要合成事件机制
setState batchUpdate
- 核心要点
- - setState主流程
  - batchUpdate机制
  - setState是同步还是异步
  - 哪些能命中batchUpdate机制
  - 哪些不能命中batchUpdate机制
  - transaction（事务）机制
组件渲染过程
- 回顾Vue组件渲染和更新过程
- 回顾JSX本质和vdom
- 回顾dirtyComponents
- 讲解内容
- - 组件渲染过程
  - 组件更新过程
  - 更新的两个阶段
  - 可能会有性能问题
  - 解决方案 fiber
  - 关于fiber
- 小结

函数式编程

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

回顾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

（八）React原理相关推荐

React 原理揭秘总结
React 原理揭秘工作角度:应用第一,原理第二. 原理有助于更好地理解React 的自身运行机制. setState()异步更新数据. 父组件更新导致子组件更新,纯组件提升性能. 思路清晰简单为前 ...
react学习笔记 react-router-dom react-redux基础使用及手写基础源码组件反射 react原理
vdom diff 高效的diff算法新老vdom树比较更新只需要更新节点数据变化检测 batch dom读写组件多重继承 //parent components export default ...
从 Preact 源码一窥 React 原理（二）：Diff 算法
从 Preact 源码一窥 React 原理(二):Diff 算法前言 Diff 算法渲染 diffChildren 函数 diff 函数 diffElementNodes 函数 diffProp ...
从 Preact 源码一窥 React 原理（一）：JSX 渲染
从 Preact 源码一窥 React 原理(一):JSX 渲染前言 JSX 渲染 VNode createElement 函数 coerceToVNode 函数总结参考资料系列文章: 从 P ...
人工智能AI实战100讲（八）-原理+代码详解 | 稠密重建之SGM/tSGM算法
立体匹配算法介绍全局立体匹配算法全局立体匹配算法主要是采用了全局的优化理论方法估计视差,建立全局能量函数,通过最小化全局能量函数得到最优视差值: 通过二维相邻像素视差之间的约束(如平滑性约束)而得 ...
react map循环生成的button_【第1945期】彻底搞懂React源码调度原理（Concurrent模式）...
前言估计会懵逼.今日早读文章由成都@苏溪云投稿分享. 正文从这开始~~ 最早之前,React还没有用fiber重写,那个时候对React调度模块就有好奇.而现在的调度模块对于之前没研究过它的我来说更 ...
react黑马前端学习笔记
React 一.React概述 1.1简介 react是一个用于构建用户界面的js库用户界面:HTML页面 React主要用来写HTML页面或者构建Web应用如果从MVC的角度来看,React仅仅 ...
（一）导学（前端框架面试-聚焦Vue/React/Webpack）
导学全面高效学习前提前端常见面试流程知识点介绍 Vue框架部分 React框架部分工具部分项目设计讲解方式注意事项全面全面的知识体系大量的面试真题完整的技术面试流程高效直 ...
React 系列之怎么学最快速有效
「 React有多受欢迎」大家知道我写了一系列关于前端的文章和教程,其中包括MVVM框架的对比和选择. 第五篇: 秒懂Vuejs.Angular.React原理和前端发展历史第六篇: Vuejs ...

（八）React原理

React原理

函数式编程

回顾SCU和redux代码

vdom和diff

JSX本质

合成事件

为何要合成事件机制

setState batchUpdate

核心要点

setState主流程

batchUpdate机制

setState是同步还是异步

哪些能命中batchUpdate机制

哪些不能命中batchUpdate机制

transaction（事务）机制

组件渲染过程

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

回顾JSX本质和vdom

回顾dirtyComponents

讲解内容

组件渲染过程

组件更新过程

更新的两个阶段

可能会有性能问题

解决方案 fiber

关于fiber

小结

（八）React原理相关推荐

最新文章

热门文章