2.不同类型的元素会产生出不同的树。如果元素由div变为p，React会销毁div及其子孙节点，并新建p及其子孙节点。 3.者可以通过 key prop来暗示哪些子元素在不同的渲染下能保持稳定。...既然我们的目标是寻找移动的节点，那么我们需要明确：节点是否移动是以什么为参照物？我们的参照物是：最后一个可复用的节点在oldFiber中的位置索引（用变量lastPlacedIndex表示）。...我们用变量oldIndex表示遍历到的可复用节点在oldFiber中的位置索引。如果oldIndex 的目标是寻找移动的节点，那么我们需要明确：节点是否移动是以什么为参照物？我们的参照物是：最后一个可复用的节点在oldFiber中的位置索引（用变量lastPlacedIndex表示）。...我们用变量oldIndex表示遍历到的可复用节点在oldFiber中的位置索引。如果oldIndex < lastPlacedIndex，代表本次更新该节点需要向右移动。
即ClassComponent的render方法的返回结果，或者FunctionComponent的调用结果，JSX对象中包含描述DOM节点信息。 diff算法的本质上是对比1和4，生成2。...2.不同类型的元素会产生出不同的树。如果元素由div变为p，React会销毁div及其子孙节点，并新建p及其子孙节点。 3.者可以通过 key prop来暗示哪些子元素在不同的渲染下能保持稳定。...改变了位置就需要我们处理移动的节点 由于有节点改变了位置，所以不能再用位置索引i对比前后的节点，那么如何才能将同一个节点在两次更新中对应上呢？ 我们需要使用key。...既然我们的目标是寻找移动的节点，那么我们需要明确：节点是否移动是以什么为参照物？ 我们的参照物是：最后一个可复用的节点在oldFiber中的位置索引（用变量lastPlacedIndex表示）。...我们用变量oldIndex表示遍历到的可复用节点在oldFiber中的位置索引。 如果oldIndex < lastPlacedIndex，代表本次更新该节点需要向右移动。
即ClassComponent的render方法的返回结果，或者FunctionComponent的调用结果，JSX对象中包含描述DOM节点信息。diff算法的本质上是对比1和4，生成2。...2.不同类型的元素会产生出不同的树。如果元素由div变为p，React会销毁div及其子孙节点，并新建p及其子孙节点。 3.者可以通过 key prop来暗示哪些子元素在不同的渲染下能保持稳定。...改变了位置就需要我们处理移动的节点由于有节点改变了位置，所以不能再用位置索引i对比前后的节点，那么如何才能将同一个节点在两次更新中对应上呢？我们需要使用key。...既然我们的目标是寻找移动的节点，那么我们需要明确：节点是否移动是以什么为参照物？我们的参照物是：最后一个可复用的节点在oldFiber中的位置索引（用变量lastPlacedIndex表示）。...我们用变量oldIndex表示遍历到的可复用节点在oldFiber中的位置索引。如果oldIndex < lastPlacedIndex，代表本次更新该节点需要向右移动。
index处插入 返回的是被删除掉的元素的集合，会改变原有数组；截取类 没有参数，返回空数组，原数组不变；一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的 数组，原数组改变；两个参数，第一个参数表示开始截取的索引位...如果只传入一个参数，会从头部开始删除，直到数组结束，原数组不会改变；传入两个参数，第一个是开始截取的索引，第二个是结束截取的索引，不包含结束截取的这一项，原数组不会改变。最多可以接受两个参数。...的值相对于从尾部开始的索引 5、split( )：返回一个以指定分隔符出现位置分隔而成的一个数组，数组元素不包含分隔符 6、substr( )：从起始索引号提取字符串中指定数目的字符； 7、substring...diff算法 diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法，会找到不同地方，只去渲染不同的地方，总的来说就是减少...如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
直接看代码 两种方式绑定事件并传参数 第一种: constructor(props) { super(props); //在dom上用bind函数绑定了this,这里可以省略...this.handleClick(this.state.time, e)}}>handle 二、条件渲染 直接看代码 render() { let button = null; //1.可以根据变量的不同选择不同的渲染...当子节点有key时，React使用key来匹配原本树的子节点和新树的子节点。因此你应当给数组中的每一个元素赋予。 万不得已，你可以传递他们在数组中的索引作为key。...若元素没有重排，该方法效果不错，但重排会使得其变慢。当索引用作key时，组件状态在重新排序时也会有问题。 组件实例基于key进行更新和重用。如果key是索引，则item的顺序变化会改变key值。...这将导致非受控组件的状态可能会以意想不到的方式混淆和更新。 Keys应该是稳定的，可预测的，且唯一的。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。不包含结束的索引 split() 把字符串分割为字符串数组。 substr() 从起始索引号提取字符串中指定数目的字符。...//不改变原数组方法: var arr = [] arr.includes(); // 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。...压缩css、js文件 合并js、css文件，减少http请求 外部js、css文件放在最底下 减少dom操作，尽可能用变量替代不必要的dom操作 12.简单数据类型和复杂数据类型 简单类型（基本数据类型...getElementsByClassName() //通过元素的class属性的值 getElementById() //通过元素Id，唯一性 14.DOM 事件流是什么?...可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。...i是当前dom对象在选择器返回数组中的索引。 }); 1.2 获取元素的个数 两种方法可以获取选择器匹配的元素的个数。...dom对象的集合 get(index) $('p').get(1); 返回第2个dom对象，索引从0开始 toArray() $('p').toArray(); 把jQuery集合中所有DOM元素恢复成一个数组...不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。...要去除重复项，请使用$.unique() 参数 first:第一个待处理数组，会改变其中的元素。 second:第二个待处理数组，不会改变其中的元素。
Vue做事的步骤： - 定义界面：界面元素包含在一个统一的父元素下，使用绑定语法（如{{变量名}}、:、v-show）代替可能发生变化的地方。...当收到变量改变的通知时 • vue会快速遍历虚拟DOM树，找到受影响的元素，调用已经封装好的DOM函数，只更新页面中受影响的元素。不受影响的元素，不会改变 为什么: • 1....创建自定义指令Vue.directive('指令名', { inserted( el ){ //当元素被加载到DOM树时触发 //el 可自动获得当前写有指令的这个DOM元素对象 //函数中，可对这个写有指令的...：是页面中的一块独立的，可重用的区域HTML中, 是一个可复用的用户自定义的扩展标签，运行时，被替换为组件对象内的HTML模板内容JS中，是一个可复用的Vue实例，包含独立的HTML模板，模型数据和功能何时...— $el: DOM, data: { … } ——可ajax请求数据，也可操作页面元素 beforeUpdate(){ } • 组件中模型数据发生改变需要更新DOM之前调用 updated(){
，不是按照数字大小排序的 arr.reverse() 将数组反转,返回值是反转后的数组 arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组...4、 :even 描述：选取索引是偶数的所有元素，索引从0开始，返回元素集合 5、 :odd 描述：选取索引是奇数的所有元素，索引从0开始，返回元素集合 6、 :eq(index) 描述：选取索引等于...MVVM框架，vue的核心只关注视图层， 核心思想： 数据驱动（视图的内容随着数据的改变而改变） 组件化（可以增加代码的复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚低耦合）...是mvvm模式 虚拟dom不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个dom组件树，而react不同，当应用的状态被改变时，全部组件都会重新渲染，所以react中用shouldcomponentupdate...频繁的操作DOM，或大量造成页面的重绘和回流 Diff算法：把树形结构按照层级分解，只比较同级元素，给列表结构的每个单元添加唯一的key值，方便比较 你对组件的理解 可组合，可复用，可维护，可测试 调用
dom 结构渲染可以用分片思想解决 如果是复杂的 dom 结构渲染如何处理？...执行环境只会改变this、传递的参数、全局变量等为什么需要清除浮动？清除浮动的方式浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。...浮动的工作原理：浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）浮动元素碰到包含它的边框或者其他浮动元素的边框停留浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。...脱离 DOM 的引用： 获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。闭包： 不合理的使用闭包，从而导致某些变量一直被留在内存当中。...filter() 否 数组方法，过滤数组，返回包含符合条件的元素的数组，可链式调用
return 按钮 }何为纯函数(pure function)一个纯函数是一个不依赖于且不改变其作用域之外的变量状态的函数...Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或碎片。...具体的流程如下：真实的 DOM 首先会映射为虚拟 DOM；当虚拟 DOM 发生变化后，就会根据差距计算生成 patch，这个 patch 是一个结构化的数据，内容包含了增加、更新、移除等；根据 patch...策略三：同一层级的子节点，可以通过标记 key 的方式进行列表对比。（基于节点进行对比）元素比对主要发生在同层级中，通过标记节点操作生成补丁。节点操作包含了插入、移动、删除等。...如果用索引值作为key 会出现什么样的问题若对数据进行逆序添加，逆序删除等破坏顺序的操作 则会产生没有必要的真实DOM更新，界面想过看不出区别，但是效力低，性能不好如果结构中还包含输入类的DOM 会产生错误的
3、脱离 DOM 的引用：获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。4、闭包：不合理的使用闭包，从而导致某些变量一直被留在内存当中。...标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：标准盒模型的width和height属性的范围只包含了content，IE盒模型的width和height属性的范围包含了...常见的类数组对象有 arguments 和 DOM 方法的返回结果，还有一个函数也可以被看作是类数组对象，因为它含有 length 属性值，代表可接收的参数个数。...>VDOM：三个 part虚拟节点类，将真实 DOM节点用 js 对象的形式进行展示，并提供 render 方法，将虚拟节点渲染成真实 DOM节点 diff 比较：对虚拟节点进行 js 层面的计算，并将不同的操作都记录到...性能受场景的影响是非常大的，不同的场景可能造成不同实现方案之间成倍的性能差距，所以依赖细粒度绑定及 Virtual DOM 哪个的性能更好还真不是一个容易下定论的问题。
在js中变量和函数的声明会提升到最顶部执行 函数的提升高于变量的提升 函数内部如果用 var 声明了相同名称的外部变量，函数将不再向上寻找。...作用域链可以理解为一组对象列表，包含 父级和自身的变量对象， 因此我们便能通过作用域链访问到父级里声明的变量或者函数 25、什么是原型、原型链、继承？...添加或者删除可见的 DOM 元素的时候 元素的位置发生改变 元素的尺寸发生改变 内容改变 页面第一次渲染的时候 什么时候会进行重绘？...可提图片高可访问性， 除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。 行内元素和块级元素有哪些？...它们有助于在不同的文件中单独编写组件 15、什么是高阶组件 HOC? 高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。...i是当前dom对象在选择器返回数组中的索引。 }); 1.2 获取元素的个数 两种方法可以获取选择器匹配的元素的个数。...dom对象的集合 get(index) $('p').get(1); 返回第2个dom对象，索引从0开始 toArray() $('p').toArray(); 把jQuery集合中所有DOM元素恢复成一个数组...不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。...要去除重复项，请使用$.unique() 参数 first:第一个待处理数组，会改变其中的元素。 second:第二个待处理数组，不会改变其中的元素。 示例 // 合并两个数组到第一个数组上。
.当这些属性的值发生改变时,视图将会产生响应,即匹配更新为新的值.vue的设计就相当于替代jquery.让程序员只关心数据,不再关心过程是怎样操作dom的 模板语法 插值表达式 {{msg}}输入纯str...幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。... 来循环渲染一段包含多个元素的内容。...DOM 元素外。...其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。
ES6 规范中，比较重大的变化有以下几个方面： 新增 let、const 命令 来声明变量，和var 相比，let 声明的变量不存在变量提升问题，但没有改变JS弱类型的特点，依然可以接受任意类型变量的声明...；const 声明的变量不允许在后续逻辑中改变，提高了JS语法的严谨性。...BOM的核心对象就是window，window 对象也是BOM的顶级对象，其中包含了浏览器的 6个核心模块： document - 即文档对象，渲染引擎在解析HTML代码时，会为每一个元素生成对应的DOM...同时也对DOM 1的核心进行了扩展，从而可支持XML命名空间。...3级DOM - 通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML Infoset
语法：Object.values(obj) 参数：obj：要返回其可枚举自身属性值的对象。返回值：包含给定对象自己的可枚举属性值的数组。...向数组的指定index处插入 返回的是被删除掉的元素的集合，会改变原有数组；截取类 没有参数，返回空数组，原数组不变；一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的 数组，原数组改变；...如果只传入一个参数，会从头部开始删除，直到数组结束，原数组不会改变；传入两个参数，第一个是开始截取的索引，第二个是结束截取的索引，不包含结束截取的这一项，原数组不会改变。最多可以接受两个参数。...) 返回从字符串尾部开始第一次出现的索引，没有则-1，fromIndex的值相对于从尾部开始的索引 5、split( )：返回一个以指定分隔符出现位置分隔而成的一个数组，数组元素不包含分隔符 6...③网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
我们向它发送了一个用 React API 描述的对象树。React 使用这些对象生成显示所需 DOM 树的操作。...React 元素不是你在浏览器中看到的，它们只是内存中的对象，你无法改变它们。React 在内部创建、更新和销毁对象，以找出需要渲染在浏览器的 DOM 元素树。...= ({ href, src }) => { return ( );};拥有 href 和 src 属性的变量是使该组件可重用的原因...我们可以将 HTML 元素视为浏览器中的内置组件。我们也可以使用自己的自定义组件来组成更大的组件。例如，让我们编写一个显示搜索引擎列表的组件。...我们还可以 SearchEngines 通过将数据提取到变量中并将其设计为使用该变量来使组件可重用。
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
