欢迎来到我的小站

GitGit 常用命令 查看分支：git branch 创建分支：git branch 切换分支：git checkout 创建+切换分支：git checkout -b 合并某分支到当前分支：git merge 删除分支：git branch -d 如何使用 Git 管理项目 实际开发中，一个仓库（一般只放一个项目）主要存在两条主分支：master 与 develop 分支。这个两个分支的生命周期是整个项目周期。 我们可能使用的不同类型的分支对项目进行管理是： 功能分支功能分支（或有时称为主题分支）用于为即将发布或遥远的未来版本开发新功能。在开始开发某个功能时，将包含该功能的目标版本在那时很可能是未知的。功能分支的本质在于，只要该功能处于开发阶段，它就存在，但最终会被合并回 develop（明确将新功能添加到即将发布的版本中）或丢弃。功能分支通常只存在于开发者仓库中，而不存在于 origin。 发布分支发布分支支持准备新的生产版本。它们允许在最后一刻打点 i 和交叉 t。此外，它们允许修复小错误并为发布准备元数据（版本号、构建日期等）。通过在发布分支上完成所有这些工作，该 ...

Babel简单描述一下 Babel 的编译过程 Babel 是一个 JavaScript 编译器，是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 Babel  的功能很纯粹，它只是一个编译器。大多数编译器的工作过程可以分为三部分： 解析（Parse） ：将源代码转换成更加抽象的表示方法（例如抽象语法树）。包括词法分析和语法分析。词法分析主要把字符流源代码（Char Stream）转换成令牌流（ Token Stream），语法分析主要是将令牌流转换成抽象语法树（Abstract Syntax Tree，AST）。 转换（Transform） ：通过 Babel 的插件能力，对（抽象语法树）做一些特殊处理，将高版本语法的 AST 转换成支持低版本语法的 AST。让它符合编译器的期望，当然在此过程中也可以对 AST 的 Node 节点进行优化操作，比如添加、更新以及移除节点等。 生成（Generate） ：将 AST 转换成字符串形式的低版本代码，同时也能创建 ...

webpackwebpack 做过哪些优化，开发效率方面、打包策略方面等等、优化 Webpack 的构建速度 使用高版本的 Webpack （使用webpack4） 多线程/多实例构建：HappyPack(不维护了)、thread-loader 缩小打包作用域： exclude/include (确定 loader 规则范围) resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找) resolve.extensions 尽可能减少后缀尝试的可能性 noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句) IgnorePlugin (完全排除模块) 合理使用alias 充分利用缓存提升二次构建速度： babel-loader 开启缓存 terser-webpack-plugin 开启缓存 使用 cache-loader 或者 hard-source-webpack-plugin 注 ...

React 生命周期 123456789101112131415161718192021// 安装// 当组件的实例被创建并插入到 DOM 中时，这些方法按以下顺序调用：constructor()static getDerivedStateFromProps()render()componentDidMount()// 更新中// 更新可能由道具或状态的更改引起。当重新渲染组件时，这些方法按以下顺序调用：static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()// 卸载// 当组件从 DOM 中移除时调用此方法：componentWillUnmount() react-fiber背景 react-fiber 产生的根本原因，是大量的同步计算任务阻塞了浏览器的 UI 渲染。默认情况下，JS 运算、页面布局和页面绘制都是运行在浏览器的主线程当中，他们之间是互斥的关系。如果 JS 运算持续占用主线程，页面就没法得到及时的更新。当 ...

React 组件通信方式react组件间通信常见的几种情况 : 父组件向子组件通信 子组件向父组件通信 跨级组件通信 非嵌套关系的组件通信 父组件向子组件通信父组件通过 props 向子组件传递需要的信息。父传子是在父组件中直接绑定一个正常的属性，这个属性就是指具体的值，在子组件中，用props就可以获取到这个值 123456789// 子组件: Childconst Child = props =>{ return <p>{props.name}</p>}// 父组件 Parentconst Parent = ()=>{ return <Child name="京程一灯"></Child>} 子组件向父组件通信props + 回调的方式，使用公共组件进行状态提升。子传父是先在父组件上绑定属性设置为一个函数，当子组件需要给父组件传值的时候，则通过props调用该函数将参数传入到该函数当中，此时就可以在父组件中的函数中接收到该参数了，这 ...

