CoderPHR-CSDN博客

原创 # Vue3 Diff 算法与key

Vue3 Diff 算法与key先来看看官方的解释key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用Key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；官方的解释对于初学者来说并不好理解，比如下面的问题：什么是新旧nodes，什么是VNode？没有key的时候，如何尝试修改和复用的？有ke

2021-09-04 16:43:32 174

原创 React Diff算法的优化

React Diff算法的优化同层节点之间相互比较，不会垮节点比较；不同类型的节点，产生不同的树结构；开发中，可以通过key来指定哪些节点在不同的渲染下保持稳定；情况一：对比不同类型的元素当节点为不同的元素，React会拆卸原有的树，并且建立起新的树：当一个元素从变成，从变成，或从变成都会触发一个完整的重建流程；当卸载一颗树时，对应的DOM节点也会被销毁，组件实例将执行componentWillUnmount()方法；当建立一颗新的树时，对应的DOM节点会被创建以及插入到DO

2021-09-03 10:18:01 300

原创网站性能优化

网站性能优化Content方面：减少http请求：合并文件、css精灵图、inline image;减少DNS查询：DNS缓存，将资源分布到恰当数量的主机名；减少DOM元素数量；Server方面：使用CDN；配置ETag；对组件使用Gzip压缩；Cookie方面：减少cookie大小；Css方面：将样式表放到页面底部；不适应Css表达式；使用<link>不使用@import;Javascript方面：将脚本放到页面底部；从外部引入；压缩Jav

2021-03-12 12:01:35 85

原创 3.React事件绑定

React事件绑定原生DOM进行事件监听获取DOM元素，添加监听事件；在HTML元素中，直接绑定obclick；React中进行事件绑定：React事件的命名采用小驼峰式（camelCase），而不是纯小写；我们需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行；this绑定问题：在事件执行后，我们可能需要获取当前类的对象中相关的属性，这个时候就需要使用到this。如果我们直接在函数中打印this，会发现它是一个undefinedclass App

2021-01-04 16:54:39 125

原创 this指向

this指向前言 this是JavaScript中的一个关键字，但是又一个相对比较特别的关键字，不像function、var、for、if这些关键字一样，可以很清楚的搞清楚它到底是如何使用的。this会在执行上下文中绑定一个对象，但是是根据什么条件绑定的呢？在不同的执行条件下会绑定不同的对象，这也是让人捉摸不定的地方。这一次，我们一起来彻底搞定this到底是如何绑定的吧！理解this为什么要使用this在常见的编程语言中，几乎都有this这个关键字（Objective-C中使用的是sel

2021-01-03 14:09:20 128

原创 2.React-JSX

JSX核心语法认识JSXconst element = <h2>Hello World</h2>ReactDOM.render(element,document.getElementById('app'));这段element变量的声明右侧赋值的标签语法是什么呢？它不是一段字符串（因为没有使用引号包裹），它看起来是一段HTML原生，但是我们能在js中直接给一个变量赋值HTML吗？其实是不可以的，如果我们将type = "text/babel"去掉，那么就会出现语法错

2021-01-02 17:53:51 98

原创 1.React初体验

React初体验React是什么？官方解释：用于构建用户界面的JavaScript库。我们知道对于前段而言，主要的任务就是构建用户界面，而构建用户界面离不开三个技术：1.HTML：构建页面的结构。2.CSS：构建页面的样式。3.JavaScript：页面动态内容和交互。那么使用原生的HTML、CSS、JavaScript可以构建完整的用户界面吗？当然可以，但是会存在很多问题。1.比如操作DOM兼容性问题。2.比如过多兼容性代码的冗余问题。3.比如代码组织和规范问题。前

2021-01-02 16:10:14 101 1

原创 Javascript执行特点

Javascript执行特点基本的语法检例如单词拼写错误，中文没有注释。。。低级错误形成作用域（对象）的过程预解析（预编译）函数作用域函数在执行前的一瞬间，会生成一个AO(active object 活动对象)对象分析参数，形参作为AO对象的属性名，实参作为AO对象的属性值分析var声明，变量名作为AO对象的属性名，值为undefined，如果遇到同名变量，不会对AO对象做任何修改。分析函数声明，函数名作为AO对象的属性名，值为函数体，如果遇到同名变量，

2020-11-10 23:39:57 171

hh_skytrue的博客