React事件对象

1 SyntheticEvent说到底是用来模拟原生事件的,如果我们自己实现一个事件来模拟原生事件我们需要模拟什么

1 dispatchConfig

2 事件公用属性定义

1 oEventstopImmediatePropagation();//Immediate[ɪˈmi:diət] //当一个元素绑定多个事件处理程序的时候，事件会按照顺序全部执行，如果不想让后面的事件处理程序执行，就在当前事件里加这个方法，就不执行后面的事件处理程序了

2 oEventpreventDefault();（在ie低版本中用oEventreturnValue=true）//阻止事件的默认行为，比如阻止a的href链接。在智能设讲用return false。

2 eventPhase

3 bubbles:返回一个布尔值,表示当前事件是否会向DOM树上层元素冒泡

4 cancel:表示改事件是否能被取消

5 composed:表示是否可以穿过Shadow DOM和常规DOM之间的元素进行冒泡

6 deepPath:一个由事件流所经过的DOM节点组成的数组

7 defaultPrevented:一个布尔值,表示eventpreventdefault方法是否取消了事件的默认行为

8 timeStamp:事件创建的时间戳

1 插件对事件做分类,不同类型的事件的属性也不同

2 主要有以下几种

3 SyntheticMouseEvent 就是 SyntheticEvent 的一个派生类，由 ReactDOM 实现。鼠标事件

1 SyntheticEvent 中有 preventDefault，stopPropagation，persist，isPersistent，destructor

2 preventDefault

2 stopPropagation:同样调用了原生事件的 stopPropagation 方法。大家可能发现了，此时事件已经冒泡到 Document 对象上了，调用原生事件的 stopPropagation 已经太晚了，这么做的目的是改变原生事件对象中的一些属性的值，保持两个事件属性值的统一。 同样，使用了 eventcancelBubble = true 的方式来兼容 IE

3 persist:这个现在已经无效了React 17之后不在使用事件池了

4 dectructor:销毁事件属性,将事件的属性置为初始值

1 React之前将所有的事件都绑定到了document,实际上的React是没有层级的,这样破坏了事件的捕获和冒泡机制

2 实现原理:具体的做法是，inst 是触发事件的 fiber 对象，从这个 fiber 对象开始，一路向上，直到找到 HostComponent，这样就找到了事件传播的整条路径，然后从根节点自上而下触发 captured，之后自下而上触发 bubbled

1 SytheticEvent本质上是对nativeEvent的一次封装目的是为了达到与nativeEvent相同甚至更好的体验基础保留进一步扩展的可能性,最终实现事件的跨平台

2 SyntheticEvent 采用派生的方式，将事件具体的属性交由 SyntheticEvent 的子类来实现，自己只维护事件必须的字段

3 为了避免 SyntheticEvent 对象频繁创建，更好的利用内存资源，提高性能，SyntheticEvent 会将事件对象缓存起来，最大缓存个数是 10

4

1 ES6 Class写法中箭头函数可以不用单独的使用bind方式来绑定this,可以自动绑定

2 useRefcurrentaddEventListener('click')这样来绑定

3 尽量避免在React中混用合成事件和原生事件DOM事件另外用reactEventnativeEventstopPropagation()来组织冒泡是不行的阻止React冒泡的行为只能用React合成事件系统中而且没办法阻止原生事件的冒泡

4 相反,原生事件中的阻止冒泡行为,却可以阻止React合成事件的传播

5 原理:react的合成事件系统仅仅是原生DOM事件系统的一个子集仅仅实现了DOM level3的事件接口,统一了浏览器的兼容问题

thisprops 对象的属性与组件的属性一一对应，但是有一个例外，就是 thispropschildren 属性。它表示组件的所有子节点

var NotesList = ReactcreateClass({render: function() {return (<ol>{ReactChildrenmap(thispropschildren, function (child) {return <li>{child}</li>;})}</ol>);}});ReactDOMrender(<NotesList><span>hello</span><span>world</span></NotesList>,documentbody);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 thispropschildren 读取，运行结果如下。

hello

world

这里需要注意， thispropschildren 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 thispropschildren 的时候要小心。 

React 提供一个工具方法 ReactChildren 来处理 thispropschildren 。我们可以用 ReactChildrenmap 来遍历子节点，而不用担心 thispropschildren 的数据类型是 undefined 还是 object。

在React Native中如何让视图对触发做出合适的响应

一：TouchableOpacity

该组件封装了响应触摸事件；当点击按下的时候，该组件的透明度会降低。

常用属性：

activeOpacitynumber

设置当用户触摸的时候，组件的透明度

二：DOM节点对象的获取

三： 触摸事件

onPressIn：点击开始；

onPressOut：点击结束或者离开；

onPress：单击事件回调；

onLongPress：长按事件回调。

用例：

React 虚拟DOM：

一个DOM需要数据+模板组合生成，state或props中数据状态变化时，render函数会重新执行即刷新当前DOM，更新页面显示。

第一种是原始的DOM替换，用新的DOM替换旧的DOM，DOM替换或生成都会消耗大量性能。

第二种只替换对比时不同的DOM片段，降低了DOM替换时的性能，但增加了新旧DOM对比这一步骤，性能提升不明显。

第三种

生成真实DOM来显示的同时也生成了一个虚拟DOM，这里虚拟DOM本质即为js对象，用以描述DOM结构。

组成部分为：标签名字，标签属性的集合对象，标签中的元素内容。因div中嵌套span所以这里显示为多层数组。

在虚拟DOM对比时(本质为js对象的对比)消耗了很少的性能，对上面两种方案来说这种提升了极大性能。

优点：

因为DOM节点在安卓ios端无法识别，只能在浏览器识别，但是虚拟DOM可以被识别，生成原生的应用组件，可以在原生应用上显示。

React的Diff算法：

在调用setState方法改变state中的数据状态时，会产生虚拟DOM，为了页面更新提升性能当前的虚拟DOM与旧虚拟DOM发生比较，此时使用了Diff算法。

如果改变state数据次数多频率很高，时间间隔相近，为了提升性能，setState就采用异步的方式，一次性改变状态。

Diff算法比对：

React的虚拟DOM采用的同层比对的方法，对比两个虚拟DOM的每一层，如果遇到不同的情况则下面的层不再进行比对，从最新虚拟DOM的不同的那一层开始，覆盖旧的虚拟DOM，进行替换。

key 循环中的key值比对，比对的是key和value之间的映射关系。

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOMrender()返回的组件实例；

ref 可以挂载到组件上也可以是dom元素上；

Q：ref属性可以设置为一个回调函数

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。

Q：当给组件、H5标签添加 ref 属性后，此实例只能在当前组件中被访问到，父组件的 refs 中是没有此引用的，例如：

Q：获取ref引用组件对应的dom节点

不管ref设置值是回调函数还是字符串，都可以通过ReactDOMfindDOMNode(ref)来获取组件挂载后真正的dom节点。

但是对于html元素使用ref的情况，ref本身引用的就是该元素的实际dom节点，无需使用ReactDOMfindDOMNode(ref)来获取，该方法常用于React组件上的ref。

Q： thisrefs 和 ReactDOMfindDOMNode 的区别

Q：新版本的React已经不推荐我们使用ref string转而使用ref callback

以上就是关于React事件对象全部的内容，包括:React事件对象、react 获取this.props.children 的对象实例、ReactNative之Event(事件)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！