React原理相关知识点

系列文章目录

---

目录

系列文章目录

前言

一、JSX本质

二、合成事件

三、setState 和 batchUpdate

四、组件渲染和更新全流程

总结

---

前言

react原理相关

---

一、JSX本质

React.createElement('div',null,[child1,child2,child3]);
React.createElement('div',{...},child1,child2,child3);
React.createElement(List,null,child1,child2,child3);
// JSX本质是 React.createElement 即h函数，返回vnode,通过patch函数渲染
// 第一个参数，可能是组件，也可能是html tag
// 组件名，首字母必须大写（react规定）

二、合成事件

• 所有事件挂载到document上（17版本后事件绑定到root组件，有利于多个React版本并存）
• event不是原生的，是SyntheticEvent合成事件对象

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

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

三、setState 和 batchUpdate

• setState无所谓异步还是同步
• 看是否命中 batchUpdate 机制
• 判断 isBatchingUpdates
• 能命中 batchUpdate 机制（生命周期和它调用的函数、React中注册的事件和它调用的函数）
• 不能命中（setTimeout/setInterval和它调用的函数、自定义DOM事件和它调用的函数）

四、组件渲染和更新全流程

组件渲染

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

组件更新

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

patch的两个阶段

• reconcliliation(协调)阶段-执行diff算法，纯JS计算
• commit阶段-将diff结果渲染DOM

不拆分可能会有性能问题，解决方法fiber（React内部运行机制）

• 将reconcliliation阶段进行任务拆分
• DOM需要渲染时暂停，空闲时恢复
• 通过window.requestIdleCallback 知道DOM是否需要渲染（有的浏览器支持）

---

总结

react原理相关知识点