福建建设人才市场官方网站,学校网站风格,实时新闻最新消息,国外做调查问卷的网站文章目录 react的理解react创建组件的三种写法react的工作原理初始化的渲染流程。页面更新的流程。diffing 算法计算更新视图diff策略 react合成事件原理一、React合成事件的概念二、React合成事件的原理三、React合成事件的优势四、React合成事件的使用方法五、总结 react的理… 文章目录 react的理解react创建组件的三种写法react的工作原理初始化的渲染流程。页面更新的流程。diffing 算法计算更新视图diff策略 react合成事件原理一、React合成事件的概念二、React合成事件的原理三、React合成事件的优势四、React合成事件的使用方法五、总结 react的理解
采用声明式渲染函数式编程声明显示内容react自动完成通过虚拟DOM减少与DOM的交互单向数据流从父节点传递到子节点父节点改变子节点重新渲染遵循不可变数据。提高代码的复用率通过react构建组件让代码更容易得到复用react类组件使用render方法或函数式组件return接受输入的数据并返回需要展示的内容代码可读性高可以做劫持渲染shouldcomponentupdate
react创建组件的三种写法
React.createClassReact.Component无状态的函数写法纯组件
react的工作原理
react的响应式理念通过改变函数的data值改变ui。实现一个组件或者功能需要先实现一个函数改变函数的data值来影响ui
初始化的渲染流程。
react用jsx语法写好逻辑。执行 ReactDOM.render 函数渲染出虚拟DOM。react 将虚拟DOM渲染成真实的DOM。
页面更新的流程。
当页面需要更新时通过声明式的方法调用 setState 告诉 react什么数据变了。react 自动调用组件的 render 方法渲染出虚拟 DOM。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在上述代码中我们在按钮元素上绑定了一个点击事件处理函数handleClick。当按钮被点击时控制台将会输出按钮被点击了!。
五、总结
React合成事件是React框架中非常重要的一部分它通过事件委托、事件池和统一化事件处理等机制提供了高效、跨浏览器的事件系统。使用React合成事件可以有效地提高性能简化开发流程并保证事件处理函数在不同浏览器下的致性。因此掌握React合成事件的原理和使用方法对于React开发者来说是非常重要的。 简单说就是react是在原生浏览器的枝上做了一层封装把对应事件做了一次合成最大的好处是合成事件可以匹配不同浏览器之间的差异比如事件委托、事件池、事件合并这些
