好久没有再好好静心学习了，总是感觉很忙碌，很疲惫，现在准备开始重新学习记录，先从学习React开始吧，学习理论，慢慢更新笔记，会整体的更新完整个React体系学习记录，看到这篇文章的有缘人，如果你也在学习或者有疑问，或者我学习记录中有错误，欢迎一起进步。
关于JSX底层处理机制
1、将JSX语法编写代码转换成虚拟对象（Virtual Dom）
基于babel-preset-react-app 把JSX转换为React.createElement()方法；
只要是元素节点，必然会基于该方法处理;
React.createElement(ele, props, ...children);
+ ele - 元素标签名
+ props - 元素的属性集合（如果没有设置过属性，该值为null）
+ children - 第三个以及以后的参数，表示当前元素的子节点
再通过执行React.createElement方法创建出虚拟对象（vdom）；
vdom = {
$$typeof: Symbol(react.element),
ref: null,
key: null,
type: 标签名（或组件）,
props: {
元素相关属性，
children: 子节点信息（没有子节点，没有这个属性，属性可能是一个值，也可能是一个数组）
}
}
实现React.createElement方法：
function createElement(ele, props, ...children){
const virtualDOM = {
$$typeof: Symbol('react.element'),
ref: null,
key: null,
type: null,
props: {}
};
virtualDOM.type = ele;
if (props != null) {
virtualDOM.props = {
...props,
}
}
if (children.length === 1) virtualDOM.props.children = children[0];
if (children.length > 1) virtualDOM.props.children = children;
return virtualDOM;
}
2、把构建的虚拟DOM转换成真实DOM
基于ReactDOM中render方法处理；
注意这里React16 和 React18语法有所不同
V16
ReactDOM.render(<App/>, document.getElementById('root'))
V18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
实现render方法：
render方法本质就是遍历虚拟dom对象，如果有子节点那么久递归，然后生成真实dom最终插入到文档。
首先实现一个可以遍历对象所有私有属性的方法（私有的，不论是否可枚举，不论类型）
Object.getOwnPropertyNames(arr); 获取对象非Symbol类私有属性（无论是否可枚举）
Object.getOwnPropertySymbols(arr);获取对象Symbole类私有属性
还可以使用ES6提供Reflect.ownKeys(obj); 直接获取对象所有私有属性方法。
function each(obj, callback) {
// 一个好的函数一定会优先处理边界异常
if (obj == null || typeof obj !=='object') {
throw new TypeError('obj is not an object');
}
if (typeof callback !== 'function') {
throw new TypeError('callback is not a function')
}
const keys = Reflect.ownKeys(obj);
keys.forEach((key, index) => {
callback(obj[key], key);
})
}
todo：学习Reflect
const virtualDOM = {
$$typeof: Symbol('react.element'),
ref: null,
key: null,
type: null,
props: {}
};
function render(vdom, container) {
const {type, props} = vdom;
if (typeof type === 'string') {
const ele = document.createElement(type);
each(props, (value, key) => {
if (key === 'className') {
ele.className = value;
return;
}
if (key === 'style') {
each(value, (attrV, attrK) => {
ele.style[attrK] = attrV;
})
return;
}
if (key === 'children') {
let children = value;
if (!Array.isArray(children)) {
children = [children]
}
each(children, (child) => {
if (/^(string | number)$/.test(child)) {
ele.appendChild(document.createTextNode(child));
}
render(child, ele);
})
return;
}
ele.setAttribute(key, value);
})
container.append(ele);
}
}
关于setState
在React18中，setState操作都是异步的，不论是在哪执行，例如：合成事件、周期函数、定时器。
目的：实现状态的批处理
- 有效减小更新次数，降低性能消耗。
- 有效管理代码执行的逻辑顺序
原理：利用了更新队列【updater】机制来处理的
- 在当前相同时间段内【浏览器此时可以处理的事情中】，遇到setState会立即放入到更新队列中。
- 此时状态/视图还未更新
- 当所有的代码操作结束，会“刷新队列”【通知更新队列中的任务执行】：把所有放入的setState合并在一起执行，只触发一次视图更新【批处理操作】
在React18和16当中，关于setState是同步还是异步，是有一些区别的
React18中：不论在什么地方执行setState，都是异步的【都是基于updater更新队列机制，实现的批处理】
React16中：如果在合成事件、周期函数中，setState的操作都是异步的。但是如果setState出现在其他异步操作中【例如：定时器，手动获取DOM元素做的事件绑定等】，它将变为同步的操作【立即更新状态让视图渲染】。
react-dom中有提供flushSync api
该api可以刷新 “updater更新队列”，也就是让修改状态的任务立即执行一次。 可以改变默认的异步批处理机制。
关于合成事件
合成事件对象SyntheticBaseEvent：我们在React合成事件触发的时候，也可以获取到事件对象，只不过次对象是合成事件对象【React内部经过特殊处理，把各个浏览器的事件对象统一化后，构建的一个事件对象】
合成事件对象中，也包含了浏览器内置事件对象中的一些属性和方法：
- clientX/clientY
- pageX/pageY
- type
- preventDefault
- stopPropagation
- ...
- nativeEvent：基于这个属性，可以获取浏览器内置的事件对象。
React中合成事件的处理原理：
不是元素基于addEventListener单独做的事件绑定，React中的合成事件，都是基于“事件委托”处理的！
- 在React17及以后的版本都是委托给#root这个容器【捕获和冒泡阶段都做了委托】
- 在17版本以前，都是委托给document容器【而且只做了冒泡阶段的委托】
- 对于没有实现事件传播机制的事件，才是单独做的事件绑定【例如：onMouseEnter/onMouseLeave】
在组件渲染的时候，如果发现JSX元素属性中有onXxx/onXxxCapter 这样的属性，不会给当前元素直接做事件绑定，只是把绑定的方法赋值给元素的相关属性！例如：
outer.onClick = () => {console.log('outer')}
然后对#root这个容器做了事件绑定
原因：因为组件中所渲染的内容，最后都会插入到#root容器中，这样点击页面中任何一个元素，最后都会把#root的点击事件触发。
而在给#root绑定的方法中，把之前给元素设置的onXxx属性，在相应的阶段执行。
root.addEventListener('click', (ev) => {
let path = ev.path;
[...path].reverse().forEach(ele => {
let handle = ele.onClickCapture;
if (handle) { handle() }
})
}, true)
root.addEventListener('click', (ev) => {
let path = ev.path;
path.forEach(ele => {
let handle = ele.onClick;
if (handle) { handle() }
})
}, false)
原理步骤：
1、视图渲染中遇到合成事件绑定，并没有给元素做事件绑定，而是给元素设置对应的属性“合成事件属性”
2、给#root做事件绑定
- 捕获
- 冒泡
root上绑定的方法执行把所有规划的路径中，有合成事件属性的都执行即可。
所谓的合成事件绑定，其实并没有给元素本身做事件绑定，而是给元素设置onXxx合成事件属性，当事件行为触发，根据原生事件传播的机制，都会传播到#root容器上，React内部给#root容器做了事件绑定【捕获/冒泡】
当React内部绑定的方法执行的时候，会依据ev.path中分析的路径，一次把对应阶段的onXxx等事件合成属性触发执行。
合成事件是利用事件委托（事件传播机制）完成的。
如果不经过处理，方法中的this是undefined。如果绑定的方法是箭头函数，则找函数上级上下文中的this。
在执行这些方法之前，把原生的事件对象ev做特殊处理，返回合成事件对象，传递给函数。
React16中，关于事件对象的处理，React内部是基于“事件对象池”，做了一个缓存机制，React17及以后，是去掉了对象池和缓存机制的。
在控制台输出ev信息显示为null
- 当每一次事件触发的时候，如果传播到了委托的元素上【document/#root】,在委托的方法中，我们首先会对内置事件对象做统一处理，生成合成事件对象。
在React16当中，为了防止每一次都是重新创建出新的合成事件对象，它设置了一个事件对象池【缓存池】- 本次事件触发，获取到事件操作的相关信息，我们从事件对象池中，获取存储的合成事件对象，把信息赋值给相关的成员。
- 等待本次操作结束，把合成事件对象中的成员信息都清空掉，再放入到事件对象池中。
ev.persist()可以把合成事件对象中的信息保留下来。
