[面经]-[伴鱼]-[2020.03.26]

[zhaofeihao]

1. React生命周期讲解

React生命周期管理

2. constructor 中的 super(props)的作用

传与不传有什么区别？

3. 在所有 React 生命周期中，哪个钩子拿不到 this

4. render 函数的返回值类型有哪些

16.x render函数新增的返回类型
render 函数

5. 在 render 函数中可以写 if ... else 吗

React的8种条件渲染方法

6. 写一个条件渲染，判断用户登录就显示某个button，未登录就不显示

7. React 中如何减少 render 次数

React优化：竭尽全力的减少render渲染
性能！！让你的 React 组件跑得再快一点

8. componentDidMount 中通常都做些什么操作

• 接口请求
• 依赖DOM的操作

9. setState 有几个参数？setState 之后发生了什么？

10. setState 是同步还是异步？如何进行批量更新？

11. setState 和 replaceState 的区别

12. 写一个 HOC Loading 组件

class HOC extends React.Component{
    constructor(wrappedComponent){
        this.wrappedComponent = wrappedComponent;
        this.state = {
            isLoading: false
     }
    }

    render(){
        return(
            this.state.isLoading ? <Loading /> : <WrappedComponent ...this.props/>
        )
    }
}

13. 父子组件通信、子父组件通信、兄弟组件通信

子父组件通信，回调函数不推荐使用了，为什么？
子组件可以直接修改props吗，为什么？

14. mobx如何同步更新状态，如何异步更新状态

15. 虚拟DOM的优点

「Virtual Dom 的优势」其实这道题目面试官更想听到的答案不是上来就说「直接操作/频繁操作 DOM 的性能差」，如果 DOM 操作的性能如此不堪，那么 jQuery 也不至于活到今天。所以面试官更想听到 VDOM 想解决的问题以及为什么频繁的 DOM 操作会性能差。

DOM 引擎、JS 引擎 相互独立，但又工作在同一线程（主线程）
JS 代码调用 DOM API 必须 挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎，DOM 重绘后再转换可能有的返回值，最后激活 JS 引擎并继续执行若有频繁的 DOM API 调用，且浏览器厂商不做“批量处理”优化，
引擎间切换的单位代价将迅速积累若其中有强制重绘的 DOM API 调用，重新计算布局、重新绘制图像会引起更大的性能消耗。

其次是 VDOM 和真实 DOM 的区别和优化：

• 虚拟 DOM 不会立马进行重排与重绘操作
• 虚拟 DOM 进行频繁修改，然后一次性比较并修改真实 DOM 中需要改的部分，最后在真实 DOM 中进行排版与重绘，减少过多DOM节点排版与重绘损耗
• 虚拟 DOM 有效降低大面积真实 DOM 的重绘与排版，因为最终与真实 DOM 比较差异，可以只渲染局部

16. 写一个深拷贝

17. 讲解闭包及其作用

18. 常用的ES6新特性

19. 讲解Promise

20. 输出

class Animal() {
	constructor() {
		this.type = 'animal'
	}
	says(say) {
		setTimeout(() => {
			console.log(this.type + ' says ' + say)
		}, 1000)
	}
}
var animal = new Animal()
animal.says('hi')

21. webpack 拆包如何配置

抽离第三方依赖
如想把react 单独拆成一个包。
loader的作用

22. react 新版本特性

fiber 讲解
getDerivedStateFromProps
getSnapshotBeforeUpdate

[zhaofeihao]

2. constructor 中的 super(props)的作用?传与不传有什么区别？

调用super的原因：

• ES6 中，在子类的 constructor 中必须先调用 super 才能引用 this；
• super(props)的目的：在constructor中可以使用this.props；
• 根本原因是constructor会覆盖父类的constructor，导致你父类构造函数没执行，所以手动执行下。

如果要从另一个角度看的话：

假设在es5要实现继承,首先定义一个父类:

//父类
function sup(name) {
    this.name = name;
}
//定义父类原型上的方法
sup.prototype.printName = function (){
    console.log(this.name);
}

再定义他sup的子类，继承sup的属性和方法:

function sub(name, age){
    sup.call(this,name);    //调用call方法,继承sup超类属性
    this.age = age;
}    

sub.prototype = new sup();   //把子类sub的原型对象指向父类的实例化对象，这样即可以继承父类sup原型对象上的属性和方法
sub.prototype.constructor = sub;    //这时会有个问题子类的constructor属性会指向sup，手动把constructor属性指向子类sub
//这时就可以在父类的基础上添加属性和方法了
sub.prototype.printAge = function (){
    console.log(this.age);
}

这时调用父类生成一个实例化对象:

    let jack = new sub('feihao', 18);
    jack.printName() ;   //输出 : feihao
    jack.printAge();    //输出 : 18

这就是es5中实现继承的方法。
而在es6中实现继承:

  class sup {
        constructor(name) {
            this.name = name
        }
    
        printName() {
            console.log(this.name)
        }
    }

class sub extends sup{
    constructor(name,age) {
        super(name) // super代表的事父类的构造函数
        this.age = age
    }

    printAge() {
        console.log(this.age)
    }
}

let jack = new sub('feihao', 18)
    jack.printName()    //输出 : feihao
    jack.printAge()    //输出 : 18

参考

1. 为什么我们要写 super(props) ？