YuLong的博客

文章目录设计模式工厂模式简单工厂抽象工厂单例模式装饰器模式代理模式设计模式设计模式： 设计模式是解决某个特定场景下对某种问题的解决方案。因此，当我们遇到合适的场景时，可能会条件反射一样自然而然想到符合这种场景的设计模式。为什么要学习设计模式:设计模式来源众多专家的经验和智慧，它们是从许多优秀的软件系统中总结出的成功的、能够实现可维护性、复用的设计方案，使用这些方案将可以让我们避免做一些重复性的工作。设计模式提供了一套通用的设计词汇和一种通用的形式来方便开发人员之间沟通和交流，使得设计方案更加通俗

文章目录Hookshooks与fiber（workInProgress）状态派发——useState（useReducer）原理处理副作用——useEffect（useLayoutEffect）原理状态获取与缓存——useRef（useMemo）原理总结Hooks可参考之前文章：React Hooks详解Hooks 出现没有Hooks时，函数组件能够做的只是接受 Props、渲染 UI ，以及触发父组件传过来的事件。有的处理逻辑都要在类组件中写，这样会使 class 类组件内部错综复杂，每一个

文章目录ContextContext 相关用法Context 原理总结ContextReact提供了 Context 上下文模式，为了解决 props 每层都需要传递的问题，即Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。注意：提供者一定要是消费者的某一层父级Context 相关用法v16.3.0后，context api 正式发布用 createContext 创建出一个 context 上下文对象，context 对象提供两个组件，Provi

文章目录FiberFiber 更新机制FiberReactv15及之前，React 对于虚拟 DOM 是采用 递归方式 遍历更新的，一次更新，从应用根部递归更新，递归开始后中途无法终端，随着项目复杂，层级变深，导致更新时间变成，给前端交互上的体验就卡顿。Fiber 诞生在 Reactv16 版本，Fiber 架构目的就是解决大型 React 应用卡顿，fiber 在 React 中是最小粒度的执行单元，在遍历更新每一个节点的时候都不是用的真实 DOM ，都是采用虚拟 DOM ，所以可以 理解成 f

文章目录异步调度时间分片异步调度原理总结异步调度问题：由于对于大型的 React 应用，会存在一次更新，递归遍历大量的虚拟 DOM ，造成占用 js 线程，使得浏览器没有时间去做一些动画效果，伴随项目越来越大，项目会越来越卡。对比Vue：Vue 有这 template 模版收集依赖的过程，轻松构建响应式，使得在一次更新中，Vue 能够迅速响应，找到需要更新的范围，然后以组件粒度更新组件，渲染视图。React 中，一次更新 React 无法知道此次更新的波及范围，所以 React 选择从根节点开

文章目录事件系统事件处理事件合成事件绑定事件触发总结事件系统问：React 为什么要写出一套自己的事件系统呢？答：1、首先，对于不同的浏览器，对事件存在不同的兼容性，React 想实现一个兼容全浏览器的框架， 为了实现这个目标就需要创建一个兼容全浏览器的事件系统。2、其次，v17 之前 React 事件都是绑定在 document 上，v17 之后 React 把事件绑定在应用对应的 容器 container 上，将事件绑定在同一容器统一管理，防止很多事件直接绑定在原生的 DOM 元素上，造成

文章目录JSXReact.createElementfiber类型总结JSXReact.createElementJSX元素节点会被babel编译成 React Element 形式React.createElement( type, [props], [...children] )第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props 。其他参

文章目录props chidren模式操作 propsprops 是 React 组件通信最重要的手段props：对于在 React 应用中写的子组件，父组件绑定在它们标签里的 属性和方法，最终会变成 props 传递给它们。1）props 可以是：① props 作为一个子组件渲染数据源。② props 作为一个通知父组件的回调函数。③ props 作为一个单纯的组件传递。④ props 作为渲染函数。⑤ render props ， 和④的区别是放在了 children 属性上。⑥

