1. Object.is()方法与‘===’的区别

区别：NaN - NaN 与 -0 - +0 ；能不能区分是否相等；
1) Object.is
Object.is(NaN, NaN) —- true
Object.is(-0, +0) —- false;

2) 采用===判断
NaN === NaN —- false
-0 === +0 —- true

js2flowchart: 一个可视化库，可将任何JavaScript代码转换为漂亮的SVG流程图。学习其他代码。设计你的代码。重构代码。文件代码。解释代码。

2. 宏任务，微任务

3. 前端知识的自检

https://juejin.im/post/5cc1da82f265da036023b628#heading-26

4. 防抖与节流

防抖:( 触发事件后在n秒后函数才会执行并且只能执行1次 )指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间(非立即执行版和立即执行版)
等同于每次执行的时候，都延迟几秒才执行（为了避免多次延迟，需要每次验证setTimeout是否存在，如果存在则清除重新赋值,避免内存泄漏）
应用场景:
1) search框搜索文本, 每次搜索延迟几秒执行
2) window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

function fd(func, wait, immediate){
  let timeout;
  return function(){
      let content =  this;
    let args = arguments;
    //永久得到外层变量的保留权，变量值不会丢失
    if (timeout) clearTimeout(timeout);
    if(immediate){
        var callNow = !timeout;    //每次都必须被清除掉
       timeout = null;
       if (callNow) func.apply(context, args)
    }else{
         timeout = setTimeout(function(){
                func.apply(context, args)
       }, wait);
    }
  }
}

节流: ( 连续触发事件，在n秒内只能执行一次)连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。 (时间戳版和定时器版)
应用场景:
1) 鼠标不断点击触发，mousedown(单位时间内只触发一次)
2) 监听滚动事件, 页面监听滚动，设置不停的设置某一个属性值(鼠标的每毫秒移动，会触发多次事件，此时需要做监管，多少秒内才能设置1次，减少性能消耗)


/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function jl(func, wait, type){
  //时间戳，计算多长时间段内才执行
  if(type === 1){
    let previous = 0;
  }else if(type === 2){
      let timeout;
  }
  //闭包保存变量
  return function(){
      let context =  this;
    let args = arguments;
    if(type===1){
        let now = Date.now();
          //时间戳内做计算    
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
    if(type===2&& !timeout){
        timeout = setTimeout(() => {
             timeout = null;
             func.apply(context, args)
        }, wait)
    }
  }
}

react 底层原理

15版本中Stack (React v15.4.2 )协调引擎, 16版本发布后Fiber
我学习及调研的部分

移动端（ReactNative）
浏览器（ReactDOM）
服务端渲染
ReactART（使用 React 绘制矢量图形）
其它

常规浏览器中 React DOM 的逻辑流程( React 的架构设计理念)
ReactDOM.render 和 component.setState 这两者对应了组件的挂载和更新
生命周期
constructor, componentWillMount,componentDidMount,shouldComponentUpdate(nextProps, nextState, nextContext), componentDidUpdate, componentWillReceiveProps,componentWillUnmount,render, ReactDOM.render

5. React16.1新的生命周期的特点

加载ing阶段
constructor(),
static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，
每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，
返回null则说明不需要更新state；配合componentDidUpdate，
可以覆盖componentWillReceiveProps的所有用法

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

更新阶段ing
componentDidUpdate()
getSnapshotBeforeUpdate()
卸载阶段
componentDidCatch(error，info)

React.createElement-> ReactElement到底做什么?
1) JSX 会被转换成 React 组件

2) 挂载是初始化 React 组件的过程。该过程通过创建组件所代表的 DOM 元素，并将它们插入到提供的 container 中来实现。
虚拟 DOM 是一种 DOM 的表现形式。 React 用虚拟 DOM 进行组件差异计算等过程。该过程中无需直接操作 DOM 。这使得 React 在更新视图时候更快。但在 React 的源码中没有名为“Virtual DOM”的文件或者类。这是因为虚拟DOM 只是一个概念，一种如何操作真实 DOM 的方法。所以，有些人说虚拟DOM 元素等同于 React 组件，但在我看来，这并不完全正确。我认为虚拟 DOM 指的是这三个类：ReactCompositeComponent、ReactDOMComponent 和 ReactDOMTextComponent

