React面试题收集

React setState调用之后发生了什么,是同步还是异步

(1)React中setState后发生了什么

在代码中调用setState函数之后,React会将传入的参数对象与组件当前的状态合并,然后触发调和过程,经过调和过程react会以相对高效的方式根据新的状态构建react元素树,并且着手重新渲染整个UI界面

在react得到元素树之后,react会自动计算出新的树与老的树的节点的差异然后根据差异对界面进行最小化重新渲染,在差异计算算法中,react能够精确的知道那些位置发生了了改变,这就是保证了按需更新,而不是全部重新渲染

短时间内频繁setState。react会将state的改变压入栈中,在合适的时机,批量更新state和视图,达到提高性能的效果

(2)setState是同步的还是异步的

setstate并不是简单的同步和异步的,他的表现是会因为调用场景的不同而不同如果值为true则执行异步操作,false则直接更新

异步:在react可以控制的地方,就为true,比如在React生命周期事件和合成事件中都会走合并的操作,延迟更新的策略

同步:在react无法控制的地方,比如原生事件,具体就是在addEventListener,setTimeout。setInterval等事件中,就只能同步更新,在异步的操作执行的是同步的操作

React中setState的第二个参数作用是什么

setState的第二个参数是一个可选的回调函数,这个回调函数将组件重新渲染后执行等价于componentDidUpdate生命周期内执行,通常建议使用componentDidUpdate来代替此方式,在这个回调函数中你可以拿到更新后的state值

(3)react中的setState和replaceState的区别是什么

setState()用于设置状态对象,其语法如下

setState(object,nextState[,function callback]

nextState,将要设置的新状态,该状态会和当前的state合并

callback,可选参数,回调函数,该函数会在setState设置成功,且组件重新渲染后调用

合并nextState和当前state,并重新渲染组件,setState是React事件处理函数中和其请求回调函数中触发UI更新的主要方法

setState是修改其中的部分状态,相当于Object.assign,只是覆盖,不会减少原来的状态,而replace是完全替换原来的状态,想但当于赋值,将原来的state替换为另一个对象,如果新的属性减少,那么state中就没没有这个状态了。

(4)类组件和函数组件有什么异同

相同点:组件是react可复用的最小代码片段,他们会返回要在页面中渲染的react元素,也正因为组件是react的最小编码单位,所以无论是函数组件还是类组件,在使用方式和最终呈现效果上都是一样的

不同点:类组件主要是面向对象编程,函数式组件内核是函数式编程,函数式组件是未来的发展方向,类组件更加容易上手。

你可能感兴趣的:(大前端面试题,react.js,javascript,前端)