网易二面

A

讲一讲你工作的项目 => 有遇到什么难点吗

qiankun 都具体做了什么

微前端接入笔记

css 盒模型 的 padding-top 100px 是以什么为标准的

监听用户关闭页面，弹出模态窗怎么实现

讲一讲你对 vue 路由的了解 => history 和 hash 路由有什么不同

怎么实现 0.1+ 0.2 === 0.3

垂直居中的方法有哪几种

用过 h5 吗，有遇到什么困难吗

讲一讲 call apply bind 的区别

手写 call, apply 和 bind.js

props 中 react 和 vue 表现形式是怎样的

父子元素 event.target current.target 各是谁

手写数组求最小差值

手写数组求最小差值

讲一下节流和防抖

节流和防抖

怎么模拟用户 hover 两秒后事件

内联元素 span input img 垂直居中 为什么表现形式不一样

组件传值除了 prop 还有什么形式

usecoontext provider consumer

讲一讲怎么用 hook 模拟 componentWillMount

input 原生方式监听 value

讲一讲 currentRef 和 useRef 有什么不同 你分别在什么场景下用到

讲一下深拷贝和浅拷贝

讲一讲 vue 和 react 都是怎么监听 input 事件的

immutable。js 的实现原理是怎样的

性能优化 => Redux 为什么 不能直接 修改值

讲一讲 purecomponent 的原理 => shouldComponentUpdate 是怎么做处理的

讲一下 type 和 interface 区别

相同点

都可以描述一个对象或者函数;
interface;
interface User {
  name: string;
  age: number;
}

interface SetUser {
  (name: string, age: number): void;
}

type User = {
  name: string;
  age: number;
};

type SetUser = (name: string, age: number)=> void;
都允许拓展（extends）
interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。
interface extends interface
interface Name {
name: string;
}
interface User extends Name {
age: number;
}
 type extends type
type Name = {
name: string;
}
type User = Name & { age: number };
 interface extends type
type Name = {
name: string;
}
interface User extends Name {
age: number;
}
 type extends interface
interface Name {
name: string;
}
type User = Name & {
age: number;
}
type 可以而 interface 不行

type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
wong();
}
interface Cat {
miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

type 语句中还可以使用 typeof 获取实例的 类型进行赋值

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

type StringOrNumber = string | number;
type Text = string | { text: string };
type NameLookup = Dictionary<string, Person>;
type Callback<T> = (data: T) => void;
type Pair<T> = [T, T];
type Coordinates = Pair<number>;
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
 interface 可以而 type 不行
interface 能够声明合并
interface User {
name: string
age: number
}

interface User {
sex: string
}

/_
User 接口为 {
name: string
age: number
sex: string
}
_/

用过泛型吗

工具泛型

redux

redux 会通过引用来判断前后两次 state 有没有变化

直接修改了 state 对象，然后返回的还是原来的 state 对象（被修改过的）

解决方案：创建新的对象，改变引用（创建新的引用）,新建了一个副本。

Object.assign({}, state, {
  visibilityFilter: action.filter,
});

  {...state,  visibilityFilter: action.filter} 

Immutable.js 采用了持久化数据结构和结构共享，保证每一个对象都是不可变的，任何添加、修改、删除等操作都会生成一个新的对象，且通过结构共享等方式大幅提高性能。原理参考：

Event.currentTarget 和 Event.target 的区别

currentTarget 始终是监听事件者，而 target 是事件的真正发出者。

currentTarget: 标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素

这两个方法都是监听事件触发的目标。区别是，event.currentTarget( ) 会返回当前触发事件的元素；

而 event.target( ) 会返回触发事件触发的源头元素。

用法：可以用来监听触发事件的元素是否事件发生的源头元素。这个源头元素指的是，当我点击子元素，虽然父元素的点击事件也会被触发（冒泡机制），但子元素才是事件的源头元素。

	inner: function (e) {
		console.log( '触发了inner 事件'+"  currentTarget:"+e.currentTarget.className)
	},
	middle: function (e) {
		console.log( '触发了middle事件'+"  currentTarget:"+e.currentTarget.className)
	},
	outer: function (e) {
		console.log( '触发了outer事件'+"   currentTarget:"+e.currentTarget.className)
	}

target 返回的是当前触发事件的元素，包括冒泡和捕获事件

触发了 inner 事件 currentTarget inner 触发了 middle 事件 currentTarget middle 触发了 outer 事件 currentTarget outer

	inner: function (e) {
		console.log( '触发了inner 事件'+"  target:"+e.target.className)
	},
	middle: function (e) {
		console.log( '触发了middle事件'+"  target:"+e.target.className)
	},
	outer: function (e) {
		console.log( '触发了outer事件'+"   target:"+e.target.className)
	}

触发了 inner 事件 target inner 触发了 middle 事件 target inner 触发了 outer 事件 target inner