react面试题面试必备

Posted 2021-09-01 老张在线敲代码

1. setState 何时同步何时异步？

(1) setState
只在合成事件（react为了解决跨平台，兼容性问题，自己封装了一套事件机制，代理了原生的事件，像在jsx中常见的onClick、onChange这些都是合成事件）和钩子函数（生命周期）中是“异步”的，在原生事件和
setTimeout 中都是同步的

（2）setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数
setState(partialState, callback) 中的callback拿到更新后的结果

(3）setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout
中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState
的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新

2. react渲染机制

（1）当页面一打开，就会调用render构建一棵DOM树

（2）当数据发生变化（ state | props ）时，就会再渲染出一棵DOM树

（3）此时，进行diff运算，两棵DOM树进行差异化对比，找到更新的地方进行批量改动

3. React中refs 的作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄

我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄

该值会作为回调函数的第一个参数返回

4.在构造函数中调用 super(props) 的目的是什么

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用
super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props

5. setState的两个参数

第一个参数是要改变的state对象

第二个参数是state导致的页面变化完成后的回调，等价于componentDidUpdate