ref setState 合成事件
ref & setState & 合成事件
受控组件的概念：数据改变视图的叫受控组件；通过dom操作改变的叫非受控。
语法：给ref=xxx赋一个值，然后通过this.refs.xxx就可以获取到相应dom元素，通过你这个名字存储的值就是这个dom元素。
5个值
props context refs updater state
通过ref获取到这个dom元素，然后把创建的dom元素赋给它this.refs.xxx。
ref的3种语法格式：
当给类组件设置ref，ref是子组件实例
当是函数组件，使用React.forwardRef，能够获取子组件内部的dom元素。
setState进阶
回调：
- 会在DidUpdate之后执行。若状态/视图更新
- 状态未更新，也会执行
- 同vue中的$nextTick
底层处理机制
批处理机制，异步更新队列
把当前上下文 & 同步代码执行完，setState加入队列中。
会把某一时间的一起批处理。如果都在定时器里面那就涉及到定时器的误差
vue：全局 & 局部
react：函数组件、类组件、hooks组件
16和18的区别
*flushSync
*setState题目 & 第一个参数为函数
第一个参数是函数
合成事件
概念
react基础语法视图层&类组件
es6 class语法：
- 用=号的才是私有属性。
- 其他的都是挂在原型上
- 但是static与实例无关，为静态成员
class中的this：
class语法中箭头函数中的this始终是实例，不会因为调用方式而改变。
但是class中定义的其他普通函数，若通过实例.调用this是当前类的实例，若单独提取调用，this可能丢失。
class A{
run(){
// 原型上
console.log('run',this)
}
play=()=>{
// 私有属性
console.log('play',this)
console.log(typeof this)
}
render(){
console.log('render',this)
window.setInterval(this.run, 1000)
window.setInterval(this.play,2000)
}
}
const a = new A
a.render()
合成事件原理：是用事件委托处理的，把函数拿到把函数执行，没有执行主体。
合成事件对象。统一各浏览器的兼容行为
- 常用的属性和方法
- nativeEvent 原生事件对象
render是周期函数，内部执行底层代码实现一定是实例调用，所以其中this是当前类实例。
事件委托
事件是默认的行为，这个行为只要被触发了这个动作只要有了，这个事件行为就已经被触发了。
stopPropagation阻止事件传播，包括捕获。
stopImmediatePropagation 会把同级的，排在后面还未执行的，都不再执行了。
事件委托的优势：
底层原理
合成事件都是基于事件委托处理的。
先内置的，再mount钩子里绑定的。
以下代码执行顺序：
关于冒泡
对比16版本原理：
16和18的区别：
- 渲染，16 reactdom.render，18 先创建root，然后再root.render;
- setState 18都是异步，而16中除了合成事件和周期函数异步，定时器、手动原生事件绑定同步；
- 合成事件委托给root，捕获和冒泡阶段做了，16 委托到document上，只做了冒泡阶段，并且是 onXXX和onXXXCapture一起执行。
- 合成事件对象的区别，16中事件池。
放回去之前，会把所有信息都清空。再放回去。
细节知识点
click在移动端的300ms延迟
touch事件
循环事件绑定
VUE不一样，给当前元素做的事件绑定。