react diff

react16版本

虚拟 dom 对象（Virtual DOM）
虚拟 dom 差异化算法（diff algorithm）
单向数据流
组件声明周期
事件处理

React Render

1 React.render 作为入口接受一个 React 元素和游览器中的 dom 负责调用渲染,nextReactRootIndex 为每个 component 的唯一标识
2 引入 component 类的概念，ReactDOMTextComponent 是一个 component 类定义。ReactDOMTextComponent 针对于文本节点进行处理。并且在 ReactDOMTextComponent 的原型上实现了 mountComponent 方法，用于对组件的渲染，返回组件的 dom 结构。当然 component 还具有更新和删除操作，这里将在后续讲解。
3 instantiateReactComponent 用来根据 element 的类型（现在只有一种 string 类型），返回一个 component 的实例。其实就是个类工厂。

虚拟dom的创建
React.createElement 来创建一个虚拟 dom 元素。最终会返回一个 ReactElement 虚拟元素实例，key 的定义可以提高更新时的效率(两种类型，一种是标签，一种是文本)
创建文本: ReactDOMTextComponent
创建dom ReactDOMComponent

React实现上分为2部分：
Fiber的关键特性如下

增量渲染（把渲染任务拆分成块，匀到多帧）
更新时能够暂停，终止，复用渲染任务
给不同类型的更新赋予优先级
并发方面新的基础能力

React实现上分为2部分：
reconciler 寻找某时刻前后两版UI的差异。包括之前的Stack reconciler与现在的Fiber reconciler
renderer 插件式的，平台相关的部分。包括React DOM、React Native、React ART、ReactHardware、ReactAframe、React-pdf、ReactThreeRenderer、ReactBlessed等等

三.fiber与fiber tree

React运行时存在3种实例：

DOM 真实DOM节点
Instances React维护的vDOM tree node

(Instances是根据Elements创建的，对组件及DOM节点的抽象表示，vDOM tree维护了组件状态以及组件与DOM树的关系)

Elements 描述UI长什么样子（type, props）

redux
redux有三大准则
1）单一数据源，整个应用状态，都应该被存储在单一store的对象树中。
2）只读状态: 就是发送（dispatch）一个动作（Action）
3）使用纯函数去修改状态（reducers）,中间用applymiddle

react-redux
容器组件，负责管理数据和业务逻辑，不负责UI呈现
UI组件，提供UI呈现，无状态即不使用this.state，状态全部由this.props提供
由connect生成容器组件，每次store改变会调用connect，connect接收两个参数: mapStateToProps, mapDispatchToProps
mapStateToProps，将状态映射到UI组件的props
mapDispatchToProps，将dispatch方法映射到UI组件的props
Provider组件，使用content API将store从顶层开始传到每一层component供connect使用

二、redux处理异步的中间件

redux-thunk
redux-thunk中间件允许action是一个方法
中间件收到action后会执行action方法并将结果提供给reducer
action混乱导致不易维护
redux-saga
saga会监听action并基于这个action执行Effects操作
Effects提供灵活的API，包括阻塞、非阻塞调用，取消、等待、race等操作
方便隔离并执行异步操作，并易于测试

xss:

设置 HTTP Header 中的 Content-Security-Policy
转义字符
HttpOnly Cookie设置
1. CSRF:
即跨站请求伪造，是一种常见的Web攻击，它利用用户已登录的身份，在用户毫不知情的情况下，以用户的名义完成非法操作。

2. Vue实现这种数据双向绑定的效果，需要三大模块：

Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
Watcher：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

3. Observer

Observer的核心是通过Obeject.defineProperty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者，订阅者就是Watcher。

4. Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：

在自身实例化时往属性订阅器(dep)里面添加自己
自身必须有一个update()方法
待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调
5. Compile
Compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
会先将跟节点el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中

Ng
脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()

混篇

【201803-A】知识点整理