jiegiser博客

为什么需要 hookReact 文档中也有说明了 Hooks 的提出主要是为了解决什么问题的：组件之间复用状态逻辑很难。就以前 React 为了将一个组件的逻辑抽离复用，不和渲染代码混用在一个 class 的做法，比较推介的是用高阶组件，将状态逻辑抽离出来，通过不同的样式组件传入带有状态逻辑的高阶组件中，增强样式组件的功能，从而达到复用逻辑的功能。再早期就会使用 mixin 去实现。缺点：增加嵌套层级，代码会更加难以理解。复杂组件变得难以理解在使用 class 组件的时候，我们少不了在生命周

在 React 中触发更新的方式主要有以下几种：ReactDOM.render、setState、forUpdate 以及 hooks 中的 useState 等，关于 hooks 的后面会专门写一篇文章分析。

render 阶段主要做什么在 render 阶段，React 可以根据当前可用的时间片处理一个或多个 fiber 节点，并且得益于 fiber 对象中存储的元素上下文信息以及指针域构成的链表结构，使其能够将执行到一半的工作保存在内存的链表中。当 React 停止并完成保存的工作后，让出时间片去处理一些其他优先级更高的事情。之后，在重新获取到可用的时间片后，它能够根据之前保存在内存的上下文信息通过快速遍历的方式找到停止的 fiber 节点并继续工作。由于在此阶段执行的工作并不会导致任何用户可见的更改，因为

Diff 算法是什么diff 是通过 JS 层面的计算，来对比两个虚拟 DOM 中变化的部分，并只针对该部分进行原生 DOM 操作，而非重新渲染整个页面，从而办证了每次操作更新后页面的高效渲染。​在 React 中 diff 算法通过对比两个虚拟 DOM ，返回一个 patch 对象，即补丁对象，在通过特定的操作解析 patch 对象，完成页面的重新渲染。​在上一节的 Fiber 架构提到，在 render 阶段更新 Fiber 节点时，我们会调用 reconcileChildFibers 对比 cu

Fiber 是对 React 核心算法的重构，facebook 团队使用两年多的时间去重构 React 的核心算法，在React16 以上的版本中引入了 Fiber 架构；​为什么需要 Fiber在 React15 及以前，Reconciler 采用递归的方式创建虚拟 DOM，递归过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间，造成卡顿。​为什么会造成卡顿，我们需要了解浏览器在一帧中都做了什么？​浏览器一帧会干什么我们知道，在浏览器中，页面是一帧一帧绘制出来的，渲染的帧率与设备的刷

先上一张图，这是 React 团队作者 Dan Abramov 画的一张生命周期阶段图，可以看出 React 的生命周期主要分为两个阶段：render 阶段和 commit 阶段。​其中 commit 阶段又可以细分为 pre-commit 阶段和 commit 阶段；react 16 架构React 16 是重构了 React 15 的一个大版本；其相比 React 15 架构增加了 SchedulerReact16 架构可以分为三层：Scheduler（调度器）—— 调度任务的优先级，高优

