SakuraSnow's Blog

前言现在差不多凌晨4点了，真是个悲伤的故事，以后我再也不在睡前玩手机了 嘛，既然睡不着就起来学习，学习让我快乐 这篇复习一下生成器和await 迭代器首先，你要知道什么是迭代 迭代就是从一个数据集合中按照一定的顺序，不断取出数据的过程 看起来和遍历很像遍历，但是它和遍历还是有一点区别的 迭代强调的是依次取数据，并不保证取多少，也不保证把所有的数据取完 遍历强调的是要把整个数据依次全部取出 那么，迭代有什么用呢 举个例子，如果你要开发一个三方库，库里有个函数，可以打印一个集合里的元素 1234// 打印function foo(x) { // 对x里的元素进行打印} 问题就来了，你要怎么遍历x呢，要是使用上面遍历数组的方法，那对Set和Map就不合适了，这时候就要用到一个设计模式：迭代器模式了 迭代器方式用于：提供一种方法访问一个容器元素中的各个对象，而又不暴露该对象的内部细节。 为了解决上面的问题，ES6新增了迭代协议，分为可迭代协议和迭代器协议。 其中，实现可迭代协议（Iterable 接口）的对象称为可迭代对象，实现迭代器协议的对象称为迭代器 ...

前言今天翻之前的面经时看到了虎牙的面试官问过我怎么实现promise，当时我没答出then的实现（有一说一我是没想到会实习会问这个的orz） 那今天就顺手回顾一下 实现思路完整的实现思路我在我之前的博客写过了 可以看这里：https://www.sakura-snow.com/archives/180 这里只对关键部分的代码做介绍 先贴代码，你可以先翻到下面看思路 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014 ...

前言这篇简单介绍一下dva 为什么要有dva在使用react开发时，进行react和router和redux的配置比较繁琐，而dva考虑到这个问题，而对它们进行了一层封装，从而让开发变得更加方便。 官方介绍：dva 是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。 使用方法在index.tsx中创建dva应用，并且配置redux和router 1234567891011121314151617181920212223242526import './style/index.css';import dva from "dva";import counterModel from "./models/counter"import usersModel from "./models/user"import { createBrowserHistory } ...

前言记一下JS原型的知识 原型假如有下面的代码 123456function Person(name = "sena", age = 16) { this.name = name; this.age = age;}let person = new Person(); 原型的关系是这样的 原型链通过 __proto__ 作为桥梁连接起来的一系列原型就是原型链 12345678910function Person(name = "sena", age = 16) { this.name = name; this.age = age;}let person = new Person();console.log("person的原型", Reflect.getPrototypeOf(person));console.log("object的原型", Reflect.getPrototypeOf({}))console.log( ...

前言这篇介绍一下redux，还有react和redux联用的方法 Redux基本概念 redux官方文档：https://redux.js.org/api/api-reference redux的工作流大概是这样的 ActionAction用于表示提交的修改的类型 action必须是一个plain-object，它的__proto__必须指向Object.prototype action中必须有type属性，该属性用于描述操作的类型，一般是字符串，也可以是其他类型 通常，使用payload属性表示附加数据 action创建函数应为无副作用的纯函数 为了方便利用action创建函数来分发action，redux提供了一个函数bindActionCreators，该函数用于增强action创建函数的功能，使它不仅可以创建action，并且创建后会自动完成分发。 最简单的action可以是下面这样的 1234{ type : "increase", payload : 1} 这个action用于表示进行增加的操作 但我们一般会对acti ...

前言随缘记录下TS的一些知识，随缘补充 TS的基础类型 Number String Boolean Object Array Tuple Any Null Undefined Enum Unknown Void 然后介绍一下平时比较少用的几个 Tuple（元组）1234// Declare a tuple typelet x: [string, number];// Initialize itx = ["hello", 10]; // OK Unknown表示一个变量的类型是未知的，每次使用前都要进行类型检查 1234567891011121314function foo() : string|number { if (Math.random() < 0.5) { return 0; } else { return "" }}let data : unknown = foo();let num = 10;if (typeof dat ...

前言这篇介绍一下react路由 路由是什么一个单页应用里，可能会划分为多个页面，每个页面都是不同的组件 如果要在单页应用中完成组件的切换，需要实现下面两个功能： 根据不同的页面地址，展示不同的组件（核心） 完成无刷新的地址切换 我们把实现了以上两个功能的插件，称之为路由 react中的路由可以使用React Router React Router在页面中，要使用的库有两个 react-router：路由核心库，包含诸多和路由功能相关的核心代码 react-router-dom：利用路由核心库，结合实际的页面，实现跟页面路由密切相关的功能 安装 123# react-router-dom依赖react-router# 安装的时候会把react-router一起安装了yarn add react-router-dom 在React Router中，支持两种模式的路由 Hash Router 哈希路由：根据url地址中的哈希值来确定显示的组件 hash的变化，不会导致页面刷新这种模式的兼容性最好 Borswer History Router 浏览器历史记录路由：使用His ...

前言react学习笔记第四篇，这篇介绍一下hook 为什么要有Hook在React Hook出现之前的版本中，组件主要分为两种：函数式组件和类组件。其中，函数式组件通常只考虑负责UI的渲染，没有自身的状态也没有业务逻辑代码，是一个纯函数。而类组件则不同，类组件有自己的内部状态，界面的显示结果通常由props 和 state 决定，因此它也不再那么纯净。相比于函数式组件，类组件有如下一些缺点： 状态逻辑难以复用。在类组件中，为了重用某些状态逻辑，社区提出了render props 或者 hoc 等方案，但是这些方案对组件的侵入性太强，并且组件嵌套还容易造成嵌套地狱的问题。 滥用组件状态。大多数开发者在编写组件时，不管这个组件有没有内部状态，会不会执行生命周期函数，都会将组件编写成类组件，这造成不必要的性能开销。 额外的任务处理。使用类组件开发应用时，需要开发者额外去关注 this 、事件监听器的添加和移除等等问题。 在函数式组件大行其道的当前，类组件正在逐渐被淘汰。不过，函数式组件也并非毫无缺点，在之前的写法中，想要管理函数式组件状态共享就是比较麻烦的问题。例如，下面这个函数组件就是 ...

前言这是这个系列的第三篇了，这一篇会介绍一下React中的小技巧 为属性设置默认值通过一个静态属性defaultProps声明属性默认值 当然你也可以在构造函数里通过mixin来手动给一个默认值 使用下面的示例 12345678910111213141516171819202122232425262728293031323334class Comp extends React.Component<any, any> { state = { num : this.props.num } handleClick = () => { this.setState({ num : this.state.num + 1 }) } static defaultProps = { a : 1, b : 2, c : 3, num : 0 } ...

前言这是react系列的学习笔记2，介绍一下，React中的一些基本概念，看完后你就可以简单的使用React了 JSX babel-jsx : https://babeljs.io/docs/en/#jsx-and-react 说到react，就必须要先介绍一下JSX了 JSX是Facebook起草的JS扩展语法，在React中广泛被使用，它的基本语法和HTML差不多，但是又有一些Vue模板的功能，比如下面的例子 12345678910111213141516171819202122232425262728293031323334353637383940414243444546const span = (<span>我是一个span元素</span>);// 属性里可以使用JS表达式const lis = arr.map((item, i) => { return (<li key={i}>{item}</li>);});const obj = {name : ...