袁光斌的Blog

Pinia概览Pinia 是一个拥有组合式 API 的 Vue 状态管理库，允许我们跨组件或页面共享状态。且同时支持 Vue2 和 Vue3，并不强制要求开发者使用组合式 API 。 支持以下功能： Devtools支持 追踪 actions、mutations 的时间线 在组件中展示它们所用到的 Store 热更新 不必重载页面即可修改 Store 开发时可保持当前的 State 插件：可通过插件扩展 Pinia 功能 为 JS 开发者提供适当的 TypeScript支持以及自动补全功能 支持服务端渲染 使用1.Store的定义pinia同时支持 Vue2、Vue3 Options Store（Vue2） 与 Vue 的选项式 API 类似，我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象 import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter' ...

背景：项目中使用lint检查格式规范CSS样式结构报错 错误规则：no-descending-specificity 样式的优先级规则：1.资源顺序 CSS样式排列顺序在样式生效的过程中很重要，当两个选择器具有相同的权重信息时，最后出现的CSS样式将会生效。 2.优先级 但是，当其中一个CSS样式具有更高的权重时，样式的顺序就不再重要，高权重的CSS样式将会覆盖低优先级的样式。 3.重要程度 特殊的CSS规则 !import，用于修改特定属性的值，能够覆盖普通规则（尽量避免使用） 在读取样式表时，资源顺序和优先级这两种规则的冲突会导致一些混乱，如果一个高权重的选择器出现在同元素的低优先级样式之前，我们将更以难理解这样的样式规则。 “no-descending-specificity” 规则“no-descending-specificity” 规则是一种CSS代码检查规则，用于检查样式表中具有较低优先级的选择器是否出现在具有较高优先级的选择器之后。它强制要求重写选择器（具有高优先级）应始终位于被重写的选择器之后，以提高代码可读性并避免源代码顺序与优先级之间的冲突。 该规则的执 ...

JavaScript 隐式类型转换 JavaScript 隐式类型转换，一篇就够了 ！ 一图胜千言 数学算符中的类型转换 减、乘、除 特殊的加法 逻辑语句中的类型转换 单个变量 使用 == 比较中的5条规则 通过几个特别的题目来练习一下吧 附录1：类型转换表 一图胜千言JavaScript发生隐式类型转换时的各种猫腻，相信各位开发者已经饱受折磨。 接下来，本文通过几个产生隐式类型转换的场景，务必帮助你彻底掌握这个知识点。 提示 1：请充分注意到行文中出现的 ⭐️， 意味着这是重点句子。 提示 2：阅读过程，可以随时翻看【附录】 数学运算符中的类型转换因为 JS 并没有类型声明，所以任意两个变量或字面量，都可以做加减乘除。 1. 减、乘、除⭐️我们在对各种非Number类型运用数学运算符(- \* /)时，会先将非Number类型转换为Number类型。 1 - true // 0， 首先把 true 转换为数字 1， 然后执行 1 - 11 - null // 1, 首先把 null 转换为数字 0， 然后执行 1 - 01 * undefined // NaN, ...

useState这个hooks在不同的运行阶段执行的不是一个函数： 1.mount阶段（第一次执行）；执行的就是mountState。 执行mountWorkInProgressHook，这个函数的作用就是生成一个hooks对象。 我们拿到的状态都保存在memoizedState，（同步模式下的时候这个值没啥用）baseState主要是为了保存高优先级打断低优先级更新时的状态值(这两个值并不总是相等的)，保证在低优先级的更新下次运行时，能够还原状态的值，（React只保证最终的状态是正确的，中间的状态可能会跳变（一般界面上不会看到跳变的状态）。 下面就是做一些hook的初始化。我们后面执行的setState就是这个dispatchAction函数。 2.update阶段 更新阶段执行的是updateReducer(也就是useReducer这个hooks的更新阶段的函数， 这个hooks的思想和redux的reducer一模一样，践行的就是纯函数的思想)，只是这里传入了一个basicStateReducer，长下面这样， 也就是判断你传给setState里面是不是个函数，是函数 ...

