setState更新数据的合并
State 的更新会被合并当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。
例如，你的 state 包含几个独立的变量：
constructor(props) { super(props); this.state = { posts: [], comments: [] };}
然后你可以分别调用 setState() 来单独地更新它们：
componentDidMount() { fetchPosts().then(response => { this.setState({ posts: response.posts }); }); fetchComments().then(response => { this.setState({ comments: ...
setState同步/异步详解
正确地使用 State关于 setState() 你应该了解三件事：
1.不要直接修改 State直接修改State不会重新渲染组件：
// Wrongthis.state.comment = 'Hello';
而是应该使用 setState():
// Correctthis.setState({comment: 'Hello'});
构造函数是唯一可以给 this.state 赋值的地方。
setState函数定义在Component的原型对象上，
react -> ReactBaseClasses.js -> Component
2.setState异步更新
特殊情况下：setState是同步更新的
为什么setState要设计成异步更新？
首先，setState设计成异步，可以显著提升性能。
如果每次调用setState都进行一次更新，那么意味着render函数会被频繁的调用，界面重新渲染，这样效率很低。
最好的办法是：获得多个更新，之后进行批量处理。
如果同步更新了State, 但是还没有 ...
JS继承方法总结
1.原型链继承function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property;}function SubType() { this.subproperty = false;}// 继承 继承的是父类的实例对象作为自己的原型SubType.prototye = new SuperType();
存在的问题：
若原型中存在引用值， 则所有实例继承的都是同一引用对象。
子类实例化时不能给父类传参。
2.盗用构造函数==解决的问题： 解决原型包含引用值导致的继承问题==
基本思路：在子类构造函数中通过call, apply调用父类的构造函数
function SubType() { this.colors = ['red', 'blue', 'green'];} ...
compose函数和pipe函数
compose函数compose函数可以将需要嵌套执行的函数平铺，嵌套执行就是一个函数的返回值将作为另一个函数的参数。我们考虑一个简单的需求：
给定一个输入值x，先给这个值加10，然后结果乘以10
这个需求很简单，直接一个计算函数就行：
const calculate = x => (x + 10) * 10;let res = calculate(10);console.log(res); // 200
我们可以将复杂的几个步骤拆成几个简单的可复用的简单步骤，于是我们拆出了一个加法函数和一个乘法函数:
const add = x => x + 10;const multiply = x => x * 10;// 我们的计算改为两个函数的嵌套计算，add函数的返回值作为multiply函数的参数let res = multiply(add(10));console.log(res); // 结果还是200
上面的计算方法就是函数的嵌套执行，而我们compose的作用就是将嵌套执行的方法作为参数平铺，嵌套执行的时候，里面的方法也就是右边的方法最开始执行 ...
使用JS实现sleep函数
我们都知道 JavaScript 是一个单线程语言，单线程有它的好处也有它的坏处。
在我们熟知的如 Java、C++等语言中，都提供了一个叫做 Sleep 的内置函数。
假设我们有这样一个场景：我们需要在项目运行起来后的十分钟之后去执行一段代码，这段代码可以是符合你业务场景的任何代码，比如查看内存占用多少等等。
在 Java 这类语言中，可以直接使用 Sleep 这个内置函数实现这个需求，Sleep 函数会让出或者停下当前线程，让其它程序先执行，等到指定时间后再继续执行。
然而我们的 JavaScript 没有提供 sleep 内置函数，大致就是因为单线程的原因把！所以说我们可以尝试着自己封装一个！
1.目标分析既然我们要去实现一个 sleep 函数，那么我们肯定要先有一个比较实际的场景，这样才好开展工作。
假设我们有如下一段代码：
function fnA() { console.log('A');}function fnB() { console.log('B');}function f ...
Profiler API
ProfilerAPI
作用Profiler 测量一个 React 应用多久渲染一次以及渲染一次的“代价”。
它的目的是识别出应用中渲染较慢的部分，或是可以使用类似 memoization 优化的部分，并从相关优化中获益。
注意：
Profiling 增加了额外的开支，所以它在生产构建中会被禁用。
为了将 profiling 功能加入生产环境中，React 提供了使 profiling 可用的特殊的生产构建环境。 从 fb.me/react-profiling了解更多关于如何使用这个构建环境的信息。
用法Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销。
需要两个 prop ：
id(string)
onRender(function): 当组件树中的组件“提交”更新的时候被React调用的回调函数 onRender(function)
例如，为了分析 Navigation 组件和它的子代：
render( <App> <Profiler id="Navigation" onRender= ...
修改yarn镜像源
1.查看当前镜像源
yarn config get registry
2.临时修改yarn源
yarn save package_name --registry https://registry.npm.taobao.org/
3.修改yarn源为taobao源
yarn config set registry https://registry.npm.taobao.org/
4.修改yarn源为官方源
yarn config set registry https://registry.yarnpkg.com
初探babel——基础加实践篇
前言作为一名前端开发者，如果你还没有使用过 babel 那么会有点落伍啦~
说到 babel ，会有一系列的名词出现，比如：
babel-cli
babel-core
babel-runtime
babel-node
babel-polyfill
….
它们分别是做什么的，有什么区别呢？本文将带着这些问题带你从 0 到 1 了解并上手 babel，更全面的了解 babel，本文主要是基础篇，后期会有深入原理篇，写本篇文章的目的是想对 babel 进行回顾整理，对 babel 理解更加深入
什么是babel官方定义Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
个人理解简单来说就是把 JavaScript 中 es2015+ 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。比如在代码中使用了 ES6 的箭头函数，但是这种写法会在 IE 浏览器中报错，为了让代码能在IE ...
TypeScript笔记(更新中...)
TypeScript简介什么是 TypeScript
Typed JavaScript at Any Scale.添加了类型系统的 JavaScript，适用于任何规模的项目。
TypeScript 的两个最重要的特性——类型系统、适用于任何规模。
TypeScript的特性类型系统从 TypeScript 的名字就可以看出来，「类型」是其最核心的特性。
我们知道，JavaScript 是一门非常灵活的编程语言：
它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。
由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。
基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。
函数是 JavaScript 中的一等公民[2]，可以赋值给变量，也可以当作参数或返回值。
这种灵活性就像一把双刃剑，一方面使得 JavaScript 蓬勃发展，无所不能，从 2013 年开始就一直蝉联最普遍使用的编程语言排行榜冠军[3]；另一方面也使得它的代码质量参差不齐，维护成本高，运行时错误多。
而 TypeScript 的类型系统，在很大程度上弥补了 JavaScr ...
五种方式实现图片懒加载
五种方式实现图片懒加载
近期，公司这边的项目遇到好多需要懒加载的操作，所以趁此机会学习并搜罗了许多实现懒加载的方式，并总结于下面~
其实实现懒加载的核心点在于 判断一个元素是否在可视区域
可视区域即我们浏览网页的设备肉眼可见的区域，如下图
在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如：
图片的懒加载
列表的无限滚动
计算广告元素的曝光情况
可点击链接的预加载
方式一 img的loading属性设为“lazy”
HTML元素延迟加载属性 —— loading属性值lazy允许浏览器选择性加载IMG元素，根据用户滚动操作至其元素附近执行加载，一定程度起到节流的作用。
业务场景当前页面图片元素过多，避免不必要的流量浪费。
使用方法<img src="deathghost.jpg" loading="lazy" alt="新码笔记" /> ...