文章目录setState：React 项目中 UI 的改变来源于 state 改变，类组件中 setState 是更新组件，渲染视图的主要方式。用法：setState(obj,callback)第一个参数：当 obj 是一个对象，则为即将合并的 state当 obj 是一个函数，那么当前组件的 state 和 props 将作为参数，返回值用于合并新的 state第二个参数 callback ：callback 为一个函数，函数执行上下文中可以获取当前 setState 更新后的最新

文章目录归并排序快速排序分治算法：“分治”，分而治之。其思想就是将一个大问题分解为若干个子问题，针对子问题分别求解后，再将子问题的解整合为大问题的解。利用分治思想解决问题，一般分三步走：分解子问题求解每个子问题合并子问题的解，得出大问题的解归并排序思路分析：归并排序是对分治思想的典型应用，它按照如下的思路对分治思想“三步走”的框架进行了填充：分解子问题：将需要被排序的数组从中间分割为两半，然后再将分割出来的每个子数组各分割为两半，重复以上操作，直到单个子数组只有一个元素为止。求解

文章目录插槽插槽作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。分类：默认插槽、具名插槽、作用域插槽使用方式：默认插槽：父组件中： <Category> <div>html结构1</div> </Category>子组件中： <template> <

文章目录路由基本使用多级路由命名路由路由的参数query参数params参数路由其它props配置replace属性编程式路由导航缓存路由组件两个新的生命周期钩子路由守卫路由器的两种工作模式路由一个路由（route）就是一组 映射关系（key - value），多个路由需要 路由器（router） 进行管理。前端路由：key是路径，value是组件基本使用安装vue-router，命令：npm i vue-router应用插件：Vue.use(VueRouter)编写router配

文章目录TodoList案例Vue TodoList案例、组件通信方式、webStorage、插槽（3种）

文章目录模块与组件、模块化与组件化非单文件组件单文件组件模块与组件、模块化与组件化模块：理解: 向外提供特定功能的 js 程序，一般就是一个 js 文件为什么: js 文件很多很复杂作用: 复用 js，简化 js的编写，提高 js 运行效率组件：理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)为什么: 一个界面的功能很复杂作用: 复用编码，简化项目编码，提高运行效率模块化：当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应

文章目录Vue脚手架ref属性props配置项Vue脚手架ref属性props配置项

文章目录生命周期生命周期生命周期（Life Cycle）：是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。生命周期函数中的 this指向是 vm 或 组件实例对象。注意：生命周期强调的是时间段，生命周期函数强调的是时间点生命周期图示：生命周期钩子详细

文章目录内置指令内置指令复习之前所学指令：v-bind：单向绑定解析表达式, 可简写为 :xxxv-model： 双向数据绑定v-for：遍历数组/对象/字符串v-on：绑定事件监听, 可简写为@v-if： 条件渲染（动态控制节点是否存存在）v-else：条件渲染（动态控制节点是否存存在）v-show：条件渲染 (动态控制节点是否展示)v-text指令：作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

文章目录属性datacomputedmethodswatchVue 三种模板html模板字符串模板render函数模板、属性data、computed、methods、watchVue 三种模板 html模板、字符串模板、render函数模板

文章目录144. 二叉树的前序遍历、145. 二叉树的后序遍历、94. 二叉树的中序遍历、102. 二叉树的层序遍历、107. 二叉树的层序遍历、 144. 二叉树的前序遍历

文章目录46. 全排列47. 全排列 II78. 子集77. 组合回溯算法： 实际上一个类似枚举的搜索尝试过程，主要是在搜索尝试过程中寻找问题的解，当发现已不满足求解条件时，就 “回溯” 返回，尝试别的路径。回溯算法的基本思想是：从一条路往前走，能进则进，不能进则退回来，换一条路再试。 ——LeetCode46. 全排列原题链接：46. 全排列/** * @param {number[]} nums * @return {number[][]} */var permute = fun