React 事件监听

1 .当写在div上的事件被委托给document之后,监听方法发生了怎样的变化

2 .以一个click事件为例.click事件属于离散事件,优先级较低

3 .离散事件的监听并不会立即执行,而是以一定的优先级进行调度

4 .Fiber 允许一个任务在页面渲染比较繁忙的时候不执行更新，等待浏览器空闲的时候执行。但是这个延后是有限制的，比如对于同步任务，过期时间就是 -1，表示同步任务需要立即执行。对于优先级是 UserBlockingPriority，过期时间是 250，也就是允许最长延期 250ms 执行。这个优先级还是比较高的

5 .事件分为三类:分别是离散事件,用户阻塞事件,连续事件.连续事件不会经过调度,而是直接执行

6 .离散事件和用户阻塞事件执行调度的优先级相同,不同点在于离散事件执行调度q会把之前未执行的事件以同步的方式执行掉.

7 .一个nativeEvent在进入调度,也就是开始执行回调的时候,首先会根据nativeEvent获得事件发生时的目标节点,以及对应的fiber对象.然后根据这些信息去React的事件插件种获得该原生事件对应的sytheticEvent合成事件.一个原生事件可以对应多个合成事件

8 .多个合成事件一次执行dispatchlisteners中存储的监听方法,在每个监听事件中判断事件是否停止传播

9 .事件执行完毕之后,判断用户是否设置额事件持久化,如果没有,重置事件中的属性,放入事件缓存池保存

android 和 iOS 都有在全局设置中固定屏幕方向的办法，但这样不是特别理想，因为项目中，在不同页面可能会需要横屏或竖屏，此时就可以使用 react-native-orientation ，这个扩展可以动态的锁定/解锁屏幕方向，或设置为指定的方向。

安装方式

yarn add react-native-orientation

安装完之后二选一 (这个是 rn 安装原生组件的通用命令)

详情可参考 官方介绍 或 这篇文章

然后继续

android 打开 android/app/src/main/java/com/[project]/MainActivity.java

iOS 打开 ios/[project]/AppDelegate.m

安装完事

使用方法，可直接前往 项目主页 查看，非常简单（其实上面的步骤在项目主页中也有），这里说一个项目主页没提到的

在使用了如 lockToPortrait() 方法锁定屏幕方向后，由 addOrientationListener 添加的监听函数有不同

1、android 上将不会再触发，直到调用 unlockAllOrientations() 解除锁定

2、iOS 则不然，无论屏幕锁定与否，都会触发

需求是这样的，一个聊天窗口，对话框你一句我一句，然后这个对方的回答可能很长，这个时候要检测对方的回答渲染上去后，对应的那条话dom高度有没有超出指定高度，如果超出，就给他多余部分隐藏，并且那条话显示查看更多的按钮，

一开始想的是每一句对话都用各自的ref，然后useEffect每次都去检测ref上的高度，但是其实这样不对，ref如果先绑上了，ref上的属性再变动，是不会触发重新render的也就没法检测到，

看到一个大佬的博客

https://blog.csdn.net/qq_36947128/article/details/104617867?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1

再跳到对应的文档

跟想象中的一样，确实ref上的属性变化了，没法通知到我们。

那是因为ref有两种使用方式，

一种是useRef()

一种是通过回调的方式，比如

这种回调的方式可以在每次属性变化的时候监听到，每次都会触发这个回调函数

这里用了useCallback只是为了节省性能而已

https://react.docschina.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

---