1、react 生命周期函数

    初始化阶段：

    getDefaultProps:获取实例的默认属性

    getInitialState:获取每个实例的初始化状态

    componentWillMount：组件即将被装载、渲染到页面上

    render:组件在这里生成虚拟的 DOM 节点

    componentDidMount:组件真正在被装载之后

    运行中状态：

    componentWillReceiveProps:组件将要接收到属性的时候调用

    shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）

    componentWillUpdate:组件即将更新不能修改属性和状态

    render:组件重新描绘

    componentDidUpdate:组件已经更新

    销毁阶段：

    componentWillUnmount:组件即将销毁

shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

为什么虚拟 dom 会提高性能?(必考)

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

展示组件(Presentational component)和容器组件(Container component)之间有何不同

展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。

容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。

类组件(Class component)和函数式组件(Functional component)之间有何不同

类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态

当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

何为高阶组件(higher order component)

高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。

了解 redux 么，说一下 redux 把

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操作的，有四个组成部分 action，dispatch，view，store，工作流程是 view 发出一个 action，派发器接收 action，让 store 进行数据更新，更新完成以后 store 发出 change，view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store，在 Flux 中 dispatcher 被用来传递数据到注册的回调事件，但是在 redux 中只能定义一个可更新状态的 store，redux 把 store 和 Dispatcher 合并,结构更加简单清晰

新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们

React 的 key

react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建

在项目开发中，key属性的使用场景最多的还是由数组动态创建的子组件的情况，需要为每个子组件添加唯一的key属性值。

React系列之数据流解决方案dva

dva是react + redux封装后的解决方案

用户交互行为（比如点击按钮）

浏览器行为触发的（比如路由的跳转）

这些行为的改变是由route层上dispatch分发的一个action,如果是同步行为的话，就在model层上的reducer改变state,如果是异步行为就要先触发effect，再流入reducer里改变state

dva是一个函数，分为三层

页面层route

数据层model（处理各种数据）

服务层service(主要调接口用的)

主要讲model层，做了对redux的封装

model层包含有

namespace,命名空间

state,初始化数据的地方

effect,处理异步数据的地方

reducer，处理同步数据的地方

js部分

垃圾回收机制：

现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。

js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在一个函数中声明一个变量，就将这个变量标记为"进入环境"，从逻辑上讲，永远不能释放进入环境变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为"离开环境"。

语言引擎有一张"引用表"，保存了内存里面所有资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。

event loop事件循环：

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

宏任务：当前调用栈中执行的任务称为宏任务。（主代码快，定时器等等）。

微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务为微任务。（可以理解为回调事件，promise.then，proness.nextTick等等）。

宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。

从地址栏输入URL到页面加载完成发生了什么？

第一步 浏览器通过DNS查找该域名的 IP 地址

第二步 浏览器根据解析得到的IP地址向 web 服务器发送一个 HTTP 请求

第三步 服务器收到请求并进行处理

第四步 服务器返回一个响应

第五步 浏览器对该响应进行解码，解析html为dom、解析css 为css-tree、dom+ css 生成render-tree 绘图

第六步 页面显示完成后，浏览器发送异步请求。

第七步 整个过程结束之后，浏览器关闭TCP连接。

DNS域名解析，

TCP连接，HTTP请求

处理请求返回HTTP响应，

页面渲染，

关闭连接

tcp链接：在通过第一步的DNS域名解析后，获取到了服务器的IP地址，在获取到IP地址后，便会开始建立一次连接，这是由TCP协议完成的，主要通过三次握手进行连接

HTTP请求：在确认与服务器建立连接后，便会发送一个HTTP请求，HTTP请求的报文主要包括请求行，请求头，请求正文。

浏览器渲染页面的一般过程：

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

promise详解

resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject

作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

promise有三个状态：

1、pending[待定]初始状态

2、fulfilled[实现]操作成功

3、rejected[被否决]操作失败当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；

promise

状态一经改变，不会再变。

Promise对象的状态改变，只有两种可能：从pending变为fulfilled

从pending变为rejected。这两种情况只要发生，状态就凝固了，不会再变了。

防抖和节流

防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。

思路：每次触发事件时都判断当前是否有等待执行的延时函数。

```

//防连击 防抖动

import { useRef, useEffect } from 'react';

export function useInterval(callback: () => void, delay: number|null) {

  const savedCallback = useRef(null);

  useEffect(() => {

    savedCallback.current = callback;

  });

  useEffect(() => {

    const tick = () => {

      savedCallback.current();

    };

    if (delay !== null) {

      const id = setInterval(tick, delay || 0);

      return () => clearInterval(id);

    }

  }, [delay]);

}

export function useDebounceFn(func, wait, immediate) {

    let timeout = useRef(), context, result;

    function resDebounced(...args) {

        context = this;

        if (timeout.current) clearTimeout(timeout.current);

        if (immediate) {

            const callNow = !timeout.current;

            timeout.current = setTimeout(function() {

                timeout.current = null;

            }, wait);

            if (callNow) result = func.apply(context, args);

        } else {

            timeout.current = setTimeout(function() {

                timeout.current = null;

                result = func.apply(context, args);

            }, wait);

        };

        return result;

    };

    resDebounced.cancal = function(){

        clearTimeout(timeout.current);

        timeout.current = null;

    };

    return resDebounced;

};

```

什么是跨域？

(协议，域名，端口，三者有一不一样，就是跨域)

这个onchange是怎么触发的呢？经过实验，大致是以下几个步骤

一、当input捕获到焦点后，系统储存当前值

二、当input焦点离开后，判断当前值与之前存储的值是否不等，如果为true则触发onchange事件。

1、事件冒泡

事件冒泡：事件会从最内层的元素开始发生，一直向上传播，直到document对象。

2、事件捕获

事件捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

一、浏览器缓存基本认识：分为强缓存和协商缓存

1、浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器。

2、当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源。

强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。

当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。