学习方法： 每天复习前三天的笔记
备注： (try: 待动手试试 study: 待研究和思考 practice:待练习)
动手实现： 是检验是否掌握的唯一标准，很多时候貌似懂了，一写就错！
正确的学习方式： 3分学，3分想，4分动手做！看到有新收获的实现就马上动手写一遍，才记得住！
复习进度：41.面向对象第2天 2 面向对象进阶/06 面向对象术语总结
微专业高级前端： 1.至少听2遍，直到能写出或者脑子里想出完整带细节的实现 2.相关扩展知识 3.动手写！
==============================================================================
待学习： E2e测试，冒烟测试，websocket，webhook，webview，service worker,sourcemap,styled-jsx
==============================================================================
jsx和React.createElement(type,
[props],
[...children])；
cloneElement
权限控制： 使用一个容器组件包裹。 参考： Route,Button,Link
==============================================================================
service Worker；
Sentry 是一个开源的实时错误追踪系统；
Compat;
breakpoints；
单点登录（Single Sign On），简称为 SSO;
calc(100% - 10px)；
withRouter
==============================================================================
脚本：js....
node: 平台 + 运行环境
nvm
path环境变量: 当要求系统运行一个程序而没有告诉它程序所在的完整路径时
系统首先在当前目录下面寻找该程序
如果找不到，则系统会跑到path中指定的路径去找，如果找到，直接运行
CommonJS、AMD和CMD区别
- CommonJS是同步的, 主要用于服务器
- AMD和CMD是异步的, 两者的模块定义和加载机制稍有不同, 主要用于浏览器
ES6在语言标准的层面上, 实现了模块功能
指针即引用
==============================================================================
RFC文档；
JwtDecode解码token；
scoped;
vw、vh、vmax、vmin这四个单位都是基于视口
vw是相对视口（viewport）的宽度而定的，长度等于视口(浏览器)宽度的1/100
vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
假如浏览器的高度为500px，那么1vh就等于5px（500px/100）
vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值
==============================================================================
React.createRef；
回调 Refs：将ref绑定到一个回调函数，element会作为参数传到函数中；
- 当
ref属性用于 HTML 元素时，构造函数中使用React.createRef()创建的ref接收底层 DOM 元素作为其current属性。 - 当
ref属性用于自定义 class 组件时，ref对象接收组件的挂载实例作为其current属性。 - 你不能在函数组件上使用
ref属性，因为他们没有实例。如果要在函数组件中使用ref，你可以使用forwardRef（可与useImperativeHandle结合使用），或者可以将该组件转化为 class 组件。
2e2 === 2*10*10
Token,session,token（Json web token (JWT））异同：
同： 用于校验用户身份；不能存敏感信息
异：token不占服务端内存；更可拓展
==============================================================================
vsCode:Breadcrumbs; Go to Definition(press Ctrl)
==============================================================================
react动画：1.不要把样式属性绑定到状态。eg: this.state.width + 'px' . 因为不断更新state来实现动画的话，也会不断触发生命周期。 建议使用 this.ref.style.width ....
2.transitionEnd事件，context相关实践
viable workaround ；DOM Manipulation；CI/CD，Thresholds，substitute，verbose:详细信息
安装（二进制安装/源码安装）
自动化测试：单元测试；api测试；UI测试
==============================================================================
1）测试用例能验证函数的正确性；
2）测试用例尽可能涵盖边界条件（例如遍历一个链表，头指针是空，只有一个节点，链表有N个节点，N是问题描述下允许的最大节点数等等）；
3）一些异常和错误处理（例如往一个函数里传入空指针，传入空串，这个函数能否打印一些log，返回错误码，实现加法的Add函数如何检测和处理溢出等等）
==============================================================================
User story: 1.以用户的视角来写的 2.经常是用Gherkin 语法来写的
单元测试：即最小单元的测试，可能是函数或类等等（取决于编程语言）
期望与断言
适合情况：1. 项目比较稳定的阶段 2.人员变动较大
测试场景：
1.最小单元测试: 模拟输入，测试输出是否符合预期
2UI测试：通常测试某个期望的返回值是否包含某个className就够了
3交互测试： 模拟点击等等的
自定义的断言
jest+enzyme
==============================================================================
去了解：websocket, pusher,webhook,webview
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。
Debug
OKR
spike
==============================================================================
A/B test：某个功能对iOS开放而对Android用户关闭 ===》 Feature flag
Feature flag:有个后台控制去开启／关闭某个功能。(optimizly平台)
==============================================================================
使用git stash apply代替 git stash pop
- Workspace：工作区
- Index / Stage：暂存区
- Repository：仓库区（或本地仓库）
- Remote：远程仓库
# 选择一个commit，合并进当前分支
$ git cherry-pick [commit/branch/repository]
==============================================================================
Map.set/get...
react portal / vue slot
react portal: 1. 渲染到任意父容器 2.不是子元素也能冒泡上去
react官网再看一遍，查漏补缺！
mount : 挂载，嵌入
aria: 针对残障人士的app
==============================================================================
跨域，简单请求，非简单请求（预检查请求），跨域处理, cookie处理等等： http://www.ruanyifeng.com/blog/2016/04/cors.html
开发和调试中数据问题引起不能联调：可以自己通过api平台（如swagger/postman ） 调接口添加数据测试，不必依赖后端等人
==============================================================================
this: 当我们访问对象的某个属性时，但又不方便把对象告诉你时，就用this代替。 eg: 构造函数内
fn.call(),fn.apply本质都是调用函数
fn.call(context,arguments): 本质可以理解为：fn(arguments)且让函数内部this指向context;
eg: [].slice.call(arguments)
fn.bind(context,1)本质是创建函数的副本
var copyFn = fn.bind(context,1)
copyFn(2)
==============================================================================
test, reg.exec() 子表达式和捕获组的区别（study）
/^<(w+)s*/?>(?:</1>|)$/.exec('<div></div>')
(?:) 表示匹配但不捕获
1表示反向引用（即引用上一个子表达式所匹配的）
redux认为改变state的引用不是mutate,而改变state内的属性值是mutate, 且不推荐将其赋值给其他变量！
通过传参给reducer的state=undefined来重置redux数据
==============================================================================
onload: html+css,img,flash等资源都加载完成时执行
DOMConentLoaded： html加载和解析完成时执行
浏览器渲染过程(study)：
1.解析html，生成dom树
2.DOMConentLoaded，css规则树
3.合并html+css
4.
$(function(){}) 的实现（try）
Constructor.prop 访问到需要其原型或本身上有，而不是其本身的 this.prop 有，this.prop是给其实例用的：instance.prop
==============================================================================
callback实现（try）
a && b ==> if(a){return b}
'a b c d'.split(/s+/)
代码逻辑： 无非就是对谁进行什么操作。 谁就是变量，操作就是函数。操作不够就加函数，对象不够就加变量！
==============================================================================
sizzle选择器（study）
==========================================================================
作业：
1. //过滤掉<a> <a> => a
实现 $（）方法：支持1.‘a’,'<a>' 2.dom对象 3.函数（看源码:try）
==============================================================================
swagger: api平台，还能真实发请求
editorconfig文件配置
==============================================================================
普通函数，箭头函数，构造函数的区别：
箭头函数没有prototype属性，没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。构造函数和普通函数不是通过函数名首字母的大小写来区分的，而是通过调用方式来区分的，即new运算符，首字母大写只是约定的习惯。
new 运算符：
- 创建一个空的简单JavaScript对象（即{}）；
- 链接该对象（即设置该对象的构造函数）到另一个对象 ；
- 将步骤1新创建的对象作为this的上下文 ；
- 如果该函数没有返回对象，则返回this。
==============================================================================
$就是jQuery
$()就是jQury的实例 ，共享原型对象
$.extend()和$.fn.extend()的实现：浅拷贝和深拷贝
==============================================================================
任何布局问题：首先想到flex,table,grid等，不行还有float,position，transform
等宽布局：1. flex 2.table 3.float+百分比
等高布局：1.flex 2.table 3.float + padding-bottom/margin-bottom
==============================================================================
定宽/不定宽+自适应布局：
1. display: flex + flex:1
2.display:table/table-cell(table-layout)
3.float+ margin
4. float + overflow-hidden
5.网格布局（study/try）
==============================================================================
var person = new Person() new运算符的原理： 1.创建{}对象 2.将{}.__proto__ = Person.prototype 3.执行构造函数 且 this指向{}
__proto__存在于任何对象
prototype存在于任何函数（不只是构造函数）
属性检索机制： 1。访问对象自身属性 2.访问对象的__proto__即其构造函数的原型对象 3.访问对象的__proto__.__proto__ .... 一直到Object.prototype.__proto__(null)
==============================================================================
通过splice等方法改变对象引用： 可以累积改变
==============================================================================
居中：水平居中，垂直居中，水平垂直居中（try, study）
布局需要巧妙运用：
display:table/table-cell/inline-block + text-align, vertical-align
absolute+ transform
table/flex+margin
flex+justify-content/align-items
table-cell + vertical-align
对css属性的深入了解才能解决疑难杂症！
==============================================================================
fork, pull request
==============================================================================
==============================================================================
1.将页面状态（eg:activetab，from【表示从哪个路径跳转的】）记录到url的path和query，然后用next自动匹配path，query也可url拿到状态信息
==============================================================================
jest：单元测试
开发依赖/生产依赖：
1 构建工具和其衍生出的插件 webpack，xxx-webpack-plugin
2.预处理器 : 常见的有css中的less、scss、sass、stylus，js中的typescript、coffee-script、babel等等
3.测试工具
4.其他只在开发环境使用的。
都可以归为开发依赖，放到devdependencies
css reset: 清除浏览器默认样式,兼容性问题-->设置全局样式
==============================================================================
Less:Variables ，mixin, nesting, 函数
TDD和BDD
CI（study）
==============================================================================
PR是项目评审(Project Review)英文的缩写。也可以是pull request
bypass
LINK/HEAD/
antd: Typography排版, space, divider
useRouter和withRouter(Page)
<Link href="/post/[pid]" as="/post/abc">
==============================================================================
getStaticProps ：1.服务端调用 2.构建时调用（dev模式在请求时调用） 3.仅限page组件
getStaticPaths ：1.服务端调用 2.在构建时调用（dev模式在请求时调用） 3.仅限page组件 4.用动态路由时使用
const router = useRouter()
fallback: true/false
==============================================================================
mutate-immutable，
identity,
typo
react-refresh包代替Hot Module Replacement（简称 HMR)热更新
==============================================================================
隔离dom方式: 1.iframe 2.Shadow DOM
Shadow CSS(study)
Shadow DOM: 隔离外部环境用于封装组件以供复用。 隐藏，隔离的dom（video标签）
==============================================================================
代码分割，
预渲染为何有利于SEO（study）
预渲染（study）：静态生成（study） + 服务端渲染（study）
预定义路由》动态路由》（可选）全匹配路由
createSelector > mapStateToProps
==============================================================================
PWA: 渐进式网页应用: PWA就是一种网页应用，它可以离线使用，可以变成独立应用安装到系统中。它非常的轻量化，在多平台上面拥有一致的界面。
reactive和responsive区别
service worker(study)
渐进式和侵入性
CSS Modules(try)
==============================================================================
面向对象：页面元素（包括页面本身）都当作对象，分析其属性，方法。
功能属性: init(), bindDom(),bindEvents()
ES6/7 新标准的考查
- 箭头函数： 箭头函数存在的意义，第一写起来更加简洁，第二可以解决 ES6 之前函数执行中
this是全局变量的问题 - Module
- Class
- Set 和 Map ：是array和object的增强
- Promise
==============================================================================
变量： 作用域和执行顺序
函数声明比变量声明提高到更高的位置
只声明变量不会覆盖原变量的值
==============================================================================
前端错误分类：
1.运行错误
1) tray catch 2)window.onerror
2.资源加载错误
1) img/script.onerrer
2)performance.getEntries()获取已加载的资源（对比需加载的资源，间接得到未成功加载的资源）
3)Error事件捕获 window.onerror 捕获阶段捕获
获取跨域资源加载错误信息：
错误上报：
1.ajax
2.Image对象上报（真正常用的）
值类型/引用类型：这就是因为Number类型的a是按值传递的，而Object类型的b是按共享传递的。
js是先解析（变量，函数声明提升等等的），再执行
JS 没有块级作用域，只有全局作用域和函数作用域。
类型判断：typeof/instance of/ constructor / toString.call()
=================================================================================================================================
canvas + konva使用
LESS 引入了变量，Mixin（混入），运算以及函数等功能（study）
对老版本浏览器兼容h5和css3
==============================================================================
服务端提供服务也是通过软件，因此前后端通信本质是软件的通信。
get通过url传递数据，所以无请求体
html,body{
height: 100%;/*满屏*/
}
移动端慎用px！除非固定宽度，比如两边固定宽，中间自适应布局. 通常都要用百分比.或者rem！:
先设置大盒子的尺寸百分比再设置内部小盒子的尺寸百分比！！
p:nth-cihld(2)当p作为第二个孩子的时候,而非第2个p！！
p:nth-of-type（2） 这个才是第2个p的意思
页面布局：首先确定页面需要兼容哪几个端（pc/pad/phone）以及是否要精确还原设计图，兼容多个，就要每个端的设计图，不精确还原就用bootstrap类框架，否则手写css(让领导知道精确还原开发成本高多了)。
首页的布局：是以百分比布局为主的 定最小宽度和最大宽度的布局。
移动端布局宽度标准：
max- 640px; /*在行业当中的移动端的设计图一般使用的是640px*/
min- 300px; /*在移动设备当中现在最小的尺寸320px*/
text-transform: uppercase/lowercase/capitalize;
==============================================================================
前后端机器交流通过协议： http/ftp/smtp ...
DNS,
端口：确定电脑上的具体哪个应用程序
访问一个页面的完整流程(study)
scheme://host:port/path?query#fragment
使用原生XHR发请求的代码过程
配置wamp运行php代码,使一台机器同时是客户端也是服务端(try)
将字符串按照JS语法进行解析： eval('(' + str + ')');
模板引擎原理
跨域：
domain:1.两个域的顶级域名相同的情况 2.两个域下必须设置相同在document.domain.eg： document.domain = 'study.com';
函数声明和函数表达式不同之处在于:
一、Javascript引擎在解析javascript代码时会‘函数声明提升'（Function declaration Hoisting）当前执行环境（作用域）上的函数声明，而函数表达式必须等到Javascirtp引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式，
二、函数表达式后面可以加括号立即调用该函数，函数声明不可以
（）、！、+、-、=等运算符，都能将函数声明转换成函数表达式：
(function(a){
console.log(a); //firebug输出123,使用（）运算符
})(123); // 这里去掉（）就会报错
==============================================================================
内容分发网络（CDN）是一组分散在不同地理位置的web服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。
php文件可以包含html（study: php后缀如何在浏览器渲染呢？）
==============================================================================
缓存：（Study）
1.强缓存：强制使用缓存： expires是过期时间，可能和服务端不一致，因此加了个cache-control(以其为准)这个相对时间。
2.协商缓存：和服务器协商（问）是否过期，缓存是否可用： 服务端会拿浏览器的If-Modified-Since字段跟Last-Modified对比，看是否是最新。 Etag（内容改变生成的hash值）和If-None-Match对比，看内容是否改变。
缓存详解：https://www.cnblogs.com/chengxs/p/10396066.html
流程图： 强缓存未过期就不看协商缓存
问题： 哪些文件缓存哪些不缓存，哪些强缓存/弱缓存？服务端决定的？（Study）
==============================================================================
如何用js触发动画： 通过js改变class来改变样式，结合transition,transform和animation实现
如下，用js新增用current类名。eg:
==============================================================================
css3动画可以实现轮播图
flex实现栅格布局
==============================================================================
3D转换：
左手坐标系
rotateX/Y/Z（）
translateX/Y/Z（）
==============================================================================
单线程: 运行栈+任务队列
同步任务优先于异步任务
运行机制：任务队列和事件循环： 任务在运行栈中依次执行，执行到异步任务时，到指定时间才把异步任务添加到任务队列，等到同步任务都执行完成后，才开始执行任务队列！如果此次任务队列中还有异步任务，则同样循环！
eg：如下： for循环遇到定时器，会在1秒后把定时器放到任务队列中，然后开始下次循环，当1秒后4个定时器开始依次放到任务队列时，fo循环已经执行完，i已经是4，因此执行完同步任务再执行任务队列时，输出4个4
问题：异步任务何时放到任务队列中？（是执行到开始算还是执行完同步任务才开始算？）（study）
应用缓存：manifest: 1.<html lang="en" manifest="/my-manifest"> 2.my-manifest中列明要缓存的清单
前端开发原则：
- 一般能用css3实现的特效就不要用js
- 能用display:flex;就不用css2
- 能用transform就不用animation
- 能用scale就不用width和height.
- 能用translate就不用position
onwheel事件是鼠标滚动；onscroll是文档滚动，包括拖动滚动条也能触发
css3浏览器支持程度差，需要添加私有前缀, 使用时坚持渐进增强原则 意思是：只要不影响，哪怕不兼容也照用，浏览器会优雅降级
css3:
选择器：
属性选择器（E[attr*=val]），伪类选择器（E:nth-child(2n-1)，E:empty等等），伪元素选择器（E::after，E::first-letter，E::selection）
伪类和伪元素的区别
文本：text-shadow
边框：box-shadow，border-image，border-radius
盒模型：box-sizing
背景：background-size：cover/contain; background-origin; background-clip; 一个熟悉可设置多背景
渐变： 线性渐变/径向渐变
过渡：transition-property设置过渡属性 transition-duration设置过渡时间。。。。。。
转换（2D/3D）
动画
伸缩布局/弹性布局
hover时添加一个伪元素：
。
。
。
。
==============================================================================
如下操作：不管是html还是js，实现都要看本质，不看样式。 如下：使用select来实现最简单合理。
jQuery： 选择器; 属性和样式；UI
H5:
html:
新标签：section之类的， audio,video,canvas. 新属性：pattern,form,list,autofocus,autocomplete. 新type:Type=‘email/url/number’等
css新特性： 选择器，弹性布局，转换，动画等
js: JS基础API提升; 离线 & 存储 ；data属性; 文件 API; 拖放操作；indexedDB,history API等等
tags,form,form props,input props,
web1.0/ 2.0/ html5时代
markdown: 是一种简单的描述富文本的标记语言
要求了解，并能熟练使用。markdown学习网址：http://wowubuntu.com/markdown/（study）
marked.js:可以用来将md转换为HTML
==============================================================================
Doctype, DTD（document type definition）文档类型定义
Doctype是用于声明DTD的，浏览器根据DTD来决定如何解析
DOCTYPE:
1.html5 <!DOCTYPE html>
2.h4 strict严格模式 （不支持展示性的废弃元素：font）
3.h4 transitional过渡模式：（支持展示性的废弃元素：font）
浏览器渲染过程：
渲染过程: html Parser--->css Parser ---> Render ----> Layout -------> Painting
重排（reflow）: 计算dom节点的位置和宽高。 触发：1.dom节点增删 2.改变dom位置等等。
重绘（repaint）:当盒子的位置，大小排列好后，依据各自的css特性绘制出来。1.dom改变 2.css改变 减少：避免频繁appendChild,加一个div容器，放到内，一次append进去。
正则表达式（study/try）
offsetWidth: width + padding + border
clientWidth： width + padding 不包含border
scrollWidth: width + padding 不包含边框 大小是内容的大小reduce方法:
var myReduce = numbers.reduce(function(previous,current,index){
return previous + "" + current;
},0);
console.log(myReduce);//0123456789101112131415
[1,4, 2, 3,].sort((a,b)=>{return a-b}); // [1, 2, 3, 4] 升序
reverse()
缓动动画封装： 可修改多样式属性+回调函数。可执行多步骤动画
算法（好好补充下）： 考点：
递归是常考的
排序通常是一个题的某个步骤要用到：
快速排序：https://segmentfault.com/a/1190000009426421（有问题：删除了原数组）
选择排序：https://segmentfault.com/a/1190000009366805
稀尔排序：https://segmentfault.com/a/1190000009461832
堆栈，列表，链表：https://juejin.im/entry/6844903459993419790
递归的原理，如何使用： https://segmentfault.com/a/1190000009857470
波兰式： 不常考，有时间了解即可：
看不懂题目可以问，回答不了可以谈谈自己的理解
==============================================================================
substring 同slice
substr缓动动画： leader = leader + ( target - leader ) / 10
被挡住的部分：scrollTop , scrollLeft
window.scrollTo(0,0);里面的参数是不跟单位的。
通信： ajax, websocket,CORS
==============================================================================
==============================================================================
面试相关笔记： https://www.cnblogs.com/ycxqdkf/articles/13095569.html
new运算符后跟的都认为是构造函数
纠正上图：原型的constructor不指向构造函数，而指向创建该原型的构造函数??(study/try)
原型链： 沿着原型(__proto__属性)往上找，直到找到Object.prototype
构造函数是Function的实例，如下：
M.__proto__ ：是创建M的构造函数的原型
M.prototype：是M的原型
http特点: 简单（url固定），灵活（支持不同数据类型），无连接，无状态
持久连接： keep-alive http1.1版本支持
管线化（study）: 请求打包，响应打包。 基于持久连接
+new Date("2015/12/12 17:30:00")
脱离标准流的展示： 标准流当他不存在
块盒（block box），行内盒（inline box），匿名盒（anonymous box）
匿名盒也有分匿名块盒与匿名行内盒
<div>
Some inline text
<p>followed by a paragraph</p>
followed by more inline text.
</div>
- 在常规流中，盒一个接着一个排列;
- 在块级格式化上下文里面， 它们竖着排列；
- 在行内格式化上下文里面， 它们横着排列;
============================================================================== ==============================================================================
两侧固定，中间自适应布局：
1.浮动布局（中间元素不要margin不是被覆盖吗？）TRY
2.绝对定位
3.弹性布局： 除去兼容性问题，最完美
4.表格布局： 兼容性最好
5.网格布局： 最新特性
html： 注意要语义化
css: 布局原理要理解，基础要扎实
思维灵活（多几个解决方案），积极上进（懂最新技术）
代码规范： 命名，模块化等等。
盒模型： 标准模式和IE模式（区别：宽高范围不同）
设置： box-sizing： content-box （标准模式） box-sizing： border-box（IE模式）
BFC(Block fomatting context = block-level box + Formatting Context)，IFC
BFC的概念，BFC的4个以上原理（study），如何创建BFC（float, position,display，overflow:hidden等相关属性）
BFC详解：
1.https://juejin.im/post/6844903544726749198
2.https://juejin.im/post/6844903855847637005
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC（study）
==============================================================================
345 % 10: 除以取余
多分支的if语句和跳楼现象
运算符： 算数，逻辑，比较运算符,逗号运算符，赋值运算符a
先加和后加： var c = ++a + b++
终止循环：break
立即结束本次循环，开始下一次循环：continue
内存：堆，栈
简单数据类型== 值类型
复杂数据类型==引用类型
引用类型的引用地址存在栈中，地址指向堆
穷举法
累加，累乘/阶乘
拿到个位数： num%10
因数：能整除的数 eg: 4-->1,2,4
质数：只有两个因数，1和自己
============================================================================================================================================================
合流是合流到专有云的整个大项目
出包是整个专有云大项目的部署
精灵图
用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
emmet快捷键：
background-position:100px 200px;
背景图在盒子中右边移动100px，向下移动。
background:red url(images/1.jpg) no-repeat -100px -100px fixed;
相对定位： 1.原位置会占坑 （现位置呢不占坑） 2.position: relative;left: 300px;bottom: 300px; 表示向右300，向上300
定位和背景一样： 方向和单词意思相反
只有定位了的元素，才能有z-index值
版心
react进阶：https://www.cnblogs.com/ycxqdkf/p/13375019.html
============================================================================== ==============================================================================
UseEffect = didMount || didUpdate || willUnMount || shouldComponentUpdate
自定义hooks： 逻辑复用
如上这些缓存方式分别用于哪些应用场景？（study）
一般使用 session 来记录用户信息，用 cookie 记录 sessionID。因为cookie 安全性低
Session 代表着服务器和客户端一次会话的过程。
https://juejin.im/post/5e6cae6f6fb9a07cc01a3b1c
弹性布局对容器的样式： style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}
margin的塌陷现象：
1.标准文档流中，竖直方向的margin不叠加，以较大的为准。
2.如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：
==============================================================================
deno-node-开发者-缺点： 不支持promise和es模块
deno优点： 更安全，不再需要外部工具。打包、格式清理、测试、安装、文档生成、linting、脚本编译成可执行文件等，都有专门命令。
router疑问点(http://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html):
1.useRouteMatch和 path='test/:id'（渲染的组件内部通过this.props.id能拿到？）的使用
<Route path="inbox" component={Inbox}>
{/* 添加一个路由，嵌套进我们想要嵌套的 UI 里 */}
<Route path="messages/:id" component={Message} />
</Route> :Message会渲染在Inbox内部！
React Router 会自动向 Route 组件中注入一些有用的信息，尤其是路径中动态部分的参数。我们的例子中，它指的是 :id。
// 来自于路径 `/inbox/messages/:id`
const id = this.props.params.id
The <BrowserRouter> creates a browser history, the <HashRouter> creates a hash history, and the <MemoryRouter> creates a memory history.
IndexRoute
＜Redirect from="messages/:id" to="/messages/:id" />
＜IndexRedirect to="/welcome" />
Link组件的activeStyle,和activeClassName属性（try）
IndexLink就是对Link组件的onlyActiveOnIndex属性的包装
Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。
history属性，一共可以设置三种值。（try, study）
- browserHistory
- hashHistory
- createMemoryHistory
路由跳转： （try）
1. 使用import { browserHistory } from 'react-router';browserHistory.push('/some/path');
2.使用context对象：this.context.router.push(path)
每个路由都有Enter和Leave钩子:onEnter钩子替代<Redirect>onEnter钩子还可以用来做认证。
用户离开一个路径的时候，跳出一个提示框，要求用户确认是否离开。
==============================================================================
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>Router组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定（study）
上面代码中，用户访问/repos时，会先加载App组件，然后在它的内部再加载Repos组件。要用this.props.children（try）
子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。
路由匹配规则是从上到下执行，一旦发现匹配，就不再其余的规则了。因此，带参数的路径一般要写在路由规则的底部。
URL的查询字符串/foo?bar=baz，可以用this.props.location.query.bar获取。
:paramName
:paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出。
==============================================================================
微前端架构-single spa ：多个spa组成的超级spa， 可以多个技术栈杂糅在一个大项目中
form的属性： action,method
input的type: reset,file,image,hidden
color: 16进制，rgba（0,0,254）表示法： 每个都是255个可选值
css属性的继承（关于文字样式的部分属性）和层叠（权重）
类的使用：
1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
2） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
background： background-color，background-image，background-repeat，background-position,background-attachment
脱离标准流的，标准流里面的规则都不适用了
清除浮动
1.clearfix:after {content:"";height: 0;
line-height: 0;
clear:both;
display:block;
visbility:hidden;
}
2.给容器一个height 2.clear:both 3.overflow:hidden 4.隔墙法
1.给父盒子设置padding(麻烦，给父盒子设置了padding之后将来如果要父盒子的大小保持不变，还必须把padding值减掉。)
2.给子盒子设置margin-top(这里有一个bug，如果父盒子没有边框，那么将来给子盒子设置以后父盒子也会随着子盒子一起向下掉)
a) 给父盒子设置边框
b) 给父盒子设置属性：overflow(溢出)：hidden(隐藏)
==============================================================================
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
img是image“图像”；
src是source“资源”；
a是anchor“锚”；
href是hypertext reference“超文本地址”
伪类选择器/伪元素选择器
兄弟选择器：div+p
meta标签（study）:用于描述网页全局信息？如： <meta name="description" content="全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。">
a标签的src指向的是一个文件
强烈不建议使用a标签下载
base标签：规定页面上所有链接的默认 URL 和默认目标：
dl/dt/dd标签
SEO优化：meta，语义化，广发外链，静态网页
=============================================================================传入参数个数会影响行为： function mapStateToProps(state) { console.log(state) // state console.log(arguments[1]) // undefined }
useStore,useDispatch,useSelector
reselector库
react-redux:1.（provider）提供store 2.(connect)连接store和组件。
mapDispatchToProps若是个action对象，则会自动dispatch它。
组件只会在mapStateToProps 函数内部返回的对象属性值（即组件的props）改变时 重渲染？还是说（state,props）中的任意一个改变都会re-render? try
==============================================================================
git reset 'hash' 可以查看工作区和该hash对应代码的差别
useImperativeHandle钩子和forwardReffunction.length拿到的是形参个数
<Provider store> 是使用connect的前提
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
middleware 最优秀的特性就是可以被链式组合。你可以在一个项目中使用多个独立的第三方 middleware。
待理解（可看之前慕课网的redux课程）：1. middleware 小节： 实现原理 2.applyMiddleware原理 3.store enhancer原理
函数柯里化 ：高阶函数，中间件
compose和bindActionCreators 的实际使用案例？
applyMiddleware也是一种store enhancer？
==============================================================================
connect（）（app）包装后的app,若省略mapDispatchToProps,会默认把dispatch映射为属性
provider和context，connect（），
容器组件本质就是连接redux和展示组件
Express 或者 Koa 等服务端框架中，middleware 是指可以被嵌入在框架接收请求到产生响应过程之中的代码
Redux middleware 被用于解决不同的问题，它提供的是位于 action 被发起之后，到达 reducer 之前的扩展点。
所以--》中间件： 可理解为某个环节的操作？
默认情况下，createStore()所创建的 Redux store 没有使用 middleware，所以只支持 同步数据流。
任何 middleware 都可以以自己的方式解析你 dispatch 的任何内容，并继续传递 actions 给下一个 middleware，
可以使用任意多异步的 middleware，但是需要使用普通对象作为最后一个被 dispatch 的 action ，来将处理流程带回同步方式
处理异步action:importthunkfrom 'redux-thunk'
applyMiddleware(
thunk, // 允许我们 dispatch() 函数
loggerMiddleware // 一个很便捷的 middleware，用来打印 action 日志
)
==============================================================================
拆分reducer和combineReducers()
同构应用和SSR： https://juejin.im/entry/5b1631085188257d492adc9e
let store = createStore(todoAppReducer)当你触发 action 后，Redux 会调用传入createStore(reducer) 的 reducer 函数,即combineReducers 返回的 reducer ，
然后会把多个子reducer的调用结果集合并成一个 state 树：这个新的树就是应用的下一个 state！所有订阅 store.subscribe(listener) 的监听器都将被调用；
Action（不同写法）和时间旅行，热更新, ActionCreators，bindActionCreators
Redux适合场景： 1.数据需要层层传递到子组件 2.组件间有共享数据时 3.大应用，大量数据需要维护时
function * downToOne(n) {
for (let i = n; i > 0; --i) {
yield i;
}
}
[...downToOne(5)]
类的静态方法Flux---Redux + Immutable （mute）
white-space: pre/normal/nowrap .....
==============================================================================
代理服务器：1. 翻墙 2.缓存资源，提高访问速度 3.网址过滤和访问权限限制
虽然出于性能方面的考虑，写不纯的 reducer 来变动数据在技术上是可行的，但我们并不鼓励这么做。不纯的 reducer 会使一些开发特性，如时间旅行、记录/回放或热加载不可实现。
payload 负载： 有效数据
prop-types库，功能和ts差不多
provider和connect的作用及用法
Object.assign(a,b)会改变a的值
智能组件和木偶组件
reselect库类似于useMemo和useCallback
屏幕方向：portrait / landscape
react-responsive库实现响应式应用
==============================================================================
进程和线程：
一个软件至少一个进程，一个进程至少一个线程
进程- 车间
线程-流水线
每个组件内部都有一个「记忆单元格」列表。用来对应hook调用顺序
1.a标签的download属性指定下载文件名
optional chain语法: file.files?.[0]?.name：https://www.jianshu.com/p/e9ed7660034e
父组件刷新，子组件必定也会重渲染
如果useEffect依赖一个对象，这个对象的引用不变，属性改变，不会触发回调更新！
往子组件传递函数时，哪怕用useCallback也可能触发不必要的重计算，因其依赖在变,要使用官方文档中useEventCallback的模式
获取 DOM 节点的位置或是大小的基本方式是使用 callback ref。每当 ref 被附加到一个另一个节点，React 就会调用 callback。callback ref 可以确保 即便子组件延迟显示被测量的节点 (比如为了响应一次点击)，我们依然能够在父组件接收到相关的信息。
node.getBoundingClientRect()
useImperativeHandle的使用
如果你所调用的方法是一个纯计算，并且可以在渲染时调用，你可以 转而在 effect 之外调用它， 并让 effect 依赖于它的返回值。
useMemo Hook 允许你通过「记住」上一次计算结果的方式在多次渲染的之间缓存计算结果：
（useMemo 不能保证每次记住值。在某些取值必须 从不 被重新计算的罕见场景，你可以 惰性初始化 一个 ref。方法参考？：https://reactjs.bootcss.com/docs/hooks-faq.html#how-to-create-expensive-objects-lazily）
在深层嵌套的组件树中，我们推荐的替代方案是通过 context 用 useReducer 往下传一个 dispatch函数：
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
定义一个自定义hooks，获取上一轮的 props 或 state
如果你想要从某些异步回调中读取 最新的 state，你可以用 一个 ref 来保存它，在useEffect中同步更新它，并从中读取。
函数重载来是一个同名函数完成不同的功能，编译系统在编译阶段通过函数参数个数、参数类型不同，函数的返回值来区分该调用哪一个函数，即实现的是静态的多态性。如TS，js没有重载
如何写一个自定义的 useLegacyState Hook 来合并对象 state 的更新？
如何定义state: 我们推荐把 state 切分成多个 state 变量，每个变量包含的不同值会在同时发生变化。
dangerouslySetInnerHTML 和 message?.Content语法
浏览器输入：data:text/html,<h1>Hello, world!</h1> 可以直接在web展示html
思维能力（好奇心）和表达能力（同理心）
微信小程序的国际化方案：方案研究和对比，选择
--------------------------------------------------------------------------------------------------------------------------------------------------------
React.memo 等效于 PureComponent，但它只比较 props。（你也可以通过第二个参数指定一个自定义的比较函数来比较新旧 props。如果函数返回 true，就会跳过更新。）
使用自定义hooks封装请求（检查原项目，用自定义hooks改造可复用的请求！）：https://www.robinwieruch.de/react-hooks-fetch-data
--------------------------------------------------------------------------------------------------------------------------------------------------------
useImperativeHandle(ref),useLayoutEffect和useEffect区别,useDebugValue
--------------------------------------------------------------------------------------------------------------------------------------------------------
Object.is();
Symbol类型 ，Symbol（）和Symbol for（）方法
对象进行for...of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器，详细介绍参见《Iterator 和 for...of 循环》一章。
--------------------------------------------------------------------------------------------------------------------------------------------------------
JSON Schema用来描述JSON数据格式。它有多种用途，其中之一就是实例验证。
useSelector的使用注意：The selector function should be pure since it is potentially executed multiple times and at arbitrary points in time.
依赖一个useSelector返回值变化导致不断渲染的解决： 返回字符串，再依赖！
---------------------------------------------------------------------------------------------------------------------------------------------------------
props 是只读的。不应以任何方式修改它们
props.children
key 帮助 React 识别出被修改、添加或删除的 item。key 应该从数据中获取，对应着唯一且固定的标识符，例如 post.id。
ref属性
协调
---------------------------------------------------------------------------------------------------------------------------------------------------------
spa, Compiler（编译器）,Bundler（打包工具）,Package 管理工具
CDN 代表内容分发网络（Content Delivery Network）。CDN 会通过一个遍布全球的服务器网络来分发缓存的静态内容。
SyntheticEvent 是合并而来。这意味着 SyntheticEvent 对象可能会被重用，而且在事件回调函数被调用后，所有的属性都会无效。出于性能考虑，你不能通过异步访问事件。
如果你想异步访问事件属性，你需在事件上调用 event.persist()，此方法会从池中移除合成事件，允许用户代码保留对事件的引用。
---------------------------------------------------------------------------------------------------------------------------------------------------------
ReactDOM.render/hydrate()
大多数情况下，你可以绑定一个 ref 到 DOM 节点上，可以完全避免使用 findDOMNode。
在 React 中，所有的 DOM 特性和属性（包括事件处理）都应该是小驼峰命名的方式。例如，与 HTML 中的 tabindex 属性对应的 React 的属性是 tabIndex。
dangerouslySetInnerHTML和xss攻击
---------------------------------------------------------------------------------------------------------------------------------------------------------
this.setState((state, props) => {
return {counter: state.counter + props.step};
});updater 函数中接收的 state 和 props 都保证为最新。updater 的返回值会与 state 进行浅合并。
setState() 的第二个参数为可选的回调函数，它将在 setState 完成合并并重新渲染组件后执行。通常，我们建议使用 componentDidUpdate() 来代替此方式。
后调用的 setState() 将覆盖同一周期内先调用 setState 的值，因此商品数仅增加一次。如果后续状态取决于当前状态，我们建议使用 updater 函数的形式代替：
（props/state）数据是向下流动的
Class 属性:
1.defaultProps :可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况。
1.defaultProps :可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况。2.displayName 字符串多用于调试消息。
==============================================================================
diff算法： 1.只修改变化的dom节点/属性 2.根据唯一key进行比对差异进行修改
import memoize from "memoize-one";filter = memoize( (list, filterText) => list.filter(item => item.text.includes(filterText)) );
memoization 帮助函数：缓存参数和结果，来阻止非必要的过滤
生命周期：
1.setState触发didUpdate而不是didMount
2.static getDerivedStateFromProps
React的forceUpdate()
React.PureComponent
React.memo
<React.Fragment>:简写语法 <></>
<></>JSX本质就是React.createElement创建的
React.createElement(
type,
[props],
[...children]
)
React.cloneElement( element, [props], [...children] )
---------------------------------------------------------------------------------------------------------------------------------------------------------------
getSnapshotBeforeUpdate的使用：可用于更新UI等
Error boundaries错误边界组件和异常处理
class 组件定义了生命周期方法 static getDerivedStateFromError() 或 componentDidCatch() 中的任何一个（或两者），它就成为了 Error boundaries。
函数副作用 ：纯函数 ( Pure Function ) 非纯函数 ( Impure Function ) 引用透明性 ( Referential Transparent )
JS中要想保证函数无副作用这项特性，只能依靠编程人员的习惯，即
1，函数入口使用参数运算，而不修改它
2，函数内不修改函数外的变量，如全局变量
3，运算结果通过函数返回给外部（出口）
webpack的代码分割：按需加载。
eg:
import("./math").then(math => {
console.log(math.add(16, 26));
});
React.lazy对组件的懒加载 ：可用于优雅降级，无数据时展示loading
==============================================================================
clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
异步callback，promise, generator, thunk，async函数等http://www.ruanyifeng.com/blog/2015/05/async.html
this和call,apply，bind等
H5:
html:
新标签 audio,video,canvas. 新属性：autofocus,autocomplete. Type=‘email/url/’等
css： 新特性：动画，弹性布局等
js:
新的选择器，拖放api, 文件系统api等等
scheme://host:port/path?query#fragment
==============================================================================
RFC文档；
JwtDecode解码token；
scoped;
vw、vh、vmax、vmin这四个单位都是基于视口
vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100
假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）
vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
假如浏览器的高度为500px，那么1vh就等于5px（500px/100）
vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值
==============================================================================