JS之内存泄漏从本质上说,内存泄漏可以定义为:不再被应用程序所需要的内存,出于某种原因,它不会返回到操作系统或空闲内存池中。 四种常见的内存泄漏1.全局变量JavaScript以一种有趣的方式处理未声明的变量: 对于未声明的变量,会在全局范围中创建一个新的变量来对其进行引用。在浏览器中，全局对象是window。例如： function foo(args) { bar = "some text";}=> function foo(args) { window.bar = "some text";} 如果 bar 在 foo 函数的作用域内对一个变量进行引用,却忘记使用 var 来声明它,那么将创建一个意想不到的全局变量。 创建一个意料之外的全局变量的另一种方法是使用this: function foo() { this.var1 = "potential accidental global";}// foo自己调用，它的this指向全局对象(w ...

const element = <h1>Hello, world!</h1>; 这个有趣的标签语法既不是字符串也不是 HTML。 它被称为 JSX，是一个 JavaScript 的语法扩展。 在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。 JSX 可以生成 React “元素”。 为什么使用 JSX？React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。 React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。 JSX 表示对象Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。 function B(){ return ( <div></div ...

HTTP 的特点和缺点特点：无连接、无状态、灵活、简单快速 无连接：每一次请求都要连接一次，请求结束就会断掉，不会保持连接 无状态：每一次请求都是独立的，请求结束不会记录连接的任何信息(提起裤子就不认人的意思)，减少了网络开销，这是优点也是缺点 灵活：通过http协议中头部的Content-Type标记，可以传输任意数据类型的数据对象(文本、图片、视频等等)，非常灵活 简单快速：发送请求访问某个资源时，只需传送请求方法和URL就可以了，使用简单，正由于http协议简单，使得http服务器的程序规模小，因而通信速度很快 缺点：无状态、不安全、明文传输、队头阻塞 无状态：请求不会记录任何连接信息，没有记忆，就无法区分多个请求发起者身份是不是同一个客户端的，意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大 不安全：明文传输可能被窃听不安全，缺少身份认证也可能遭遇伪装，还有缺少报文完整性验证可能遭到篡改 明文传输：报文(header部分)使用的是明文，直接将信息暴露给了外界，WIFI陷阱就是复用明文传输的特点，诱导你连上热点，然后疯狂抓取你的流量，从而 ...

对于 JavaScript 开发者来说 this 是一种非常复杂的机制，那它到底有用在哪里呢？ function identify() { return this.name.toUpperCase(); }function speak() { var greeting = "Hello, I'm " + identify.call( this ); console.log( greeting ); }var me = { name: "Kyle" };var you = { name: "Reader" };identify.call( me ); // KYLE identify.call( you ); // READER speak.call( me ); // Hello, 我是 KYLE speak.call( you ); // Hello, 我是 READER 这段代码可以在不同的上下文对象（me 和 you）中重 ...

在项目中，当我们使用redux对组件数据进行管理时，通常需要创建多个reducer，每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。 Redux提供了combineReducers这个方法来合并多个reducers函数 import { combineReducers } from 'redux'const reducer = combineReducers({ counters: counters, todos: todos,})export default reducer; 接下来，我们看看Redux源码中，combineReducers到底做了什么。 源码​ 首先combineReducers将传入的reducers对象的key，遍历每一个key，检查传入的reducers是否是一个函数。将是函数的reducer放入finalReducers这个对象。 combineReducers返回 ...

shouldComponentUpdate()shouldComponentUpdate(nextProps, nextState) 根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。 此方法仅作为**性能优化的方式**而存在。 如果是Class组件，应该考虑使用内置的 PureComponent组件，而不是手动编写 shouldComponentUpdate()。PureComponent 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。 如果是函数式组件，应该考虑使用内置的 React.memo高阶函数对组件做一下包装。 注意： ​ 不建议在 shouldComponentUpdate ...