React一到三年面试题以及进阶题分享

66 阅读 0 评论 44 点赞

我是靠谱客的博主大方诺言，最近开发中收集的这篇文章主要介绍React一到三年面试题以及进阶题分享，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

感谢内容提供者：金牛区吴迪软件开发工作室

笔者是众多React开发者之一，编写react已有不少时日了，面试的时候遇到了很多自己不懂的东西，每次面试后都会把自己感觉蛮重要的内容总结下来，于是便有了此篇文章。希望此文章能够帮助到大家。

React面试题正文：

React的特点和关键版本区别。
答案：React的特定及缺点以及关键版本介绍
请讲讲react的this.setState()方法
答案：React的this.setState详细介绍
为什么this.setState是异步的？
答案：https://blog.csdn.net/weixin_43606158/article/details/100572101
React的ref是干嘛的？怎么创建ref？
答案：React函数组件和类组件创建ref及其常用场景讲解
你知道的React生命周期有哪些？分别都是用来做什么的？
答案：React的生命周期钩子函数详细介绍
React运用了什么算法？你有了解过这个算法么？
答案：
React的diff算法解析
React的fiber算法解析
如何提高React框架的性能？
答案：React详细介绍性能优化的方法
React创建组件有几种方式？
答案：React创建组件的3种方式介绍
你开发React的时候用过哪些UI框架并讲一下他们的设计理念？
答案：有很多，请自行百度
请讲讲React的组件的概念。
答案：React之组件介绍
你知道JSX么？请简要讲述一下。
答案：JSX浅析
你的react项目当中用过哪些插件？
答案：React实际项目常用插件
React父子组件传参是通过什么方式？
答案：React父子组件传参
你知道React的虚拟DOM么？为什么虚拟DOM会提升性能？
答案：React虚拟DOM的机制特点
当使用F5刷新页面的时候会经过react的哪些生命周期？
答案：与渲染页面的时候走的是一样的
你用过Redux么？请讲一下Redux的特点。
答案：Redux核心知识
请讲一下react-router。
答案：React-router详细介绍
你了解react-hook么？
答案：了解react-hook以及State Hook
React Hook之Effect Hook
React Hook之useContext的介绍与使用
React Hooks相对高阶组件和Class组件有什么优势/缺点？
react做路由跳转的方法你知道哪些？
答案：React做路由跳转
webpack中，是借助loader完成的JSX代码转换还是babel？
答案：借助了babel的 preset-react
调用setState后，发生了什么？
答案：
分为俩种情况：

React的更新策略已经被启动时（事件触发时）：
React响应事件处理 => 启动更新策略事务（绑定了wrapper） => 事务perform => setState => 获取内部实例 => 存储新的状态 => 发现更新策略事务已启动 => 将当前内部实例放入脏组件数组 => setState执行结束 => 更新策略事务perform完毕 => wrapper处理组件状态的更新
React的更新策略没有被启动时（异步触发时）：
setState => 获取内部实例 => 存储新的状态 => 发现更新策略事务未启动 => 启动更新策略事务（绑定了wrapper） => 事务perform => 将当前内部实例放入脏组件数组 => 更新策略事务perform完毕 => wrapper处理组件状态的更新 => setState执行结束

setState是异步的，这个点你在什么时候遇到过坑
答案：比如说你使用了setState更改了状态，但是你在他这个方法后面输出那个状态值会发现结果还是之前的状态，只有在他的第二个参数回调函数中才可以输出更改后的state。
再就是当多次调用setState的时候对于相同的会被糅合成一个，后面的覆盖掉前面的。【它会集齐一批需要更新的组件然后一起更新。】
refs的作用是什么，你在什么业务场景下使用过refs？
答案：用来控制dom不好控制的内容，比如说我们做一个上传图片的功能，自定义样式，这时候我们用上ref就可以很轻松的实现：可参考：React自定义input样式以及实现上传照片功能。以及Refs是一种很好的发送消息给特定子实例(通过流式的Reactive props 和 state来做会不方便)的方式。

备注：Refs 不能连接到一个 stateless function（无状态函数），因为这些组件没有支持实例。你总是可以包装一个无状态组件在一个标准复合组件里并且连接一个ref到这个复合组件。

useEffect如何在props改变的时候才更新，初始化的时候不触发？
答案：【伪代码】

import React,{useEffect, useRef} from 'react'
function Test(props) {
	const refs = useRef(0);
	useEffect(() => {
		console.log('mount')
	}, [])
	useEffect(() => {
		if (refs.current++) {
			console.log('update')
		}
	}, [props.param])
	/* 后面代码省略 */
}

ref是一个函数，有什么好处？
答案：react可以更优雅的完成对组件销毁时的变量回收，你只要这么用，react在销毁组件时，this.test 很方便的就可以被清理变为null。
另一好处：ref是一个回调函数，使得我们能在这个函数中做更多的事情，比如说，我们可以借助这种函数的机制，让父组件直接获取子组件的Dom。而如果你让ref是一个字符串，实现这个功能是不可能的。
useImperativeHandle是做什么的？
答案：https://react.docschina.org/docs/hooks-reference.html#useimperativehandle
高阶组件你是怎么理解的，它本质是一个什么东西？
高阶组件和继承哪一个更好，在React里用过继承么？
高阶组件的缺点是什么？
受控组件与非受控组件的区别？
受控组件与非受控组件分别适合在什么场景使用？
答案：
this指向问题你一般怎么解决？
答案：方法很多种，使用bind，call，apply，或者定义变量然后赋值。
函数组件怎么做性能优化
函数组件比普通组件性能高还是低？
答案：高，因为函数组件没有类组件哪些冗余的生命周期等等
你在哪个生命周期里发送ajax？
答案：componentDidMount
ssr的原理是什么？
redux-sage的设计思想是什么？什么是sideEffects
react,jquery,vue是否有可能共存在一个项目中？
组件是什么？类是什么？类被编译成什么？
你是如何跟着社区成长的？
如何避免ajax数据重新获取？
react-router4的核心思想是什么，和3有什么区别
immutable.js和redux的最佳实战
reselect是做什么使用的
react-router的基本原理，hasHistory,browserHistory
什么情况下使用异步组件
xss攻击在react中如何防范？
答案：使用JSX就可以防范，但注意少用react的这个方法(dangerouslySetInnerHTML)：（特殊情况还是可以用的）详细介绍：https://blog.csdn.net/weixin_43606158/article/details/95863666
useMemo和useCallback用过么？他们是做什么的？他们的区别是什么？
请讲讲React 16.X 的Fiber原理。
React跨平台的实现原理。
说一说redux，以及比flux先进的原因。
React你做过降级处理么？降级以后有什么作用？【个人认为有点过时了】
答案：React总结笔记之降级兼容
React.lazy 实现原理
antd 按需加载实现原理
react-router 实现原理，hash 路由实现原理
React 事件注册实现原理