React 前端笔试试题（含详细答案）

React前端笔试试题（含详细答案）适用场景：前端新人考核、面试自测、课堂测试难度：基础+进阶混合（偏实际开发）题型：选择题、填空题、简答题、代码实操题一、单项选择题（共10题，每题3分，共30分）1.关于React虚拟DOM，以下说法正确的是（）A.虚拟DOM是真实DOM的拷贝，操作速度比真实DOM慢B.虚拟DOM是JS对象，React通过diff算法对比新旧虚拟DOM，最小化更新真实DOMC.虚拟DOM可以直接操作浏览器页面D.项目中禁用虚拟DOM可以提升性能答案：B解析：虚拟DOM本质是描述DOM结构的JS对象，并非真实DOM。React核心优化逻辑就是通过diff对比差异，只更新变动的DOM节点，减少重排重绘。虚拟DOM无法直接操作页面，且是React性能优化的核心，不能禁用。2.React组件中，state的特点不包括以下哪项（）A.状态更新是异步的B.直接修改state不会触发视图更新C.state是组件私有的可变数据D.多个setState调用一定会多次更新视图答案：D解析：React会对多次setState进行批量更新合并，避免频繁渲染，提升性能，不会多次更新视图。state必须通过setState/setXxx修改，直接赋值无法触发更新，且更新逻辑为异步。3.函数组件中，用于保存组件状态的Hook是（）A.useEffectB.useStateC.useRefD.useContext答案：B解析：useState专门用于函数组件定义响应式状态；useEffect处理副作用；useRef保存不变值/获取DOM；useContext用于跨层级获取上下文数据。4.以下关于useEffect说法错误的是（）A.依赖项为空数组时，仅在组件挂载后执行一次B.不写依赖项时，每次组件渲染都会执行C.可以返回一个清理函数，用于解绑事件、清除定时器D.useEffect可以同步修改state，不会出现闭包问题答案：D解析：useEffect存在典型的闭包陷阱，会捕获当前渲染周期的state、props值，并非实时最新值，开发中很容易出现数据滞后问题。5.React中key的主要作用是（）A.提升页面样式渲染速度B.在列表diff时，精准识别节点身份，减少DOM误更新C.给组件设置唯一样式标识D.解决组件变量冲突答案：B解析：key是列表节点的唯一标识，diff算法通过key判断节点是新增、删除、还是复用，避免列表顺序变动时出现DOM错位、数据错乱问题。不推荐用index作为key。6.关于props说法正确的是（）A.子组件可以直接修改父组件传递的propsB.props是只读的，单向数据流C.props可以在组件内部通过useState修改D.父组件props更新，子组件不会重新渲染答案：B解析：React遵循单向数据流，props由父组件传递、子组件只读，子组件无法直接修改，如需修改必须通过父组件传递的修改函数触发父组件更新。7.useRef的用途不包括（）A.获取真实DOM元素B.保存组件更新后依然保留的变量C.变量更新触发组件重新渲染D.存储定时器、事件实例等数据答案：C解析：useRef的值变更不会触发组件重新渲染，这是和useState最大的区别，适合存放不需要视图更新的持久化变量。8.以下哪种方式可以避免函数组件不必要的重渲染（）A.使用var定义变量B.memo+useMemo+useCallback配合使用C.删除组件keyD.不写useEffect依赖项答案：B解析：memo缓存组件、useMemo缓存计算结果、useCallback缓存函数，三者配合是React函数组件核心的性能优化方案，有效避免无效重渲染。9.React组件渲染顺序正确的是（）A.挂载->更新->卸载B.更新->挂载->卸载C.挂载->卸载->更新D.更新->卸载->挂载答案：A解析：组件生命周期核心顺序：首次挂载渲染、数据变化触发更新、组件销毁执行卸载。10.关于React严格模式（StrictMode）说法正确的是（）A.严格模式会打包进入生产环境B.严格模式下开发环境会重复执行副作用，用于检测不规范代码C.开启严格模式会让组件无法渲染D.严格模式可以关闭React语法校验答案：B解析：StrictMode仅在开发环境生效，生产环境自动失效。它会重复执行useEffect等副作用，用来检测脏副作用、不合理的代码写法，帮助优化代码。二、填空题（共5题，每题4分，共20分）1.React单向数据流的核心是：数据从__________流向__________，子组件无法反向修改数据。答案：父组件、子组件2.组件卸载时需要清除定时器、解绑事件，对应的useEffect操作是__________。答案：返回清理函数3.解决React列表key报错，不推荐用index作为key的原因是__________。答案：列表增删、排序时会出现DOM节点复用错乱，导致数据和视图不匹配4.useCallback的作用是__________，避免函数每次渲染重新创建。答案：缓存函数实例5.函数组件中，获取上下文跨层级数据的Hook是__________。答案：useContext三、简答题（共4题，每题8分，共32分）1.说说useState更新状态的异步机制，以及实际开发的解决办法参考答案：React为了优化性能，会对短时间内多次setState操作进行批量合并更新，因此状态更新是异步的，更新后立即打印state无法获取最新值。常见解决方式：①使用函数式更新：setNum(prev=>prev+1)，基于上一次最新状态计算，不受批量更新影响；②通过useEffect监听状态变化，获取更新后的最新值，执行后续逻辑。2.讲讲useEffect的依赖项规则，以及常见报错原因参考答案：1.依赖项为空数组：组件挂载执行一次，适合请求接口、初始化数据；2.不写依赖项：每次组件渲染都会执行，容易造成死循环；3.写入指定依赖：依赖变化时重新执行副作用。常见报错/问题：依赖项缺失导致数据滞后、依赖项频繁变化导致无限渲染、定时器未清理导致内存泄漏。3.说说React中memo、useMemo、useCallback的区别和使用场景参考答案：1.memo：组件缓存，包裹函数组件，props不变时组件不重渲染，解决组件无效刷新；2.useMemo：计算属性缓存，缓存复杂计算结果，依赖不变则不重复计算，适合渲染开销大的计算逻辑；3.useCallback：函数缓存，缓存函数引用，配合memo使用，避免父组件渲染导致子组件接收的函数props变化，触发子组件重渲染。4.什么是闭包陷阱？React中如何解决？参考答案：闭包陷阱：组件每一次渲染都会生成独立的作用域，useEffect、定时器等闭包会捕获当前渲染周期的state/props，后续状态更新后，闭包内依然使用旧值，导致数据滞后。解决方式：①补齐useEffect依赖项；②使用useRef存储最新state/props，绕过闭包；③使用函数式更新状态。四、代码实操题（共1题，18分）需求：编写一个React函数组件，实现计数器功能：1.页面展示当前计数；2.点击加1、减1按钮修改数值；3.页面挂载后，每隔1秒自动加1；4.组件卸载后，清除定时器，防止内存泄漏。参考答案代码：jsx

import{useState,useEffect}from'react'

functionCounter(){

const[count,setCount]=useState(0)

//手动加1

consthandleAdd=()=>{

setCount(prev=>prev+1)

}

//手动减1

consthandleSub=()=>{

setCount(prev=>prev-1)

}

//定时器自动计数

useEffect(()=>{

consttimer=setInterval(()=>{

setCount(prev=>prev+1)

},1000)

//组件卸载清除定时器

return()=>{

clearInterval(timer)

}

},[])

return(

<div>

<p>当前计数：{count}</p>

<buttononClick={handleAdd}>加1</button>

<buttononClick={handleSub}>减1</button>

</div>

)

}