首先现在通过 react 17.0.2 创建新项目，会直接提示需要更新 api：![image.png](https://img-blog.csdnimg.cn/img_convert/bad51c755c14249c83849fcea625ca9d.png#clientId=ubf23d113-0a94-4&from=paste&height=51&id=u03d4414c&margin=[object Object]&name=image.png&orig

说明离上次更新该系列文章已经快四个多月。这段时间工作上比较忙以及自己也换了份工作就没有更新过相关内容，最近在做一个管网系统，自己也写了一些小的demo，github地址：https://github.com/jiegiser/ol5_example（欢迎star），里面有一些用到的天地图的key跟bing地图的key需要大家自己去获取。最近我打算会陆陆续续的更新完这个系列的文章。将自己在项目上的...

基于 react + Typescript + cesium 的项目项目地址：https://github.com/jiegiser/react_cesium 可以 star 一波搭建开发环境使用 create-react-app --typesctipt react-cesium 初始化项目；安装 cesium 以及 copy-webpack-plugin 插件：npm install cesium copy-webpack-plugin --save打开 react 配置文件，执行命令：ya

1. 动态规划算法：题目：给定一个字符串 (s) 和一个字符模式 § ，实现一个支持 ‘?’ 和 ‘*’ 的通配符匹配。‘?’ 可以匹配任何单个字符。‘*’ 可以匹配任意字符串（包括空字符串）。两个字符串完全匹配才算匹配成功。说明:s 可能为空，且只包含从 a-z 的小写字母。p 可能为空，且只包含从 a-z 的小写字母，以及字符 ? 和 *。来源：力扣（LeetCode）链接...

2019-04-28使用JSX，需要注意的是：如果使用JSX，需要在webpack中进行配置babel-plugin-transform-vue-jsx，使用render函数开发可排序的表格组件，收获了：实现的思路，循环遍历表头以及要展示的数据，以及设置排序使用render函数开发一个留言板的功能，收获了：熟练使用render函数，主要还是实现逻辑吧，做到留言板的回复，以及添加留言，等等。...

目录2019-0515 WebPack 基础知识2019-0515 WebPack 基础知识首先需要明白webpack为什么会出现，作用是什么，总之他就是一个模块打包工具；commonJS的模块导出方式为:function SiderBar() { var dom = document.getElementById('root'); var siderbar = docum...

2019-05-12vuePress快速使用，进入官网，可以看到有两种使用场景，一种是直接全局安装，然后进行创建md文件进行写内容，还有一种是基于现有的项目使用vuePress去管理文档，进行配置即可，这里我只是简单的测试了一下，全局进行安装。输入下面的命令：npm install -g vuepress全局安装vuePress，然后进行新建一个markdown 文件，然后输入命令vuepr...

目录1. Tree Shaking 概念详解1.1 babel/polyfill与babel/preset-env之间的引用小冲突1.2 Tree Shaking 概念2. Develoment 和 Production 模式的区分打包1. Tree Shaking 概念详解1.1 babel/polyfill与babel/preset-env之间的引用小冲突在webpack 4.x的版本中...

目录1. Library打包1.1 对库文件进行打包1.2 发布一个包2. PWA（Progressive Web Application）的打包配置1. Library打包1.1 对库文件进行打包库文件的打包：我们新建一个工程，新建index.js math.js string.js,代码如下：index.js文件import * as math from './math.js'im...

文章目录1. 变量2. 箭头函数2.1 优点：2.2 箭头函数的局限性：3. ES6 参数默认值4. 模板字符串5. 对象解构6. 数组解构7. for of 用法8. Array.from() Array.of()8.1 Array.from()8.2 Array.of()9. 数组的其他方法9.1 .find()9.2 .findIndex()9.3 .some()9.4 .every()1...

1. JS 的对象JS对象中独有的特性：对象具有高度的动态性，因为JavaScript 赋予了使用在运行时为对象添加状态和行为的能力。JavaSCrpipt允许运行时向对象添加属性，这就跟绝大多数基于类的、静态的对象设计完全不同。使用内置函数 Object.getOwnPropertyDescripter来查看设置的属性的描述属性。我们可以使用Object.defineProperty来修改属...

1. 如何编写一个Loader

文章目录前言前言近期会在博客发布一系列有关WebGIS的实战课程，技术栈：vue全家桶+arcgis Server+arcgis API 3.x+asp.net实现一个简单的城市供水管网系统。前置知识准备：es6语法node的简单安装包vue、vue-cli 3.0、vuex，vue-router，以及elementUI框架axiosasp net mvc框架（后台可能会使用ko...

文章目录1. 安装1.1 编写一个typescript文件2. typescript 的类型系统2.1 基础类型2.2 变量声明2.3 接口2.4 类2.5 函数2.6 泛型2.7 最佳通用类型以及上下文类型2.8 高级类型3. 实战 ts-axios 项目构建3.1 初始化项目3.2 编写基础请求代码4. 实战 ts-axios 基础功能实现4.1 处理请求url参数4.2 处理请求body数据...

前言当前浏览器对于es6语法支持程度还不是很高，我们可以通过webpack打包工具以及babel等转换es6语法，来实现浏览器支持es6语法。我这里通过安装了lodash来测试是否转换成功。实现步骤首先我们通过npm init命令来初始化我们的工程。一路y就可以，会生成一个packe.json配置文件；输入下面的命令；npm init生成一个配置文件packe.json，内容如下...