react原理及合成事件原理

react的理解

1. 采用声明式渲染，函数式编程，声明显示内容，react自动完成
2. 通过虚拟DOM，减少与DOM的交互
3. 单向数据流，从父节点传递到子节点，父节点改变，子节点重新渲染，遵循不可变数据。
4. 提高代码的复用率，通过react构建组件，让代码更容易得到复用
5. react类组件使用render（）方法或函数式组件return，接受输入的数据并返回需要展示的内容
6. 代码可读性高
7. 可以做劫持渲染（shouldcomponentupdate）

react创建组件的三种写法

1. React.createClass
2. React.Component
3. 无状态的函数写法（纯组件）

react的工作原理

react的响应式理念，通过改变函数的data值，改变ui。实现一个组件或者功能需要先实现一个函数，改变函数的data值，来影响ui

初始化的渲染流程。

• react用jsx语法写好逻辑。
• 执行 ReactDOM.render 函数，渲染出虚拟DOM。
• react 将虚拟DOM，渲染成真实的DOM。

页面更新的流程。

1. 当页面需要更新时，通过声明式的方法，调用 setState 告诉 react什么数据变了。
2. react 自动调用组件的 render 方法，渲染出虚拟 DOM。
3. react 会通过 diffing 算法，对比当前虚拟 DOM 和需要更新的虚拟 DOM 有什么区别。然后重新渲染区别部分的真实 DOM

diffing 算法计算更新视图

render（）调用后视图发生了变化，根据状态和jsx结构生成新的虚拟DOM，同级比较两棵虚拟DOM树的差异，得到差异对象，把差异对象应用到真正的DOM树上。

diff策略

1、tree diff
按照树的层级进行比较，如果该节点不存在，则整个删除，不再继续比较。
如果是跨层级的话，只有创建节点和删除节点的操作
2、component diff
每一层中组件的对比，同一类型的两个组件，按照层级比较虚拟DOM。组件A变化为组件B时，可能虚拟DOM没有任何变化，可以通过shouldComponentUpdata（）来判断是否需要判断计算；不同类型的组件，将一个（将被改变的）组件判断为dirtycomponent（脏组件），从而替换整个组件的所有节点
3、element diff
如果两个组件类型相同，则需要对比组建中的元素。删除，插入，移动节点

同一组件中key的要素
1、通过key保证节点的唯一性，避免了重复渲染。如果key相同，则不需要重新计算并渲染。
2、key值是固定的，一般key值不用数组的下表索引值，当数组发生变化是，索引值会改变。

原文链接：https://blog.csdn.net/Jasmine_jieer/article/details/126404865

react合成事件原理

React是-个流行的JaaScript库，用构建用户界面。它采用了一种特殊的事件处理机制，即React合成事件。本文将详细个绍React合成事件的原理及其重要性。

一、React合成事件的概念

React合成事件是指React通过在浏览器上绑定一系列事件处理函数，来处理用户与界面的交互行为。它的设计目标是提供一种高效、跨浏览器的事件系统，同时也解决了传统原生事件处理中一些常见的问题。

二、React合成事件的原理

1.事件委托:React合成事件利用了事件委托的机制，将事件绑定在顶层的容器上，而不是每个具体的元素上。这样做的好处是减少了事件处理函数的数量，提高了性能
2.事件池: React合成事件使用了事件池的概念。事件池是一个复用的对象池，用于存储事件对象。当事件被触发时React会从事件池中取出一个事件对象，并将相关信息填充到该对象中，然后传递给事件处理函数。事件处理函数执行完毕后，事件对象会被重置并放回事件池中，供下次使用。
3.统一化事件处理: React合成事件封装了原生事件对象，提供了一套统一的AP1，使得事件处理函数在不同浏览器下表现一致。这样开发者无需关心浏览器兼容性的问题，可以更专注于业务逻辑的实现。

三、React合成事件的优势

1.性能优化:由于利用了事件委托和事件池的机制，React合成事件大大减少了事件处理函数的数量，提高了性能。另外，事件池的复用机制也减少了对象的创建和销毁，进一步减少了内存消耗
2.事件处理函数的统一性: React合成事件封装了原生事件对象，并提供了一致的API，使得开发者可以更方便地处理事件。这对于跨浏览器的开发是非常重要的。
3.防上事件冒泡: React合成事件默认会阻止事件冒泡，这在一些场景下非常有用。开发者可以通过调用event.stopPropagation(来手动阻止事件冒泡。

四、React合成事件的使用方法

使用React合成事件非常简单。开发者只需在元素上绑定事件处理函数即可。例如，要为一个按钮添加点击事件处理区数，可以使用以下代码:

import React from 'react!.
class MyButton extends React.Component {
handleClick = (event) => [
console.log(按钮被点击了!;
render() [
return (
<button onClick={this.handleClickI>点击我</button>
1
2
3
4
5
6
7
8

在上述代码中，我们在按钮元素上绑定了一个点击事件处理函数handleClick。当按钮被点击时，控制台将会输出"按钮被点击了!"。

五、总结

React合成事件是React框架中非常重要的一部分，它通过事件委托、事件池和统一化事件处理等机制，提供了高效、跨浏览器的事件系统。使用React合成事件可以有效地提高性能，简化开发流程，并保证事件处理函数在不同浏览器下的致性。因此，掌握React合成事件的原理和使用方法对于React开发者来说是非常重要的。

简单说就是：react是在原生浏览器的枝上做了一层封装，把对应事件做了一次合成，最大的好处是合成事件可以匹配不同浏览器之间的差异，比如事件委托、事件池、事件合并这些