经典必考 React高频面试题

最新推荐文章于 2024-08-14 11:09:28 发布

xinmenglin

最新推荐文章于 2024-08-14 11:09:28 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/xinmenglin/article/details/105957926

版权

React生命周期有哪些

初始化阶段
constructor 构造函数
getDefaultProps props默认值
getInitialState state默认值
挂载阶段
componentWillMount 组件初始化渲染前调用
render 组件渲染
componentDidMount组件挂载到 DOM后调用
更新阶段
componentWillReceiveProps 组件将要接收新 props前调用
shouldComponentUpdate 组件是否需要更新
componentWillUpdate 组件更新前调用
render 组件渲染
componentDidUpdate 组件更新后调用
卸载阶段
componentWillUnmount 组件卸载前调用

setState是同步的还是异步的？

setState本身并不是异步的，而是 React的批处理机制给人一种异步的假象

React会批处理机制中存储的多个 setState进行合并

React如何实现自己的事件机制？

React事件并没有绑定在真实的 Dom节点上，而是通过事件代理，在最外层的 document上对事件进行统一分发。
组件挂载、更新时：事件初始化：触发事件时：

为何React事件要自己绑定this？

React在 document上进行统一的事件分发， dispatchEvent通过循环调用所有层级的事件来模拟事件冒泡和捕获。
在 React源码中，当具体到某一事件处理函数将要调用时，将调用 invokeGuardedCallback方法。

原生事件和React事件的区别？

React 事件使用驼峰命名，而不是全部小写。
通过 JSX , 你传递一个函数作为事件处理程序，而不是一个字符串。
在 React 中你不能通过返回 false 来阻止默认行为。必须明确调用 preventDefault

React的合成事件是什么？

事件处理程序将传递 SyntheticEvent 的实例，这是一个跨浏览器原生事件包装器。它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()，在所有浏览器中他们工作方式都相同。

React和原生事件的执行顺序是什么？可以混用吗？

React的所有事件都通过 document进行统一分发。当真实 Dom触发事件后冒泡到 document后才会对 React事件进行处理。
所以原生的事件会先执行，然后执行 React合成事件，最后执行真正在 document上挂载的事件
React事件和原生事件最好不要混用。原生事件中如果执行了 stopPropagation方法，则会导致其他 React事件失效。因为所有元素的事件将无法冒泡到 document上，导致所有的 React事件都将无法被触发。

虚拟Dom比普通Dom更快吗？

VitrualDom的优势在于 React的 Diff算法和批处理策略， React在页面更新之前，提前计算好了如何进行更新和渲染 DOM。实际上，这个计算过程我们在直接操作 DOM时，也是可以自己判断和实现的，但是一定会耗费非常多的精力和时间，而且往往我们自己做的是不如 React好的。所以，在这个过程中 React帮助我们"提升了性能"。

虚拟Dom中的$$typeof属性的作用是什么？

$$typeof是一个 Symbol类型的变量，这个变量可以防止 XSS JSON中不能存储 Symbol类型的变量。

React组件的渲染流程是什么？

createElement函数对 key和 ref等特殊的 props进行处理，并获取 defaultProps对默认 props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个 ReactElement对象（所谓的虚拟 DOM）。

为什么代码中一定要引入React？

JSX只是为 React.createElement(component,props,…children)方法提供的语法糖。
所有的 JSX代码最后都会转换成 React.createElement(…)， Babel帮助我们完成了这个转换的过程。
所以使用了 JSX的代码都必须引入 React。

为什么React组件首字母必须大写？

babel在编译时会判断 JSX中组件的首字母，当首字母为小写时，其被认定为原生 DOM标签， createElement的第一个变量被编译为字符串；当首字母为大写时，其被认定为自定义组件， createElement的第一个变量被编译为对象；

React在渲染真实Dom时做了哪些性能优化？

在 IE（8-11）和 Edge浏览器中，一个一个插入无子孙的节点，效率要远高于插入一整个序列化完整的节点树。
React通过 lazyTree，在 IE（8-11）和 Edge中进行单个节点依次渲染节点，而在其他浏览器中则首先将整个大的 DOM结构构建好，然后再整体插入容器。
并且，在单独渲染节点时， React还考虑了 fragment等特殊节点，这些节点则不会一个一个插入渲染。