学习记录-react篇

React18有哪些更新

• 并发模式
• 更新render API
• 自动批处理
• suspense支持ssr
• startTransition
• useTransition
• useId
• 提供给第三方库的hook

jsx是什么，它和js的区别

jsx是js语法的扩展，它允许编写类似于HTML的代码。它可以编译为常规的js函数带哦用，从而为创建组件标记提供了一中更好的方法。

简述React的生命周期

React的生命周期主要分为三个阶段：挂载（Mounting） 、更新（Updating） 、卸载（Unmounting） 。

React事件机制和原生DOM事件流有什么区别

1. 绑定方式

   • 原生DOM事件：在原生DOM中，事件是直接绑定到每个DOM元素上的。每当你在DOM元素上使用addEventListener方法时，事件会被绑定到该元素上。
   • React事件机制：react使用事件委托的方式处理事件。所有的事件处理函数都绑定到document或根元素（如root）上，而不是每个DOM元素。React会在一个通用的事件处理器上捕获所有事件，并根据事件目标（target）来判断并执行相应的回调。并且react在事件传播时会利用'合成事件'机制来确保不同浏览器下的事件表现一致。

2. 事件委托VS直接绑定

   • 原生DOM事件：
     • 原生DOM事件需要为每个DOM元素单独绑定事件。这可能会导致性能问题，特别是在页面包含大量元素时。
     • 事件捕获：事件在触发时会一次从目标元素向上冒泡到父元素，直到根元素。也可以选择使用事件捕获（捕获阶段），即事件从根元素到目标元素的过程。
   • react事件机制：
     • react利用了事件委托机制，所有事件处理器都被委托到顶层的document或root节点，这样就避免了为每个DOM元素单独绑定事件的开销。
     • react的事件处理是在合成事件系统中完成的，它模拟了DOM事件流（捕获、目标、冒泡），但在内部进行优化，避免了直接操作DOM。
     • 事件委托使react具有更好的性能，因为它避免了每个组件单独绑定事件。

3. 事件对象

   • 原生DOM事件：
     • 原生DOM事件对象直接访问浏览器提供的事件对象，包含关于事件的详细信息，如event.target，event.currentTarge等
   • react事件机制：
     • react使用合成事件。这是一个跨浏览器的封装对象，模拟了原生DOM事件对象的行为。合成事件提供了于原生DOM事件相同的API,但具有额外的性能优化。它会自动池化，并在事件回调后回收。
     • 池化意味着合成事件在事件处理后被充值，不再可以访问其属性，为了避免这个问题。react提供了event.persist（）方法，可以手动保留事件对象。

4. 事件流

   • 原生DOM事件：

     • 原生DOM事件遵循事件流的三个阶段：捕获阶段（Capture） 、目标阶段（Target） 和 冒泡阶段（Bubble） 。

       1. 捕获阶段：事件从根元素向下传递到目标元素。
       2. 目标阶段：事件到达目标元素并触发。
       3. 冒泡阶段：事件从目标元素向上传递回根元素。

   • react事件机制：

     • React 的事件系统模拟了原生 DOM 的事件流，但它默认使用冒泡阶段 来处理事件（捕获阶段也可以通过 onClickCapture 来触发）。React 会在事件传播到目标元素时触发事件处理程序。

     • 你无法在 React 中通过参数直接设置事件是捕获还是冒泡，但你可以使用 onClickCapture 来模拟捕获阶段的事件处理：

5. 性能优化

   • 原生 DOM 事件：
     • 每个元素的事件绑定会产生一定的性能开销，尤其是在有很多元素时，事件监听会被附加到每个元素上。
   • React 事件机制：
     • 由于事件委托机制，React 将事件绑定到根元素上，这大大减少了内存的消耗和性能开销。React 的事件系统通过事件池化和事件委托来优化性能。

6. 事件类型支持

   • 原生 DOM 事件
     • 原生 DOM 事件种类繁多，通常根据浏览器的实现而有所不同。
   • React 事件机制
     • React 使用统一的合成事件系统，这使得 React 在不同浏览器中具有一致的行为，避免了浏览器兼容性问题。

Redux工作原理