1、ES5、ES6和ES2015有什么区别? ES2015特指在2015年发布的新一代JS语言标准，ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES2017、ES2018等。现阶段在绝大部分场景下，ES2015默认等同ES6。ES5泛指上一代语言标准。ES2015可以理解为ES5和ES6的时间分界线 2、babel是什么，有什么作用? babel是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持ES6的平台 3、let有什么用，有了var为什么还要用let？ 在ES6之前，声明变量只能用var，var方式声明变量其实是很不合理的，准确的说，是因为ES5里面没有块级作用域是很不合理的。没有块级作用域回来带很多难以理解的问题，比如for循环var变量泄露，变量覆盖等问题。let声明的变量拥有自己的块级作用域，且修复了var声明变量带来的变量提升问题。 4、举一些ES6对String字符串类型做的常用升级优化? 优化部分 ES6新增了字符串模板，在拼接大段字符串时，用反斜杠()`取代以往的字符串相加的形式，能保留所有空格和换行，使得字符串拼接看起来更加直观，更加优雅 升级部分 ES6在String原型上新增了includes()方法，用于取代传统的只能用indexOf查找包含字符的方法(indexOf返回-1表示没查到不如includes方法返回false更明确，语义更清晰), 此外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法，可方便的用于查找，补全字符串 5、举一些ES6对Array数组类型做的常用升级优化 优化部分 数组解构赋值。ES6可以直接以let [a,b,c] = [1,2,3]形式进行变量赋值，在声明较多变量时，不用再写很多let(var),且映射关系清晰，且支持赋默认值扩展运算符。ES6新增的扩展运算符(...)(重要),可以轻松的实现数组和松散序列的相互转化，可以取代arguments对象和apply方法，轻松获取未知参数个数情况下的参数集合。（尤其是在ES5中，arguments并不是一个真正的数组，而是一个类数组的对象，但是扩展运算符的逆运算却可以返回一个真正的数组）。扩展运算符还可以轻松方便的实现数组的复制和解构赋值（let a = [2,3,4]; let b = [...a]）升级部分 ES6在Array原型上新增了find()方法，用于取代传统的只能用indexOf查找包含数组项目的方法,且修复了indexOf查找不到NaN的bug([NaN].indexOf(NaN) === -1).此外还新增了copyWithin(),includes(), fill(),flat()等方法，可方便的用于字符串的查找，补全,转换等 6、举一些ES6对Number数字类型做的常用升级优化 优化部分 ES6在Number原型上新增了isFinite(), isNaN()方法，用来取代传统的全局isFinite(), isNaN()方法检测数值是否有限、是否是NaN。ES5的isFinite(), isNaN()方法都会先将非数值类型的参数转化为Number类型再做判断，这其实是不合理的，最造成isNaN('NaN') === true的奇怪行为--'NaN'是一个字符串，但是isNaN却说这就是NaN。而Number.isFinite()和Number.isNaN()则不会有此类问题(Number.isNaN('NaN') === false)。（isFinite()同上） 升级部分 ES6在Math对象上新增了Math.cbrt()，trunc()，hypot()等等较多的科学计数法运算方法，可以更加全面的进行立方根、求和立方根等等科学计算 7、举一些ES6对Object类型做的常用升级优化?(重要) 优化部分 对象属性变量式声明。ES6可以直接以变量形式声明对象属性或者方法，。比传统的键值对形式声明更加简洁，更加方便，语义更加清晰 let [apple, orange] = ['red appe', 'yellow orange']; let myFruits = {apple, orange}; // let myFruits = {apple: 'red appe', orange: 'yellow orange'}; 12 尤其在对象解构赋值(见优化部分b.)或者模块输出变量时，这种写法的好处体现的最为明显 let {keys, values, entries} = Object; let MyOwnMethods = {keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries} 12可以看到属性变量式声明属性看起来更加简洁明了。方法也可以采用简洁写法 let es5Fun = { method: function(){} }; let es6Fun = { method(){} } 123456 对象的解构赋值。 ES6对象也可以像数组解构赋值那样，进行变量的解构赋值 let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'}; 1 对象的扩展运算符(...)。 ES6对象的扩展运算符和数组扩展运算符用法本质上差别不大，毕竟数组也就是特殊的对象。对象的扩展运算符一个最常用也最好用的用处就在于可以轻松的取出一个目标对象内部全部或者部分的可遍历属性，从而进行对象的合并和分解 let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'}; // otherFruits {grape: 'purple grape', peach: 'sweet peach'} // 注意: 对象的扩展运算符用在解构赋值时，扩展运算符只能用在最有一个参数(otherFruits后面不能再跟其他参数) let moreFruits = {watermelon: 'nice watermelon'}; let allFruits = {apple, orange, ...otherFruits, ...moreFruits}; 12345 super 关键字。ES6在Class类里新增了类似this的关键字super。同this总是指向当前函数所在的对象不同，super关键字总是指向当前函数所在对象的原型对象 升级部分 ES6在Object原型上新增了is()方法，做两个目标对象的相等比较，用来完善'==='方法。'==='方法中NaN === NaN //false其实是不合理的，Object.is修复了这个小bug。(Object.is(NaN, NaN) // true) ES6在Object原型上新增了assign()方法，用于对象新增属性或者多个对象合并 const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3} 12345 注意: assign合并的对象target只能合并source1、source2中的自身属性，并不会合并source1、source2中的继承属性，也不会合并不可枚举的属性，且无法正确复制get和set属性（会直接执行get/set函数，取return的值） ES6在Object原型上新增了getOwnPropertyDescriptors()方法，此方法增强了ES5中getOwnPropertyDescriptor()方法，可以获取指定对象所有自身属性的描述对象。结合defineProperties()方法，可以完美复制对象，包括复制get和set属性ES6在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法，用来获取或设置当前对象的prototype对象。这个方法存在的意义在于，ES5中获取设置prototype对像是通过__proto__属性来实现的，然而__proto__属性并不是ES规范中的明文规定的属性，只是浏览器各大产商“私自”加上去的属性，只不过因为适用范围广而被默认使用了，再非浏览器环境中并不一定就可以使用，所以为了稳妥起见，获取或设置当前对象的prototype对象时，都应该采用ES6新增的标准用法ES6在Object原型上还新增了Object.keys()，Object.values()，Object.entries()方法，用来获取对象的所有键、所有值和所有键值对数组8、举一些ES6对Function函数类型做的常用升级优化? 优化部分 箭头函数(核心)。箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this,这改变了以往JS函数中最让人难以理解的this运行机制。主要优化点 箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象。ES5函数里的this总是指向函数执行时所在的对象，这使得在很多情况下this的指向变得很难理解，尤其是非严格模式情况下，this有时候会指向全局对象，这甚至也可以归结为语言层面的bug之一。ES6的箭头函数优化了这一点，它的内部没有自己的this,这也就导致了this总是指向上一层的this，如果上一层还是箭头函数，则继续向上指，直到指向到有自己this的函数为止，并作为自己的this箭头函数不能用作构造函数，因为它没有自己的this，无法实例化也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象。（可以用扩展运算符代替）函数默认赋值。ES6之前，函数的形参是无法给默认值得，只能在函数内部通过变通方法实现。ES6以更简洁更明确的方式进行函数默认赋值function es6Fuc (x, y = 'default') { console.log(x, y); } es6Fuc(4) // 4, default 12341234升级部分 ES6新增了双冒号运算符，用来取代以往的bind，call,和apply。(浏览器暂不支持，Babel已经支持转码) foo::bar; // 等同于 bar.bind(foo); 123foo::bar(…arguments);// 等同于 bar.apply(foo, arguments); 9、Symbol是什么，有什么作用？ Symbol是ES6引入的第七种原始数据类型（说法不准确，应该是第七种数据类型，Object不是原始数据类型之一，已更正），所有Symbol()生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。对象中Symbol()属性不能被for...in遍历，但是也不是私有属性 10、Set是什么，有什么作用？ Set是ES6引入的一种类似Array的新的数据结构，Set实例的成员类似于数组item成员，区别是Set实例的成员都是唯一，不重复的。这个特性可以轻松地实现数组去重 11、Map是什么，有什么作用？ Map是ES6引入的一种类似Object的新的数据结构，Map可以理解为是Object的超集，打破了以传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object。可以更加全面的描述对象的属性 12、Proxy是什么，有什么作用？ Proxy是ES6新增的一个构造函数，可以理解为JS语言的一个代理，用来改变JS默认的一些语言行为，包括拦截默认的get/set等底层方法，使得JS的使用自由度更高，可以最大限度的满足开发者的需求。比如通过拦截对象的get/set方法，可以轻松地定制自己想要的key或者value。下面的例子可以看到，随便定义一个myOwnObj的key,都可以变成自己想要的函数` function createMyOwnObj() { //想把所有的key都变成函数，或者Promise,或者anything return new Proxy({}, { get(target, propKey, receiver) { return new Promise((resolve, reject) => { setTimeout(() => { let randomBoolean = Math.random() > 0.5; let Message; if (randomBoolean) { Message = `你的${propKey}运气不错，成功了`; resolve(Message); } else { Message = `你的${propKey}运气不行，失败了`; reject(Message); } }, 1000); }); } }); } 1234567891011121314151617181920let myOwnObj = createMyOwnObj(); myOwnObj.hahaha.then(result => { console.log(result) //你的hahaha运气不错，成功了 }).catch(error => { console.log(error) //你的hahaha运气不行，失败了 }) myOwnObj.wuwuwu.then(result => { console.log(result) //你的wuwuwu运气不错，成功了 }).catch(error => { console.log(error) //你的wuwuwu运气不行，失败了 }) 1234567891011121313、Reflect是什么，有什么作用？ Reflect是ES6引入的一个新的对象，他的主要作用有两点，一是将原生的一些零散分布在Object、Function或者全局函数里的方法(如apply、delete、get、set等等)，统一整合到Reflect上，这样可以更加方便更加统一的管理一些原生API。其次就是因为Proxy可以改写默认的原生API，如果一旦原生API别改写可能就找不到了，所以Reflect也可以起到备份原生API的作用，使得即使原生API被改写了之后，也可以在被改写之后的API用上默认的API 14、Promise是什么，有什么作用？ Promise是ES6引入的一个新的对象，他的主要作用是用来解决JS异步机制里，回调机制产生的“回调地狱”。它并不是什么突破性的API，只是封装了异步回调形式，使得异步回调可以写的更加优雅，可读性更高，而且可以链式调用 15、Iterator是什么，有什么作用？(重要) Iterator是ES6中一个很重要概念，它并不是对象，也不是任何一种数据类型。因为ES6新增了Set、Map类型，他们和Array、Object类型很像，Array、Object都是可以遍历的，但是Set、Map都不能用for循环遍历，解决这个问题有两种方案，一种是为Set、Map单独新增一个用来遍历的API，另一种是为Set、Map、Array、Object新增一个统一的遍历API，显然，第二种更好，ES6也就顺其自然的需要一种设计标准，来统一所有可遍历类型的遍历方式。Iterator正是这样一种标准。或者说是一种规范理念就好像JavaScript是ECMAScript标准的一种具体实现一样，Iterator标准的具体实现是Iterator遍历器。Iterator标准规定，所有部署了key值为[Symbol.iterator]，且[Symbol.iterator]的value是标准的Iterator接口函数(标准的Iterator接口函数: 该函数必须返回一个对象，且对象中包含next方法，且执行next()能返回包含value/done属性的Iterator对象)的对象，都称之为可遍历对象，next()后返回的Iterator对象也就是Iterator遍历器//obj就是可遍历的，因为它遵循了Iterator标准，且包含[Symbol.iterator]方法，方法函数也符合标准的Iterator接口规范。 //obj.[Symbol.iterator]() 就是Iterator遍历器 let obj = { data: [ 'hello', 'world' ], [Symbol.iterator]() { const self = this; let index = 0; return { next() { if (index < self.data.length) { return { value: self.data[index++], done: false }; } else { return { value: undefined, done: true }; } } }; } }; 123456789101112131415161718192021 ES6给Set、Map、Array、String都加上了[Symbol.iterator]方法，且[Symbol.iterator]方法函数也符合标准的Iterator接口规范，所以Set、Map、Array、String默认都是可以遍历的 //Array let array = ['red', 'green', 'blue']; array[Symbol.iterator]() //Iterator遍历器 array[Symbol.iterator]().next() //{value: "red", done: false} 1234//String let string = ‘1122334455’; string[Symbol.iterator]() //Iterator遍历器 string[Symbol.iterator]().next() //{value: “1”, done: false} //set let set = new Set([‘red’, ‘green’, ‘blue’]); set[Symbol.iterator]() //Iterator遍历器 set[Symbol.iterator]().next() //{value: “red”, done: false} //Map let map = new Map(); let obj= {map: ‘map’}; map.set(obj, ‘mapValue’); map[Symbol.iterator]().next() {value: Array(2), done: false} 12345678910111213141516、for…in 和for…of有什么区别？ 如果看到问题十六，那么就很好回答。问题十六提到了ES6统一了遍历标准，制定了可遍历对象，那么用什么方法去遍历呢？答案就是用for...of。ES6规定，有所部署了载了Iterator接口的对象(可遍历对象)都可以通过for...of去遍历，而for..in仅仅可以遍历对象 这也就意味着，数组也可以用for...of遍历，这极大地方便了数组的取值，且避免了很多程序用for..in去遍历数组的恶习17、Generator函数是什么，有什么作用？ 如果说JavaScript是ECMAScript标准的一种具体实现、Iterator遍历器是Iterator的具体实现，那么Generator函数可以说是Iterator接口的具体实现方式。执行Generator函数会返回一个遍历器对象，每一次Generator函数里面的yield都相当一次遍历器对象的next()方法，并且可以通过next(value)方法传入自定义的value,来改变Generator函数的行为。Generator函数可以通过配合Thunk 函数更轻松更优雅的实现异步编程和控制流管理。18、async函数是什么，有什么作用？ async函数可以理解为内置自动执行器的Generator函数语法糖，它配合ES6的Promise近乎完美的实现了异步编程解决方案 19、Class、extends是什么，有什么作用？ ES6 的class可以看作只是一个ES5生成实例对象的构造函数的语法糖。它参考了java语言，定义了一个类的概念，让对象原型写法更加清晰，对象实例化更像是一种面向对象编程。Class类可以通过extends实现继承。它和ES5构造函数的不同点 类的内部定义的所有方法，都是不可枚举的 ///ES5 function ES5Fun (x, y) { this.x = x; this.y = y; } ES5Fun.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; } var p = new ES5Fun(1, 3); p.toString(); Object.keys(ES5Fun.prototype); //['toString'] 1234567891011//ES6 class ES6Fun { constructor (x, y) { this.x = x; this.y = y; } toString () { return ‘(’ + this.x + ', ’ + this.y + ‘)’; } } Object.keys(ES6Fun.prototype); //[] 123456789101112ES6的class类必须用new命令操作，而ES5的构造函数不用new也可以执行。ES6的class类不存在变量提升，必须先定义class之后才能实例化，不像ES5中可以将构造函数写在实例化之后。ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。20、module、export、import是什么，有什么作用？ module、export、import是ES6用来统一前端模块化方案的设计思路和实现方案。export、import的出现统一了前端模块化的实现方案，整合规范了浏览器/服务端的模块化方法，用来取代传统的AMD/CMD、requireJS、seaJS、commondJS等等一系列前端模块不同的实现方案，使前端模块化更加统一规范，JS也能更加能实现大型的应用程序开发。import引入的模块是静态加载（编译阶段加载）而不是动态加载（运行时加载）。import引入export导出的接口值是动态绑定关系，即通过该接口，可以取到模块内部实时的值21、日常前端代码开发中，有哪些值得用ES6去改进的编程优化或者规范？ 常用箭头函数来取代var self = this;的做法。常用let取代var命令。常用数组/对象的结构赋值来命名变量，结构更清晰，语义更明确，可读性更好。在长字符串多变量组合场合，用模板字符串来取代字符串累加，能取得更好地效果和阅读体验。用Class类取代传统的构造函数，来生成实例化对象。在大型应用开发中，要保持module模块化开发思维，分清模块之间的关系，常用import、export方法。22、ES6的了解 新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念 23、说说你对Promise的理解 依照 Promise/A+ 的定义，Promise 有四种状态： pending: 初始状态, 非 fulfilled 或 rejected.fulfilled: 成功的操作.rejected: 失败的操作.settled: Promise已被fulfilled或rejected，且不是pending另外， fulfilled 与 rejected 一起合称 settledPromise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算24、Promise 的构造函数 构造一个 Promise，最基本的用法如下：var promise = new Promise(function(resolve, reject) { <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// succeed</span> <span class="token function">resolve</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// fails</span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token function">Error</span><span class="token punctuation">(</span>errMessage<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 123456789101112Promise 实例拥有 then 方法（具有 then 方法的对象，通常被称为thenable）。它的使用方法如下： promise.then(onFulfilled, onRejected) 1接收两个函数作为参数，一个在 fulfilled 的时候被调用，一个在rejected的时候被调用，接收参数就是 future，onFulfilled 对应 resolve, onRejected 对应 reject 什么是 Promise ？ Promise 就是一个对象，用来表示并传递异步操作的最终结果Promise 最主要的交互方式：将回调函数传入 then 方法来获得最终结果或出错原因Promise 代码书写上的表现：以“链式调用”代替回调函数层层嵌套（回调地狱）解构赋值： 只要判定了等号两边的模式相同（解构），左边的变量就会被赋予对应的值（赋值），以前一次给一个变量赋值，解构赋值可以一次性给多个变量进行赋值。 25、谈一谈你了解ECMAScript6的新特性？ 块级作用区域 let a = 1;可定义常量 const PI = 3.141592654;变量解构赋值 var [a, b, c] = [1, 2, 3];字符串的扩展(模板字符串) var sum =${a + b};数组的扩展(转换数组类型) Array.from($('li'));函数的扩展(扩展运算符) [1, 2].push(...[3, 4, 5]);对象的扩展(同值相等算法) Object.is(NaN, NaN);新增数据类型(Symbol) let uid = Symbol('uid');新增数据结构(Map) let set = new Set([1, 2, 2, 3]);for…of循环 for(let val of arr){};Promise对象 var promise = new Promise(func);Generator函数 function* foo(x){yield x; return x*x;}引入Class(类) class Foo {}引入模块体系 export default func;引入async函数[ES7]async function asyncPrint(value, ms) { await timeout(ms); console.log(value) } 1234 26、Object.is() 与原来的比较操作符 =、 的区别？ == 相等运算符，比较时会自动进行数据类型转换=== 严格相等运算符，比较时不进行隐式类型转换Object.is 同值相等算法，在 === 基础上对 0 和 NaN 特别处理+0 === -0 //true NaN === NaN // false 12Object.is(+0, -0) // false Object.is(NaN, NaN) // true 27、什么是 Babel Babel 是一个 JS 编译器，自带一组 ES6 语法转化器，用于转化 JS 代码。 这些转化器让开发者提前使用最新的 JS语法(ES6/ES7)，而不用等浏览器全部兼容。Babel 默认只转换新的 JS 句法(syntax)，而不转换新的API。

开发者学堂课程【【名师课堂】Java 零基础入门：Java 的数据类型划分（数据类型划分）】学习笔记，与课程紧密联系，让用户快速学习知识。课程地址：https://developer.aliyun.com/learning/course/370/detail/4404Java 的数据类型划分（数据类型划分） 内容简介：1、数据类型的两大类2、什么叫数据类型 Java的数据类型划分以及数据类型操作，程序就是一场数字游戏。好比加工肉品，一批原料进来了，怎么加工，分几步骤能加工的更好，这就是程序。 1、在 Java 之中，数据类型一共分为两大类：基本数据类型：-数值型：表示整数或小数-整型：byte, short，int, long；  → 默认值：0；-浮点型：float, double；       →默认值：0.0-字符型：char；                  →默认值：`\u0000|`-布尔型：boolean；                →默认值：false引用数据类型：数组，类，接口      →    null对于这几种类型而言，每种数据一个类型都有它的默认值，这个默认值在有些环境下是起作用的，必须清楚，整形的默认值一定就是0，在c++中，他是没有固定值的。浮点型的默认值为0.0，继续往下看，字符型的默认值是`\u0000|`，以及布尔型的默认值为 false,下一个为 null。这个就是给出的数据类型的划分，要必须知道哪种数据类型默认值。 2、什么叫数据类型，如图：这就是每种数据类型它能够包含的数据量是多大，如果学过 c 语言，可能会记得42768，42767，c中的整型是-42768~42467，但是这个数据在 Java 中是完整性。一个是byte,-128~128，第二个是 int，-2147483648~2147483647，只要记住是一堆数字就可以。除此之外，我们再来看double的保存范围，通过对比，可以看到 double 是最大的。对于以上的数据类型选择，给出如下的几个选用原则，l   在程序开发之中表示整数就使用 int，假设表示一个年龄，那他就不可能超过 int，这个用来表示工资也足够。l   描述小数就使用 double，Java 中默认小数，正常来讲，内存严苛的情况下，才会斤斤计较这个数据量，为了程序好写，所以建议用 double。l   Long 这种数据类型一般会描述日期时间，内存或文件大（字节）；实际上，在程序中，看见 long，大部分情况下日期是真的比较高的，还有一个，内存或文件大小也用 long，比如几个g的电影有4294967296个字节， 所以程序中文字数据大小都用字节表示。l   如果需要进行编码转换或者进行二进制数据传输，使用 byte(-128~127)l   Char 一般在描述中文的时候使用到（基本上都会忽略）。l   Boolean 在描述程序逻辑的时候使用。最重要的就是前三个，其他的就是很简单的操作。所以，short，float，这种很低的类型有印象就好。

开发者学堂课程【7天玩转云服务器：轻松复用你搭建好的环境和应用--镜像管理】学习笔记，与课程紧密联系，让用户快速学习知识。课程地址：https://developer.aliyun.com/learning/course/394/detail/5028轻松复用你搭建好的环境和应用--镜像管理内容介绍1、镜像有作用2、创建镜像 1、镜像有作用镜像是云服务器 ECS 实例运行环境的模板, - -般包括操作系统和预装的软件。可以使用镜像创建新的 ECS 实例和更换 ECS 实例的系统盘。 云服务器 ECS 提供了以下灵活多样的方式让您方便的获取镜像:●选择阿里云官方提供的公共镜像(支持 Linux 和 Windows 的多个发行版本)●去镜像市场选择第三E方服务商( ISV )提供的镜像●根据现有的云服务器 ECS 实例创建自定义镜像●选择其他阿里云用户共享给您的镜像●可以把线下环境的镜像文件导入到 ECS 的集群中生成一个自定义镜像。还可以把自定义镜像复制到其他地域,实现环境和应用的跨地域一致性部署。 2、创建镜像复制、共享与导入镜像，使用云市场镜像。

开发者学堂课程【大数据之 R 语言速成与实战：R 实列—预测海藻数量之数据预处理】学习笔记，与课程紧密联系，让用户快速学习知识。课程地址：https://developer.aliyun.com/learning/course/363/detail/4345R 实列—预测海藻数量之数据预处理 目录一、数据缺失处理二、处理缺失值常见的的策略三、观察缺失值四、如何处理缺失值 一、 数据缺失处理在许多水样中，一些变量含有缺失值。这种情形在现实问题中非常普遍这会导致不能处理缺失值的分析方法无法应用。 二、 处理缺失值通常有以下几种常见的策略：1、见含有缺失值的记录剔除2、根据变量之间的相关关系填补缺失值;3、根据案列之间的相似性填补缺失值。三、 观察缺失值导入数据 ：> 1ibrary(DMwR)L oading required package: latticeL oading required package: gridwarning message :package ‘DMwR’was built under R version 3.2.5x通过函数：agae[lcomplete. cases(algae),]|可以把含有缺失值的记录提取出来含有是十六条缺失值含有多缺失值的寻找方法用函数：manyNAs（algae）可以反馈出来：【1】 02 19判断缺失值多少：manyNAs（algae,0.2）中0.2的意思如果他的属性缺失的属性超过所有属性的百分之二十我们就能把他提取出来. 四、如何处理这些缺失值1、把有缺失值的记录删除，分析方法就不存在报错2、根据变量之间的相关关系来填补缺失值，列如第一个字段和第二个字段他们的相关性比较高达到 1，我们就可能找到他们的相关函数 比如 a1 是齐全的 a2 是缺失的 我们就可以通 a1 相关函数计算出 a23、案例之间的相似性来填补实例：方法一：对计数值多的后面输入：> X <- algae> y <. OITLCXJ1-.211 17.47得到的y就是没有缺失值改为> y[! complete. cases (y) 得到就是不含缺失值的（这种就是直接删除）方法二：先找相关变量关系：输入 cor(algae[，4:18] , ， use=”comp lete. obs"|可以得到第四个字和第十八个字之间的相关关系如果结果看不清楚就可以输入：> symnum(cor(a1gae[4:18]，use="complete. obs"))，使结果可视化 相关性就变得特别高大概看出 po4 与 opo4 属性相似最近接1 就可以用一个推另一个获取他们的相关性：> x <- algae [-manyNAs (algae)， ] 1m(P04~oP04，data=x) 公式：PO4=42.897+1.293xOPO4，以计算结果方法三：两百条记录比较 求他们距离值，比如采取欧式句，相同的字段做减法再开平方根，可以得出不同的平记录数之间的差值 ，把差值最小的依次排序得到最相近的十条记录，有些记录不齐全的，不存在缺失值， 有些是有少缺失，那么我们就把有缺失值的所在的字段，列外的一些存在的值求他们的中位数。就是某些字段他们之间相似就可以来填补缺失值

开发者学堂课程【大数据之 R 语言速成与实战：R 实例——预测海藻数量之模型的精简和调优】学习笔记，与课程紧密联系，让用户快速学习知识。课程地址：https://developer.aliyun.com/learning/course/363/detail/4347R 实例——预测海藻数量之模型的精简和调优 目录一、精简回归模型二、后消元法操作 一、 精简回归模型1．查某些系数的显著性，可能会质疑有些变量是否应该进入模型中2．后消元法（anova（））来精简回归模型，根据的是模型残差平方和的变化 二、后消元法操作函数> summary(1m. a1D查看模型里面的相关信息得到R-squared: 0. 3205值是不理想的 用向后消元法> anova(1m. a1) 在对模型进行更改>1m2.alupdate(1m.a1，。~season)> summary(1m2Ia1)  精度提高 再去掉Chla 1 391 390. 51. 2712 0. 2609903  R平方提高。为了简便向后消元法输入函数> fina1.1m <- step(1n. a1)|能不断地进行向后消元 然后得到一个很好预测精度的提升3302 如果还想获得跟好的预测精度，可以选择回归度预测模型，提升整体预测精度

开发者学堂课程【大数据之R语言速成与实战：R 的高级数据管理--字符处理函数】学习笔记，与课程紧密联系，让用户快速学习知识。课程地址：https://developer.aliyun.com/learning/course/363/detail/4337R的高级数据管理--字符处理函数目录：一、字符处理函数与其他实用函数二、将函数应用于矩阵和数据框 一、字符处理函数与其他实用函数字符处理函数：可以从文本型的数据，抽取他的信息。Nchar(统计变量中含的数量）>nchar(“abcde”)  5（所含数量个数）>substr(“abcde”, 3, 5)“cde”>grep(“a”,c(“a”,”b”,”a”,”c”))在字符abac搜索a的位置1 3Snb（在变量中搜索字符，并替换成目标字符）>sub(“a”,”A”,”abcde”)”abcde”Strsplit（将字符分割）>strsplit(“abcde”,”c”)[[1]]”ab” “de”>strsplit(“abcde”,””)（将字符单独分开）[[1]]”a” “b” “c” “d” “e”Paste（将字符连接）>paste(“Today is”,”Friday”)”Today is Friday”Toupper（大小写转换）>toupper(“abc”)”ABC”>tolower(“ABC”)”abc”Length（获取字符个数）>length(c(2,3,4,5))4Seq（生成一个序列）>seq(1,10,2)[1]1 3 5 7 9Rep（将字符重复）>rep(1:3, 3)[1]1 2 3 1 2 3 1 2 3Cat（将一些信息输出出来）>cat(“Hello”,”Tom!”)Hello Tom! 二、将函数应用于矩阵和数据框针对一个矩阵和数据框>a<-c(1.234 , 2.345, 3.456) >round(a)1 2 3>b<-matrix(runif(12),nrow=3)生成一个矩阵>mean(b)（将所有元素结合起来求平均值）0.527788> >c <-matrix(rnorm(30), nrow=6)>c>apply(c,1, mean)（将任意一个函数运用到任何一个维度上）[1]-0.2377158  0.1291768 0.3024754  -0.2735020  -0.4005328[6]-0.4465010>apply(c,2, mean)0.2630618  -0.7329046 -0.1738358  0.3727796  -0.5012674>lapply  aspply （针对列表）

前言对于一名前端工程师来说，meta标签是再熟悉不过了。初学前端时，写的最多的就是下面的这句了👨🏻‍💻：<meta charset="UTF-8" />但是大多数前端er对meta的认识基本上就止步于此了，不要小看它，小标签却能实现大功能。这篇文章就来带着大家一起重新认识下常常被我们忽略的 meta 标签吧💪什么是 metameta 是 html 语言 head 区的一个辅助性标签，位于文档的头部，不包含任何内容，其属性定义了与文档相关联的名称/值对。meta 元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。meta标签共有两个属性，它们分别是 http-equiv 属性和 name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。几乎所有的网页里，我们可以看到类似下面这段的 html 代码：<head> <meta http-equiv="content-Type" content="text/html; charset=gb2312" /> </head>也许你认为这些代码可有可无。其实如果你能够用好 meta 标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。meta 中的 name 属性name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。meta 标签的 name 属性 语法格式 :<meta name="参数" content="具体的参数值"/>其中 name 属性主要有以下几种参数：keywords(关键词)keywords 用来告诉搜索引擎你网页的关键字是什么。<meta name ="keywords" content="公众号,前端开发爱好者,前端技术分享,视频教程资源,前端学习"/>description(网站内容的描述)description 用来告诉搜索引擎你的网站主要内容。<meta name="description" content="前端开发爱好者是一个分享前端技术资源的公众号"/>viewport(移动端的窗口)大多数前端工程师都会称之为视口,这个属性常用于设计移动端网页,可以让开发者来控制网页的大小和缩放meta viewport 的 6 个属性:width ：设置 viewport 的宽度，默认视口宽度height：设置 viewport 的高度initial-scale：设置页面的初始缩放值minimum-scale：允许用户的最小缩放值maximum-scale：允许用户的最大缩放值user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许<meta name="viewport" content="width=device-width, initial-scale=1"/>robots(定义搜索引擎爬虫的索引方式)robots 用来告诉爬虫哪些页面需要索引，哪些页面不需要索引<meta name="robots" content="none"/>content 具体参数如下：none: 搜索引擎将忽略此网页，等价于 noindex，nofollow。noindex: 搜索引擎不索引此网页。nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。all: 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于 index，follow。index: 搜索引擎索引此网页。follow: 搜索引擎继续通过此网页的链接索引搜索其它的网页。author(作者)用于标注网页作者<meta name="author" content="前端开发爱好者.xy"/>generator(网页制作软件)用于标明网页是什么软件做的<meta name="generator" content="Vscode"/>copyright(版权)用于标注版权信息// 表示是 xy 个人版权 <meta name="copyright" content="xy"/>revisit-after(搜索引擎爬虫重访时间)如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问<meta name="revisit-after" content="30 days" />meta 中的 http-equiv 属性http-equiv 顾名思义，相当于 http 的文件头作用。它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为 content，content 中的内容其实就是各个参数的变量值。meta 标签的 http-equiv 属性语法格式是：<meta http-equiv="参数" content="参数变量值"/>其中 http-equiv 属性主要有以下几种参数：content-Type（显示字符集的设定）用于设定网页字符集，便于浏览器解析与渲染页面//旧的HTML，不推荐 <meta http-equiv="content-Type" content="text/html;charset=utf-8"/> //HTML5设定网页字符集的方式，推荐使用UTF-8 <meta charset="utf-8"/>Expires（期限）用于设定网页的到期时间，过期后网页必须到服务器上重新传输。必须使用 GMT 的时间格式。<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />Pragma(cache 模式）禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访问者将无法脱机浏览。<meta http-equiv="Pragma" content="no-cache"/>Refresh（刷新）网页将在设定的时间内，自动刷新并调向设定的网址// 2s 刷新跳转到百度 <meta http-equiv="refresh" content="2；URL=https://www.baidu.com/"/>Set-Cookie(cookie 设定）如果网页过期，那么这个网页存在本地的 cookies 也会被自动删除<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/"/>Window-target（显示窗口的设定）强制页面在当前窗口以独立页面显示<meta http-equiv="Window-target" content="_top"/>content-Language（显示语言的设定）<meta http-equiv="Content-Language" content="zh-cn" />imagetoolbar(图片工具栏)指定是否显示图片工具栏，当为 false 代表不显示，当为 true 代表显示。<meta http-equiv="imagetoolbar" content="false" />meta 动画效果说到动画，大多数人肯定会想到 css3 动画以及使用 js，canvas 等实现动画，如果我告诉你，meta 也可以实现动画效果，你信吗 ？？？使用meta标签，我们还可以在进入网页或者离开网页的一刹那实现动画效果，我们只要在页面的 html 代码中的<head></head>；标签之间添加如下代码就可以了：<meta http-equiv="Page-Enter" content="revealTrans(duration=5.0,transition=20)"/>一旦上述代码被加到一个网页中后，我们再进出页面时就会看到一些特殊效果，但我们要注意的是所加网页不能是一个Frame页网页特效的http-equiv属性值，分别有Page-Enter、Page-Exit、Site-Enter、Site-Exit四大类型，如以下代码所示：<meta http-equiv="Page-Enter" content="进入时的过渡效果" /> <meta http-equiv="Page-Exit" content="退出时的过渡效果" /> <meta http-equiv="Site-Enter" content="进入时的过渡效果" /> <meta http-equiv="Site-Exit" content="退出时的过渡效果" />content属性值:blendTrans(Duration=秒数)：如果用在进入页面时是淡入过渡效果；如果用在退出页面时是淡出过渡效果，但只能设置过渡持续时间，单位是秒revealtrans(duration=过渡持续时间的秒数，transition=过渡效果的类型）：duration：设置过渡持续时间(以秒为单位)，transition 设置使用哪一类型的过渡效果，它有 24 种类型的过渡效果。24种过度效果：transition 的取值是 0—23，数字从 0 开始到 23 结束，一种是 24 种过渡效果，每一个数字都对应一个过渡效果用法举例：<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)" />以上设置的是网页进入(Page-Enter)时的过渡效果，所以，就是淡入过渡效果进入网页。<meta http-equiv="Page-Enter" content="revealtrans(duration=2，transition=0"/>这段代码中transition=0，表示以矩形收缩的过渡效果进入网页，duration=2，则表示过渡持续时间为 2 秒钟；再比如，如果使用矩形扩张过渡效果，则只需要设置transition=1即可，因为数字 1 表示的就是矩形扩张过渡效果，代码如下:<meta http-equiv="Page-Enter" content="revealtrans(duration=2，transition=1"/>还可以使用圆形收缩过渡效果，对应的数字是 2，代码如下：<meta http-equiv="Page-Enter" content="revealtrans(duration=2，transition=2"/>以此类推，想要设置什么过渡效果就设置相对应的数值即可。

前言经常有同学会问我，学到什么程度可以找到一份前端工作，或者会问如何入门前端，学习到什么程度可以胜任业务开发以及前端如何进阶等问题。别急！！！下面我们来把前端学习分为几个阶段，帮助你如何从一个小白成为前端大佬。每个阶段会附上每个阶段的学习资源，请大家认真仔细阅读哦 📚。重要提醒：能自学的小伙伴真的不建议大家报班学习！！！前端入门工欲善其事，必先利其器。⭐️ 前端开发必备工具：Vscode:95%前端都在用的开发工具Chrome:谷歌浏览器，对开发者友好FastStone Capture:非常好用的吸色工具......⭐️ 学习记笔记：前端知识点非常繁杂，需要做笔记。这里推荐大家使用 Markdown 语法来做笔记。也可以根据自己的爱好使用在线版的笔记工具，这里不做过多推荐。Markdown:多平台支持、轻量化、易读易写。对后期想要自己写博客的同学有很大的帮助，学习语法地址：http://markdown.p2hp.com/basic-syntax/⭐️ 前端三件套：基础三件套:HTML,CSS,JS，建议从实战开始，边学边练，培养兴趣，快速入门。HTML,CSS学习：推荐 pink 老师的前端入门教程 https://www.bilibili.com/video/BV14J4114768🎯 目标：学完以上的课程可以自己尝试去模仿一个网站的页面巩固HTML,CSS基本功js基础学习：pink 老师的也不错 https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.8🎯 目标：学完以上的课程，可以自己动手开发一个商城类型的网站。做一些本地数据的增删改查，尽可能的多运用js,巩固 js 基础。HTML5,CSS3学习:这个也是重点，而且初级前端面试好像特别喜欢问这个⭐️ 语义化标签⭐️ 浏览器支持⭐️ 多媒体标签⭐️ Canvas 画布⭐️ 本地存储⭐️ 媒体查询⭐️ Flex 布局⭐️ Grid 布局⭐️ 瀑布流⭐️ 响应式布局⭐️ 动画⭐️ 过渡⭐️ 2D / 3D 转换⭐️ ajax 请求ajax学习：ajax 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON 格式的数据，XML 格式已经过时了。学习推荐文档：http://javascript.ruanyifeng.com/bom/ajax.html🎯 目标：学完 ajax,可以尝试去调用后端接口获取数据，没有接口的同学可以找一些开放的 api 调用，这里百度就可以找到了。基础进阶有些同学喜欢看书，但是市面上的书千千万万，这里推荐三本比较适合前期学习想要巩固下基础知识的同学：《JavaScript 高级程序设计》《JavaScript 忍者秘籍》《JavaScript设计模式与开发实践》📚 想要这三本书电子版的同学可以到我的公众号内回复 js书籍 即可免费无套路获取⭐️ js高级进阶强烈 ❗ 建议看下这个：https://ke.qq.com/course/231577?taid=1464811481434265(7-12 节讲的递归，预编译,作用域、作用域链精解，立即执行函数，闭包,原型，原型链，call/apply，继承模式，命名空间，对象枚举) 我刚开始学习的时候也是看的这个，讲的很不错！！！⭐️ ES6新特性❗❗❗这个也是重点中的重点，可以看阮一峰的教程https://es6.ruanyifeng.com/⭐️ 浏览器前端开发1000%的时间都是在和浏览器打交道,必须要了解它浏览器 DOM 事件流 / 事件委托⭐️ 浏览器加载顺序⭐️ 浏览器渲染过程浏览器事件循环浏览器同源策略❗ 跨域解决方案浏览器缓存控制台调试技巧⭐️ HTTP和后端交互避免不了，也是必学1xx 信息2xx 成功3xx 重定向4xx 客户端错误5xx 服务器错误HTTP 1.0⭐️ HTTP 1.1HTTP 2HTTP 3❗ HTTP 请求过程常见 HTTP 协议⭐️ HTTP 请求类别⭐️ 常见状态码WebSocket⭐️ CookieSession⭐️ HTTPS⭐️Git 版本控制这个也是重点，不管到哪个公司都是必会的,常用命令如下，也可以看这篇文章《我在工作中是如何使用 git 的》：https://mp.weixin.qq.com/s/gdqVcrrY3h948UMGlfF3qAgit initgit clonegit statusgit loggit addgit diffgit commitgit resetgit branchgit checkoutgit mergegit pullgit push.....前端框架学习为什么要学习框架？？？因为框架可以提高我们的开发效率、简化代码的复杂度。⭐️ CSS 框架⭐️ Less⭐️ Sass⭐️ Stylus⭐️ Tailwind CSS(推荐学习)Less,Sass,Stylus 不能算是框架吧，可以归纳为 css 预处理器。三者语法类似，学习一种使用其它基本上结合文档能够运用。Tailwind 是一个用于快速 UI 开发的实用工具集 CSS 框架，设计理念是以实用为先，它提供了高度可组合的应用程序类，可帮助开发者轻松构建复杂的用户界面。它还提供了一个从实用模式中提取组件的工具，响应式风格可以满足不同设备上的开发。⭐️ javaScript 框架(找工作必备)这里主要介绍 Vue React 两个框架，这两个是目前使用最多的框架。Angular目前不推荐，使用的公司寥寥无几，还有就是后起之秀Svelte,起码初学者目前不建议学习吧⭐️Vue⭐️React⭐️ Vue 学习经常听到有人说Vue全家桶,那我们就来说说这个全家桶都包含了什么吧先来说说Vue2.x:Vue 全家桶Vue (整体架构)Vue Router (路由)Vuex (状态管理)axios (请求库)less/scss (css 预处理器)Element UI (非常流行的 PC 端 UI 框架库)同时，在初始化项目时候，比较推荐 Vue Cli Serve, 以上只能算是大多数公司比较常用的配置了。实战教程：Vue2.x 由于已经出来很久了，所以市面上的教程比较多，小白的话可以到 B 站搜索一个基础+实战的视频，这里不做过多的推荐.其实本人更推荐直接看官方文档以及看一些技术文档，上手更快一些Vue3：可以说是今年比较火热的了，早在去年 Vue 还是 rc 版本的时候就拿来搭建过一个项目，但是由于时间有点久远有点忘记了，但是没事，这里推荐一门针对 Vue3.0 的实战教程《vue3.0+ts仿知乎专栏企业级项目》，需要的关注我的公众号回复【Vue 实战】即可获取哦⭐️ React 学习React 全家桶这里再来介绍两个 React 的状态管理库：Dvajs Mobx,为什么要推荐这两个库，用过 redux 的人都知道，完整的一套写下来，要写还多代码，而这两个库就是专门简化它的，目前也是使用比较多的。React (整体架构)react-route (路由)redux (状态管理)axios (请求库)redux-saga (redux 中间件)less/scss (css 预处理器)Ant Design (蚂蚁 UI 框架库，90% react 开发都使用这个)react hook 目前开发主流，必看❗❗❗重点来了，重磅级实战教程：《React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目》,废话不多说，公众号后台回复【react 实战】即可获取完整教程⭐️ umi (非常推荐)：插件化的企业级前端应用框架，有哪些优点：Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集同时支持配置式路由和约定式路由......⭐️⭐️⭐️⭐️⭐️ 目前本人所在的公司就是使用的这一套框架，非常推荐使用。学过 react 全家桶的同学，学习 umi 可以说是很轻松，完全看文档就能驾驭得了。使用hooks开发的同学这里推荐两个非常好用的hooks库：ahooks react-use，想要了解更多推荐看这篇文章《130+ Hooks,解锁React Hooks使用的正确姿势》-https://mp.weixin.qq.com/s/87HPw1vs9smsfgEUGpWF8Q⭐️ TypeScript 学习TypeScript是什么？如果你还不知道的话真的就 Out 了，目前 Vue3.0 React 都可以使用 TypeScript 来开发，而且使用度非常高，前端必备。TypeScript 教程目前也有很多，这里挑选了两个比较好的教程，可以直接到我的公众号主页菜单中就可以获取或者回复【ts】即可获取视频教程⭐️ 可视化最近几年可视化真的太火了，有不少公司都是专门做这块，这里推荐几个比较好用的可视化框架：可视化:⭐️AntV⭐️echarts (很推荐学习)highchartsD3.js⭐️threejs (三维可视化)⭐️cesiums (地理信息可视化)⭐️ 服务端渲染VueNuxt.js入门：https://www.bilibili.com/video/BV1Xt41117KgReactNext.js入门：https://www.bilibili.com/video/BV13441117KKVue React 这两个框架任意会一种, js 基础再学的好点,⭐️ 恭喜你 ⭐️ 基本上可以找到一份很不错的工作了。中级前端进阶⭐️ 打包构建工具：前端资源打包压缩编译等⭐️webpack(重点)Vite(https://vitejs.cn/)Rollup📚 ⭐️webpack官网：https://webpack.docschina.org/📚 Vite官网：https://vitejs.cn/📚 Vite入门到精通：公众号回复【Vite】获取视频教程⭐️ Nodejs: 一种 javascript 的运行环境，能够使得 javascript 脱离浏览器运行koaexpressegg📚 Node.js 官方教程：http://nodejs.cn/learn📚 Node.js 入门：https://cnodejs.org/getstart📚 ⭐️Node.js+Koa2实战：公众号回复【Node】获取视频教程⭐️ 包管理：用于安装 Node.js 的扩展、工具等。⭐️npm⭐️yarn⭐️pnpm⭐️npx⭐️ 性能优化推荐看下这篇：《9大策略和6大指标 》https://mp.weixin.qq.com/s/rlUlqOgN76W1pZggB16STA⭐️ 数据结构算法⭐️ 时间 / 空间复杂度分析数据结构：数组，字符串，队列，栈，链表，集合，哈希表，二叉树算法：排序，双指针，查找，分治，动态规划，递归，回溯，贪心，位运算，DFS，BFS📚 ⭐️数据结构算法：公众号回复【数据结构算法】获取视频教程⭐️ CI/CDJenkins: 自动化构建工具⭐️ Nginx高性能的HTTP和反向代理web 服务器⭐️ Linux⭐️ 常用命令大前端⭐️ 小程序、多平台开发：uniapp：公众号回复【uniapp】获取教程taro⭐️ 混合开发 App:react-nativeuniappFlutter⭐️ 桌面应用：Electron微前端⭐️ qiankun:推荐看《基于qiankun的微前端最佳实践》https://mp.weixin.qq.com/s/onuOB3nl_eM0OHhZL6fpTQ⭐️ sign-spa以上就是针对前端入门到进阶再进阶的路线了，其实还有很多，这里就不一一讲解。前端路漫漫，各位骚年，你准备好了吗求职面试求职是一个漫长的过程，千万不要为了想要早点上班工作或者为了2-3K薪水的差距而选择了自己不理想的工作。建议结合自身的发展，给自己设定一个长远的目标和计划。📚面试题：⭐️面经汇总：https://www.nowcoder.com/discuss/205497⭐️字节大佬总结的面试题：公众号内回复【面试题】📚3200套简历模板：⭐️简历模板获取：公众号内回复【简历】推荐技术社区这里推荐几个自己比较喜欢看的一些社区平台微信公众号掘金MDNMSDNStackOverflowInfoQGithub...目前我比较喜欢刷这几个，没事在休息的时候刷一刷，还是能提升自己很多知识的积累的👍👍👍

为什么会有 Hook介绍Hooks之前，首先要给大家说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。。但是我们知道，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点，简单列举几条纯函数组件没有状态纯函数组件没有生命周期纯函数组件没有this只能是纯函数这就注定，我们所推崇的函数组件，只能做UI展示的功能，涉及到状态的管理与切换，我们不得不用类组件或者redux，但我们知道类组件的也是有缺点的，比如，遇到简单的页面，你的代码会显得很重，并且每创建一个类组件，都要去继承一个React实例，至于Redux,更不用多说，很久之前Redux的作者就说过，“能用React解决的问题就不用Redux”,等等一系列的话。关于React类组件redux的作者又有话说大型组件很难拆分和重构，也很难测试。业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。组件类引入了复杂的编程模式，比如 render props 和高阶组件。类组件虽然功能齐全却很重，纯函数很轻便却有上文几点重大限制，所以 React 团队设计了 React Hooks,React Hooks 就是加强版的函数组件，我们可以完全不使用 class，就能写出一个全功能的组件Hook 解决了什么问题Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用，或者更愿尝试另一个和 React 有相似组件模型的框架，你都可能对这些问题似曾相识。React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store ）。如果你使用过 React 一段时间，你也许会熟悉一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。如果你在 React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。尽管我们可以在 DevTools 过滤掉它们，但这说明了一个更深层次的问题：React 需要为共享状态逻辑提供更好的原生途径。你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。这使得在组件间或社区内共享 Hook 变得更便捷。官方提供了哪些 Hook如果你刚开始接触 Hook，那么可能需要先自行查看 React 官方文档基础 HookuseSstateuseEffectuseContext额外的 HookuseReduceruseCallbackuseMemouseRefuseImperativeHandleuseLayoutEffectuseDebugValue这篇文章的重点不会对官方 Hook 的使用做过多的讲解，当然，想要用好 Hook，首先要先把官方提供的这些 Hook 学明白，才能在项目开发的时候如鱼得水，其次就是做一些自定义 Hook 的封装，用来提高开发效率当然，项目开发总不能遇到一个功能就去封装一个自定义 Hook ，这里为大家推荐两个比较好用的 Hooks 库: aHooks react-use，这两个库使用在项目开发中真的能大大提高开发效率，可以毫不夸张的说能够降低你的50%的业务代码，告别996什么是 ahooks官网: https://ahooks.js.org/zh-CNahooks 是一个 React Hooks 库，致力提供常用且高质量的 Hooks。在使用之前，你需要掌握 React 及 React Hooks 基础用法。ahooks 是由蚂蚁 umi 团队、淘系 ice 团队以及阿里体育团队共同建设的 React Hooks 工具库。ahooks 基于 React Hooks 的逻辑封装能力，提供了大量常见好用的 Hooks，可以极大降低代码复杂度，提升开发效率。ahooks 致力成为和 antd/fusion 一样的 React 基础设施，帮助开发者在逻辑层面省去大量的重复工作。安装# 安装依赖 npm i ahooks --save # 使用 Hooks import { useRequest } from 'ahooks';有哪些实用 Hooks🔥异步请求useRequest — 一个强大的管理异步数据请求的 Hook。🔥tableuseAntdTable— 封装了常用的 antd Form 与 antd Table 联动逻辑，并且同时支持 antd V3 和 V4。useFusionTable — 封装了常用的 Fusion Form 与 Fusion Table 联动逻辑。🔥视图类的useDrag & useDrop — 一对帮助你处理在拖拽中进行数据转移的 hooksuseDynamicList — 一个帮助你管理列表状态，并能生成唯一 key 的 Hook。useSelections — 常见联动 checkbox 逻辑封装，支持多选，单选，全选逻辑，还提供了是否选择，是否全选，是否半选的状态。useVirtualList — 提供虚拟化列表能力的 Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。🔥副作用useDebounce — 用来处理防抖值的 Hook。useDebounceFn — 用来处理防抖函数的 Hook。useInterval — 一个可以处理 setInterval 的 Hook。useThrottle — 用来处理节流值的 Hook。useThrottleFn — 用来处理节流函数的 Hook。useTimeout — 一个可以处理 setTimeout 计时器函数的 Hook。🔥生命周期useDebounceEffect — 为 useEffect 增加防抖的能力。useMount — 只在组件 mount 时执行的 hook。useThrottleEffect — 为 useEffect 增加节流的能力。useTrackedEffect — 在 useEffect 的基础上，追踪触发 effect 的依赖变化。useUnmount — 只在组件 unmount 时执行的 hook。useUnmountedRef — 获取当前组件是否已经卸载的 hook，用于避免因组件卸载后更新状态而导致的内存泄漏useUpdate — 强制组件重新渲染的 hook。useUpdateEffect — 一个只在依赖更新时执行的 useEffect hook。useUpdateLayoutEffect — 一个只在依赖更新时执行的 useLayoutEffect Hook。🔥状态useUrlState — 一个同步组件内部状态和 query 参数的 hook。useBoolean — 优雅的管理 boolean 值的 Hook。useControllableValue — 使组件的状态即可以自己管理，也可以被外部控制useCookieState — 一个可以将状态持久化存储在 cookie 中的 Hook 。useCountDown — 一个用于管理倒计时的 Hook。useCounter — 一个可以管理 count 的 Hook。useHistoryTravel — 优雅的管理状态变化历史，可以快速在状态变化历史中穿梭 - 前进跟后退。useLocalStorageState — 一个可以将状态持久化存储在 localStorage 中的 Hook 。useMap — 一个可以管理 Map 类型状态的 Hook。useNetwork — 一个可以管理网络连接状态的 Hook。usePrevious — 保存上一次渲染时状态的 Hook。useSessionStorageState — 一个可以将状态持久化存储在 sessionStorage 中的 Hook。useSet — 一个可以管理 Set 类型状态的 Hook。useSetState — 管理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致。useToggle — 用于在两个状态值间切换的 Hook。useWebSocket — 用于处理 WebSocket 的 Hook。useWhyDidYouUpdate — 帮助开发者排查是什么改变导致了组件的 rerender。🔥Dom 相关useClickAway — 优雅的管理目标元素外点击事件的 Hook。useDocumentVisibility — 可以获取页面可见状态的 Hook。useEventListener — 优雅使用 addEventListener 的 Hook。useEventTarget — 常见表单控件(通过 e.target.value 获取表单值) 的 onChange 跟 value 逻辑封装，支持自定义值转换和重置功能。useExternal — 一个用于动态地向页面加载或卸载外部资源的 Hook。useFavicon — 用于设置与切换页面 favicon。useFullscreen — 一个用于处理 dom 全屏的 Hook。useHover — 一个用于追踪 dom 元素是否有鼠标悬停的 Hook。useInViewport — 一个用于判断 dom 元素是否在可视范围之内的 Hook。useKeyPress — 一个优雅的管理 keyup 和 keydown 键盘事件的 Hook，支持键盘组合键，定义键盘事件的 key 和 keyCode 别名输入 。useMouse — 一个跟踪鼠标位置的 Hook。useResponsive — 获取响应式信息。useScroll — 获取元素的滚动状态。useSize — 一个用于监听 dom 节点尺寸变化的 Hook。useTextSelection — 实时获取用户当前选取的文本内容及位置。useTitle — 用于设置页面标题的 Hook。🔥高级 HookuseCreation — 是 useMemo 或 useRef 的替代品，确保实例不会被重新创建。useEventEmitter — 多组件间事件通知。useLockFn — 给异步函数加锁，防止重复调用。usePersistFn — 持久化 function 的 Hook。useReactive — 提供一种数据响应式的操作体验,定义数据状态不需要写 useState , 直接修改属性即可刷新视图。useSafeState — 用法与 React.useState 完全一样，但是在组件卸载后异步回调内的 setState 不再执行，避免因组件卸载后更新状态而导致的内存泄漏。什么是 react-use是一个国外大佬开发，目前 start 25.9K，github 地址: https://github.com/streamich/react-use安装# 安装依赖 npm i react-use --save # 使用 Hooks import { useBattery } from 'react-use';有哪些实用 Hooks🔥传感器useBattery — 跟踪设备电池状态。useGeolocation — 跟踪用户设备的地理位置状态。useHover and useHoverDirty — 跟踪鼠标悬停某个元素的状态。useIdle — 跟踪用户是否处于非活动状态。useKey, useKeyPress, useKeyboardJs, 和 useKeyPressEvent — 追踪按键。useLocation — 跟踪页面导航栏的位置状态。useMedia — 跟踪 CSS 媒体查询的状态。useMediaDevices — 跟踪连接的硬件设备的状态。useMotion — 跟踪设备的运动传感器的状态。useMouse and useMouseHovered — 跟踪鼠标位置的状态。useNetwork — 跟踪用户的互联网连接状态。useOrientation — 跟踪设备屏幕方向的状态。usePageLeave — 当鼠标离开页面边界时触发。useScroll — 跟踪 HTML 元素的滚动位置。useSize — 跟踪 HTML 元素的维度。useStartTyping — 检测用户何时开始输入。useWindowScroll — 跟踪 窗口 滚动位置。useWindowSize — 跟踪 窗口 尺寸。🔥用户界面useAudio — 播放音频并公开其控件。useClickAway — 当用户点击目标区域外时触发回调。useCss — 动态调整 CSS。useDrop and useDropArea — 跟踪文件，链接和复制粘贴。useFullscreen — 全屏显示元素或视频。useSpeech — 从文本字符串合成语音。useVideo — 播放视频，跟踪其状态，以及公开播放控件。useWait — UI 的复杂等待管理。🔥动画效果useRaf — 在每个 requestAnimationFrame 上重新呈现组件。useSpring — 根据弹簧动力学随时间插入数字。useTimeout — 超时后返回true。useTween — 重新渲染组件，同时补间 0 到 1 之间的数字。useUpdate — 返回一个回调，在调用时重新呈现组件。🔥副作用useAsync — 解析一个 async 函数。useAsyncFn — 异步函数的状态管理。useAsyncRetry — useAsync 带有 retry()方法。useBeforeUnload — 当用户尝试重新加载或关闭页面时显示浏览器警报。useCopyToClipboard — 将文本复制到剪贴板。useDebounce — 防抖函数。useFavicon — 设置页面的favicon。useLocalStorage — 管理localStorage中的值。useLockBodyScroll — 锁定body元素的滚动。useSessionStorage — 管理sessionStorage中的值。useThrottle and useThrottleFn — 节流一个函数。useTitle — 设置页面标题。🔥生命周期useEffectOnce — 仅运行一次的修改后的useEffect。useEvent — 订阅事件。useLifecycles — 调用mount和unmount回调。useRefMounted — 跟踪组件是否已挂载。usePromise — 仅在安装组件时解析promise。useLogger — 在组件经历生命周期时登录控制台。useMount — 调用mount回调。useUnmount — 调用unmount回调。useUpdateEffect — 仅在更新时运行一个effect。useDeepCompareEffect — 运行一个effect通过深度比较其依赖项。🔥状态createMemo — memoized hooks的工厂钩子。useGetSet — 返回状态 getter get() 而不是原始状态。useGetSetState — 就像 useGetSet 和 useSetState 有个孩子。useObservable — 跟踪Observable的最新值。useSetState — 创建类似this.setState的setState方法。useToggle and useBoolean — 跟踪布尔值的状态。useCounter and useNumber — 跟踪数字的状态。useList — 跟踪数组的状态。useMap — 跟踪对象的状态。以上介绍的两个 Hooks 库，运用在项目开发中可以说是能够减少你的 50% 业务代码，真的告别996，利用更多的时间来学习新的知识，不要做业务开发的傀儡 🎃当然在我们平时开发过程中，肯定会遇到一些项目中业务逻辑之类的封装或者是以上两个 Hooks 库没有涉及到的场景，这种情况下就需要自己去自定义 Hook 了，千万要记住: 不要因为自己的一时偷懒直接复制代码，复制一时爽，重构火葬场 🔥🔥🔥自定义 Hook官方介绍:自定义 Hook 只是将两个函数之间一些共同的代码提取到单独的函数中。自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性。没错，就是函数和函数之间的逻辑复用，但是必须要遵循 Hook 的设计约定，不遵循的话，由于无法判断某个函数是否包含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。以下是本人封装的以 Modal 的形式来展示错误信息的 Hook，仅供参考:import React, { useState, useEffect } from 'react' import { Modal, Table } from 'antd' import { ColumnsType } from 'antd/es/table' interface IData { message: string } // 截取两个字符串之间字符 function str_substr(start, end, str) { // 获取开始下标和结束下标 let firstIndex = str.indexOf(start) let lastIndex = str.lastIndexOf(end) return str.substring(firstIndex + 1, lastIndex) } const useErrModal = (data: string) => { const [dataSource, setDataSource] = useState<Array<IData>>([]) const tableContainer = () => ( <Table size={'small'} dataSource={dataSource} columns={columns} pagination={false} /> ) const columns: ColumnsType<IData> = [ { title: '错误明细', dataIndex: 'message', key: 'message' } ] // data 数据按照 [, ] 切割,数据事例 : "数据部分导入失败:[第1行数据检验失败原因:税收编码为必填项且必须为19位的有效编码, 第2行数据检验失败原因:税率为必填项且为0开头的小数且小数点后不能超过5位,税收编码为必填项且必须为19位的有效编码]" let splitStr = str_substr('[', ']', data) let arr = splitStr.split(', ') let list = [] arr.map((item, key) => { list.push({ message: item }) }) setDataSource(list) Modal.warning({ title: '错误信息汇总', okText: '确定', content: tableContainer }) } export default useErrModal参考资料[1]ahooks: https://ahooks.js.org/zh-CN[2]react-use: https://github.com/streamich/react-use[3]hooks 详解: https://www.jianshu.com/p/d600f749bb19[4]hooks 官方文档: https://react.docschina.org/docs/hooks-intro.html

大家好，我是前端小菜鸡。去年 React 17 发布的时候，一度被大家吐槽“无新特性”，因为没有添加任何面向开发人员的新功能，而主要侧重于升级简化 React 本身。那么即将到来的 React 18 又有哪些新特性呢？React 官方团队在近日成立了 React 18 工作组，并在6月9日发布了 React 18 发布计划:React 18 Alpha 版本 (现在可用)React 18 Beta 版本 (几个月后)React 18 RC 版本 (几个月后)React 18 正式版本 (RC 版本发布的 2-4 周)目前 alpha 版本已经可以使用，可以从 npm 上拉下来进行查看，只不过需要带上 @alpha 标签：npm install react@alpha react-dom@alphaReact 18 工作组在 alpha 阶段只邀请了社区专家、库作者、开发团队成员参与试用并提供反馈，后期 beta 版本发布会邀请更多人参与讨论。点击链接 https://github.com/reactwg/react-18/discussions可以查看讨论内容。下面我们一起来读一篇文章，了解 React 18 中即将到来的新特性，如果想看原文的话，我把链接放在这里：原文链接：https://yagmurcetintas.com/journal/whats-new-in-react-18了解新特性之前需要知道的几个概念在讨论 React 18 新特性之前，我们先来了解几个概念：Server Side Rendering 、Suspense 、Hydration 。如果你对这些已经非常熟悉，那么就可以跳过这块内容。Server Side Rendering在常规的前端项目中，当浏览器请求页面，服务器会响应一系列的文件，其中包含一个几乎空的 HTML 文档和一个包括了整个应用内容的 bundle.js 。前端应用程序根据用户请求的路由，在 HTML 文档根标签下渲染对应的内容，这被称为客户端渲染 (Client-Side Rendering, CSR) 。在客户端渲染的过程中，浏览器会先渲染空的 HTML 文档，然后解析 bundle.js ，重新渲染应用程序以显示内容。用户首先会看到一个空白页，页面初始加载时间 (即首屏时间) 取决于客户端的网速以及需要下载和解析的 bundle.js 文件的大小。译者注：随着前端应用的复杂度不断提升，如果还将整个应用打包为一份 bundle.js 体积将会非常巨大，无论是加载和解析都非常耗时。实际上现在大多前端项目都采用了按需加载的策略，即将 bundle 拆分为多个 chunk，服务器端根据加载当前页面需要的内容返回对应的 chunk ，这样可以极大提升首屏加载速度。服务端渲染 (Server-Side Rendering, SSR) 允许在服务器端动态生成 HTML 文档。当浏览器请求页面，服务器端会先获取页面需要的数据，然后渲染出一份初始的 HTML 文档，这份 HTML 文档和包含整个应用逻辑的 bundle.js 文件一起作为响应内容发送给客户端。此时浏览器渲染的是已经有部分内容的 HTML 文档，用户不会看到空白页。应用逻辑则会在 bundle.js 解析完成后添加到应用程序中。Hydration如果你的应用程序包含大量内容，或者你预期用户处于弱网环境，那么使用 SSR 是有意义的，因为它可以提供更好的用户体验。当 bundle.js 在加载的过程中，用户已经可以浏览内容，即便整个应用还未正常运行 (此时页面是无法交互的)。当应用逻辑加载完毕，渲染 React 组件，事件处理函数被绑定到经过服务端渲染的 HTML 节点上，这个过程被称为 hydration（中文译为滋润）。把它想象成压缩的可膨胀毛巾或泥炭球。这两种产品在水滋润之前也没有任何作用。Suspense尽管看起来像是一个巧妙的魔术，但在使用 SSR 时，可能会遇到一些瓶颈。例如，服务器端动态渲染 HTML 页面，需要先获取所有的应用数据。这就意味着如果从另一台较慢的机器获取数据，则必须等待该过程完成。同时，在开始 hydration 之前，必须加载完所有的应用逻辑。此外，在用户可以开始交互之前，所有（页面元素）都必须完成 hydration。由于这样非常低效，React 团队在 2018 年引入了 Suspense 组件，在懒加载组件中允许组件等待异步操作的结果的时候展示一个 fallback UI。由于它正在改变 React 18 中的行为，我们将在下一节内容中进行讨论。React 18 中的变化新 Root API vs 旧 Root APIReact app 是通过将根元素（最顶层组件）挂载到 DOM 上进行创建的。如果你使用脚手架创建了一个项目，你可以在 index.js 文件中找到 index.html 和 App.jsx 的关联，看起来是这样的：import * as ReactDOM from "react-dom" import App from "App" // <App/> 组件直接挂载到 id 为 'app' 的 DOM 元素上： ReactDOM.render(<App tab="home" />, document.getElementById("app"))新的 Root API 使用 ReactDOM.createRoot() 创建一个新的根元素，然后 React app 在内部渲染：import * as ReactDOM from "react-dom" import App from "App" // 使用 ReactDOM.createRoot() 创建一个根元素： const root = ReactDOM.createRoot(document.getElementById("app")) // 将 <App/> 组件渲染到根元素下: root.render(<App tab="home" />) // 如果 <App/> 更新，无需再重复传递初始 DOM 节点： root.render(<App tab="profile" />)但为什么重要呢？它的大部分好处都隐藏在幕后。为了能够使用下面提到的开箱即用的改进，需要在项目中将旧的 Root API 切换为新的 Root API 。开箱即用的改进一旦升级到 React18 并开始使用新的 Root API，这些改进就会被动地（在幕后）发生。正如我们上面提到的，如果您继续使用旧的 API，您将无法获得这些好处，因此请检查您的 index.js 文件并在需要时更新它。但即使您不这样做，您的应用程序也不会中断，所以一切都很好。⭐️ Automatic batching (自动批处理)批处理是 React 在幕后所做的事情，许多开发人员都没有意识到这一点。当您注意您的开发者控制台时，您会意识到，如果您在同一个事件处理函数中运行一系列的状态更新，即使您有两个状态更新，React 也只会重新渲染 UI 一次。这意味着 React 将它们批量（或分组）在一起，因此与其不断重复状态更新并重新渲染 UI 的步骤，它会同时执行状态更新并只渲染 UI 一次。批处理是一种很好的机制，可以保护我们免受不必要的 UI 重新渲染，但 React 17 仅在事件处理函数中实现。而 Promise 链、异步代码或者原生事件处理函数的使用会打破这种行为（在这些场景中批处理会失效）。在 React 18 中，自动批处理会在原生事件处理函数、Promise 链和异步代码自动完成。function handleClick() { // React 17: 重新渲染发生在所有状态都更新之后。这被称为批处理。 // 这也是 React 18 的默认行为。 setIsBirthday(b => !b) setAge(a => a + 1) } // 在下面代码块中，React 18 会自动批处理，但是 React 17 不会。 // 1. Promises: function handleClick() { fetchSomething().then(() => { setIsBirthday(b => !b) setAge(a => a + 1) }) } // 2. 异步代码: setInterval(() => { setIsBirthday(b => !b) setAge(a => a + 1) }, 5000) // 3. 原生事件监听器: element.addEventListener("click", () => { setIsBirthday(b => !b) setAge(a => a + 1) })如果需要，可以使用 ReactDOM.flushSync() 退出自动批处理，但是 React 团队不建议频繁使用它。点击这里:https://github.com/reactwg/react-18/discussions/21可以查看 React 团队对自动批处理的解释。允许组件渲染 undefined在 React 18 之前，如果函数组件/类组件的 render 函数返回 undefined 或者不返回任何东西，会抛出一个错误，警告开发者要么返回 JSX 元素要么就返回 null 。这主要是为了发现开发人员忘记返回他们在组件中创建的元素的错误。但是 React 团队认为这种警告机制属于 linters 而不是库本身。因此在 React 18 中，您可以安全地返回 undefined 使组件不渲染任何东西。Suspense 支持 SSR之前版本的 React 并不支持在服务器端使用 suspense 。新的 pipeToNodeWritable API 提供了完整的内置 spspense 支持和 HTML 流。未捕获的 Suspense在 React 17 中，如果一个组件尝试异步加载，例如一个组件通过 React.lazy 加载，它会在它上面找到最近的 Suspense 边界，并渲染 fallback UI，直到组件被加载完成。然而，如果它的上面没有 Suspense 边界，则会抛出一个错误。在 React 18 中，如果没有找到 Suspense 边界，整个应用程序都会变为异步加载 ，意味着没有任何东西会被渲染，直到异步组件加载完成。null 或者 undefined 的 Suspense fallback在之前的版本中，如果一个 Suspense 边界没有传递 fallback prop ，或者传递的 fallback 是 null 、undefined ，整个 Suspense 会被忽略，并使用下一个 Suspense 边界。如果没有更多边界，则会抛出一个错误。在 React 18 中，即使 fallback 传递 null 或 undefined ，也会使用这个 Suspense 边界，并且不渲染任何东西，直到异步组件加载完成。并发特性在编程领域中，并发是同时执行多个任务的能力。由于 React 在单线程上运行，它必须决定按什么顺序做什么。为此，React 使用了一个 dispatcher，它是一个回调注册表（就像 Node.js 中的调用栈）。在之前的 React 版本中，这个 API 对开发者来说是完全遥不可及的。React 18 添加了一些可选的并发功能，可以更智能地渲染内容并暴露此 API 的某些部分。这些新增的并发特性支持协同多任务、基于优先级的渲染、调度和允许中断，因此它们大大提高了用户体验。React 还在 16.3 版本中引入了 StrictMode ，默认情况下是禁用的。它的创建是为了警告开发人员有关并发不兼容的代码，如果使用并发功能，这些代码可能会给应用程序引入 bug 。但是显然，在整个应用程序中启用 StrictMode 会将开发人员淹没在警告的海洋中，因此 React 团队决定构建并发功能而不是并发模式，并允许在使用并发特性的较小的部分启用 StrictMode，而不是为整个应用程序启用它。因此，尽管 createRoot API 将整个应用程序更改为他们所谓的并发模式（concurrent mode），但组件的呈现还是一如既往，除非您使用我们在下面解释的并发功能。如果您在组件中使用并发功能，则该组件及其整个子树将同时呈现并 StrictMode 为其启用。⭐️ startTransition以前，React 有一个非常重要的规则：任何东西都不能干扰渲染。一旦组件状态改变并触发了重新渲染，就无法阻止它，直到组件重新渲染，页面才能响应（交互事件）。对于新的更新，每个状态更新都被归类为以下两类之一：要么是紧急更新 (urgent update)，要么是过渡更新（transition update，简称为 transition）。紧急更新是用户直觉上期望在心跳中响应的操作，例如鼠标单击或按键。过渡更新是一些延迟可以接受的并且在很多时候都可以预期的操作，例如搜索查询。startTransition API 用来将内部的 setState 调用标记为 transitions，这意味着他们可中断的。过渡更新也同步运行，但 UI 在运行时不会被阻塞。import { startTransition } from "react" // 展示用户输入内容的紧急更新： setInputValue(input) // 被 startTransition 标记的过渡更新： startTransition(() => { // 一个非紧急、可中断更新的搜索查询： setSearchQuery(input) })上面的例子来自 reactwg GitHub 讨论页面。如果 setSearchQuery(input) 未标记为过渡更新，则每次输入更改后都会锁定 UI。现在它被标记为非紧急，用户可以搜索一些东西并改变意见，并在根据输入变化更新 UI 之前决定导航到另一个页面，而不必等待不感兴趣的 UI 更新。您甚至可以使用 useTransition 钩子跟踪过渡更新的 pending 状态，并根据需要向用户显示正在加载的 UI ：import { useTransition } from "react" const [isPending, startTransition] = useTransition() // 例如，在 pending 状态时，您可以展示一个 spinner： { isPending ? <Spinner /> : null }看看这个:https://github.com/reactwg/react-18/discussions/46#discussioncomment-846786关于并发和 startTransition 特性的惊人解释以及 startTransition:https://github.com/reactwg/react-18/discussions/65 的真实例子。useDeferredValueuseDeferredValue 钩子可帮助您在指定时间段内推迟更新 UI 的某些部分，同时保持页面响应。你也可以给它一个可选的 timeout 。React 将尝试尽快更新延迟值。如果在给定的 timeout 期限内未能完成，它将强制更新，在此过程中阻塞 UI。换句话说，延迟值通过过渡更新而不是紧急更新来更新，从而使您的 UI 在此过程中保持响应。import { useDeferredValue } from "react" const deferredValue = useDeferredValue(value, { timeoutMs: 5000, })SuspenseListSuspenseList 允许您协调它所包装的子树的 Suspense 节点的内容的出现顺序，即使数据以不同的顺序到达。通常，如果您有多个同级 Suspense 边界，它们会尽可能 resolve 。但是，您可能希望以特定顺序加载组件，无论它们以何种顺序自行 resolve 。import { Suspense, SuspenseList } from "react" <SuspenseList revealOrder="forwards"> <Suspense fallback="Loading first item..."> <FirstItem /> </Suspense> <Suspense fallback="Loading second item..."> <SecondItem /> </Suspense> <Suspense fallback="Loading third item..."> <ThirdItem /> </Suspense> </SuspenseList>在上面的例子中，即使第三个项目先加载，它也会渲染 Loading third item... ，直到加载第一个项目。加载第一个项目时，将呈现第一个项目，以及第二个和第三个的 fallback 。只有当第二个项目被加载时，三个项目才能被渲染。revealOrder prop 可以取值 forwards ，backwards 和 together 。forwards 和 backwards 允许内部的 Suspense 边界按照向前和向后的顺序进行 resolve 。另一方面，together 会等待所有的边界 resolve 完毕之后再去渲染。你也可以给 SuspenseList 传一个 tail prop 。tail prop 可以取值 collapsed 和 hidden 。默认情况下， SuspenseList 渲染所有 fallback 。但是，如果您不想渲染任何 fallback ，则可以使用 tail="hidden" ，如果您只想渲染最多一个 fallback ，则可以使用 tail="collapsed"。这样，您可以创建许多 fallback ，而不必担心加载区域会变得混乱。带有选择性 hydration 的流式 HTML正如我们之前在概念部分讨论过的，服务器端渲染遵循以下步骤：（服务器） 获取所有应用程序数据（服务器） 渲染 HTML（客户端） 加载 HTML 和应用程序逻辑（客户端） hydrate 一切除非当前步骤已完成，否则无法开始下一步，并且在所有 4 个步骤都完成后，应用程序变为可交互的。这意味着我们的应用程序至少有 4 个瓶颈会减慢我们的初始加载速度。React 18 提供了两个主要功能来帮助我们解决潜在的瓶颈。在获取所有数据之前流式传输 HTML如果您将页面的某些部分包裹在 Suspense 组件中，它不会等待该部分准备就绪，而是在其他组件完成后继续前进，同时为尚未准备好并使用 Suspense 组件包裹的部分显示一个 spinner 。当该部分的数据准备好时，React 将额外的 HTML（和一个小脚本）流式传输到客户端，并将内容准确地呈现在它应该出现的位置。有了这个，你就不必等到每条数据都被获取了，所以可以通过使用这个特性来解决步骤 1 中可能出现的瓶颈。（要使用它，你的数据获取库也必须实现它。React 具有与 Suspense 集成的开箱即用的 Server Component。）如果 bundle.js 文件很大，第 3 步（应用程序逻辑的加载）可能比您想象的要长。为了避免这里的瓶颈，您可以执行code-splitting 和 lazy-loading。这意味着根据请求的路径将应用程序逻辑分几个部分加载。出于各种原因，这很好，它更快，因为文件更小，并且您不会传输不必要的部分，因为用户可能不会访问应用程序提供的所有页面。在所有代码加载之前 hydration在 React 18 中，通过将组件包装在 中 Suspense，您只需告诉客户端不要阻止应用程序的其他部分等待该组件加载。因此，即使缺少某些 HTML，该应用程序也会开始 hydration 。在所有组件 hydrated 之前与组件交互使用 React 18，包裹在 Suspense 其中的组件的 hydration 不会阻止与已经 hydrated 的组件的交互。如果 Suspense 已经加载了几个包裹在其中的组件的 HTML ，它会从组件树中找到的第一个开始进行 hydration 。但是，如果用户在另一个组件的 hydration 期间与其他一个交互（例如不耐烦地点击它），它将停止另一个组件的 hydration ，并优先考虑用户尝试与之交互的组件的 hydration 。它还记录事件并在组件 hydration 后再次调度它。这称为选择性 hydration 作用。结语我们只是想说我们多么欣赏 React 不断发展的环境。React 是一个了不起的工具，它每年都在变得更好。React 团队非常棒，感谢您所做的所有工作。你们真是不可思议。