前言 大家好，我是林三心，在日常面试中，Diff算法都是绕不过去的一道坎，用最通俗的话，讲最难的知识点一直是我写文章的宗旨，今天我就用通俗的方式来讲解一下Diff算法吧？Lets Go 什么是虚拟DO

从代码可以看出，React通过先判断key是否相同，如果key相同则判断type是否相同，只有都相同时一个DOM节点才能复用。 由于本次更新时只有一个p，属于单一节点的Diff，会走上面介绍的代码逻辑。 同级多个节点的Diff，一定属于下面3中情况的一种或多种。 带着第一轮遍历…

有面向对象设计经验的程序员第一反应肯定是设计一个拥有统计组件点击次数方法的父类，然后任意的组件类再去继承这个父类。 但是在React生态中，我们推荐使用组合的方式来代替继承实现组件之间的逻辑复用。接下来，我将通过高阶组件（high order component）、render…

最近在研究vue的源码，打算自己着手实现一些简单的功能，加深一下对框架的了解，于是准备实现一个简单的vue-router。 先用vue-cli创建一个包含vue-router的demo，然后把项目引入的vue-router注释掉，改成自己写的js。 Vue Router默认使用…

web应用采用b/s架构，http作为通信协议。http是无状态协议，浏览器的每一次请求，服务器会独立处理， 既然http协议无状态，服务器和浏览器之间通过会话机制来将多次请求进行关联。浏览器第一次请求服务器，服务器创建一个会话，并将会话的id作为响应的一部分发送给浏览器，浏览…

这是我第一次尝试将项目启动过程的思考及实践通过文字比较完整的记录下来，记录得过程也是一波三折，因为许多技术点都是新的尝试，例如Nextjs、 recoil、react-query等，在写下来之前需要先了解并知道为何选择它、熟悉它并完成基础的集成工作，然后才能兼顾理论和可实操性。…

本篇内容将会探究 React 中的虚拟 DOM 和 diff 算法，明白大致原理，并了解如何简单实现 虚拟 DOM 树。 为什么需要虚拟 DOM（Virtual DOM）呢？我们先来看看真实的 DOM 的问题。 列表中的数据依次是 1，2，3。现在需要把数据替换成 4、5、6、…

这一年注定是不平凡的一年，经历了疫情在家两个月封城。刚好 hooks 出来了，学习了一下，发现真香，根本停不下来，分享一下用了将近一年的心得，在 2020 年最后一天上了末班车 useState 返回值为一个数组，数组的第一个参数为我们需要使用的 state，第二个参数为一个 …

1. Vue2的局限性 2. 如何使用CompositionAPI解决问题 最佳的解决方法是将逻辑聚合就可以很好的代码可读性。 这就是我们的CompositionAPI语法能够实现的功能。CompositionAPI是一个完全可选的语法与原来的OptionAPI并没有冲突之处。…