react 中 class 组件和函数组件的区别 类组件是使用 ES6 的 class  来定义的组件。 函数组件是接收一个单一的  props  对象并返回一个 React 元素。 关于 React 的两套 API（类（class）API 和基于函数的钩子（hooks） API）。官方推荐使用钩子（函数），而不是类。因为钩子更简洁，代码量少，用起来比较”轻”，而类比较”重”。而且，钩子是函数，更符合 React 函数式的本质。 函数一般来说，只应该做一件事，就是返回一个值。 如果你有多个操作，每个操作应该写成一个单独的函数。而且，数据的状态应该与操作方法分离。根据函数这种理念，React 的函数组件只应该做一件事情：返回组件的 HTML 代码，而没有其他的功能。函数的返回结果只依赖于它的参数。不改变函数体外部数据、函数执行过程里面没有副作用。 类（class）是数据和逻辑的封装。 也就是说，组件的状态和操作方法是封装在一起的。如果选择了类的写法，就应该把相关的数据和操作，都写在同一个 class 里面。 类组件缺点 : 大型组件很难拆分和重构，也很难测试。 业务逻辑分 ...

vue组件的通信方式 props/$emit 父子组件通信父->子props，子->父 $on、$emit 获取父子组件实例 parent、children Ref 获取实例的方式调用组件的属性或者方法 父->子孙 Provide、inject 官方不推荐使用，但是写组件库时很常用 $emit/$on 自定义事件 兄弟组件通信Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() 自定义事件 vuex 跨级组件通信Vuex、$attrs、$listeners Provide、inject nextTick的实现 nextTick是Vue提供的一个全局API,是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM； Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启1个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中-次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。 ...

简述 MVVM什么是MVVM 视图模型双向绑定，是 Model-View-ViewModel 的缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model层代表数据模型，View代表UI 组件，ViewModel是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。以前是操作 DOM 结构更新视图，现在是数据驱动视图。 MVVM 的优点： 低耦合。视图（View）可以独立于 Model 变化和修改，一个 Model 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变化，当 Model 变化的时候 View 也可以不变； 可重用性。你可以把一些视图逻辑放在一个 Model 里面，让很多 View 重用这段视图逻辑。 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。 可测试。 Vue 底层实现原理 vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Objec ...

setTimeout、Promise、Async/Await 的区别 setTimeout settimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行。 Promise Promise本身是同步的立即执行函数， 当在executor中执行resolve或者reject的时候, 此时是异步操作， 会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行。 12345678910111213console.log('script start')let promise1 = new Promise(function (resolve) { console.log('promise1') resolve() console.log('promise1 end')}).then(function () { console.log('promise2')})setTimeout(func ...

EventLoop 事件循环 JS是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。微任务队列的代表就是，Promise.then，MutationObserver，宏任务的话就是setImmediate setTimeout setInterval JS运行的环境。一般为浏览器或者Node。 在浏览器环境中，有JS引擎线程和渲染线程，且两个线程互斥。 Node环境中，只有JS 线程。 不同环境执行机制有差异，不同任务进入不同Event Queue队列。 当主程结束，先执行准备好微任务，然后再执行准备好的宏任务，一个轮询结束。 浏览器中的事件环（Event Loop)事件环的运行机制是，先会执行栈中的内容，栈中的内容执行后执行微任务，微任务清空后再执行宏任务，先取出一个宏任务，再去执行微任务，然后在取宏任务清微任务这样不停的循环。 eventLoop 是由JS的宿主环境（浏览器）来实现的； 事件循环可以简单的 ...