web前端 React 框架面试200题(七)

面试题 185. 如果想要在组件第一次加载后获取该组件的dom元素,应当在以下哪个生命周期中进行 ?
复制代码
A:componentDidUpdate()
B:componentDidMount()
C:componentWillUnmount()
D:shouldComponentUpdate()

答案:B
面试题 186. 简述使用哪个Hook可以为函数组件添加state ?
复制代码
A:useEffect
B:useReducer
C:useContext
D:useState

答案:D

解析:
useState返回一个state,以及更新state的函数,在初始渲染期间,返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState函数用于更新state,它接收一个新的state值并将组件的一次重新渲染加入队列
面试题 187. 简述在React组件中的JSX里,如果要添加类选择器,可以给DOM节点和组件添加()属性 ?
复制代码
A:classStyle
B:class
C:styleName
D:className

答案:D

解析:
className属性用于指定CSS的class,此特性适用于所有常规 DOM 节点和 SVG 元素,如
, 及其它标签
面试题 188. 简述JSX代码最终会被转换成使用()方法生成的react元素 ?
复制代码
A:React.jsx
B:React.cloneElement
C:React.createElement
D:React.createJsx

答案:C
面试题 189. 简述以下哪项对react-router-dom中组件分类是错误的 ?
复制代码
A:路由器组件: BrowserRouter和HashRouter
B:导航组件: Link和NavLink
C:路由匹配组件: Route和Switch
D:导航组件: Route和Switch

答案:D

解析:
在react-router-dom中通常使用的组件有三种路由器组件: 如BrowserRouter和HashRouter
路由匹配组件: Route和Switch 组件
导航组件: Link和NavLink 组件
面试题 190. 简述在函数组件中使用哪个Hook可以包裹副作用(改变 DOM、添加订阅、设置定时器、记录日志等) ?
复制代码
A:useReducer
B:useState
C:useEffect
D:useCallback

答案:C

解析:
使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把useEffect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。
面试题 191. 简述以下关于对Router组件设置history属性值解释正确的是 ?
复制代码
A:browserHistory,背后调用的是浏览器的History API。
B:hashHistory,路由将通过URL的hash部分(#)切换
C:createMemoryHistory主要用于服务器渲染,它创建一个内存中的history对象,不与浏览器URL互动
D:其他选项都正确

答案:D
面试题 192. 简述以下不属于React支持的键盘事件的是 ?
复制代码
A:onKeyUp
B:onKeyDown
C:onKey
D:onKeyPress

答案:C

解析:
React支持的键盘事件有onKeyDown,onKeyPress,onKeyUp
面试题 193. 简述在componentWillUnmount()中以下哪个操作是错误的 ?
复制代码
A:清除timer
B:取消网络请求
C:调用setState
D:清除在componentDidMount()中创建的订阅

答案:C

解析:
componentWillUnmount()中不应调用setState(),因为该组件将永远不会重新渲染。组件实例卸载后,将永远不会再挂载它。
面试题 194. 简述以下不属于React支持的动画事件的是 ?
复制代码
A:onAnimationIteration
B:onAnimationStart
C:onAnimationOver
D:onAnimationEnd

答案:C

解析:
React支持的动画事件有onAnimationStart,onAnimationEnd,onAnimationIteration
面试题 195. 以下关于Fragments组件说法错误的是?
复制代码
A:在jsx中使用Fragments组件会在html中生成dom节点
B:Fragments组件可以简写成"<>"
C:React中一个常见模式是为一个组件返回多个元素。Fragments可以让你聚合一个子元素列表
D:Fragments组件中可以设置key属性,但是简写后将不支持

答案:A
面试题 196. Class内部有一handleClick方法如下代码块,在点击事件中触发handleClick的正确方法是 ?
复制代码
handleClick(){
console.log('this.state:',this.state);
}

A:onClick={ () => this.handleClick()}
B:onClick={ this.handleClick()}
C:onClick={ this.handleClick}
D:onclick={ handleClick}

答案:A

解析:
这并不是 React 特有的行为,在JavaScript中 Class的方法默认不会绑定this
面试题 197. 简述以下选项中,哪个不是Hook的优点 ?
复制代码
A:Hook能覆盖class的所有使用场景
B:Hook使你在无需修改组件结构的情况下复用状态逻辑
C:Hook使你在非class的情况下可以使用更多的React特性
D:Hook将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据)

答案:A
面试题 198. 简述以下不是Redux的使用原则的是 ?
复制代码
A:单一数据源
B:双向数据流
C:State是只读的
D:使用纯函数来执行修改

答案:B

解析:
Redux可以用这三个基本原则来描述:1.单一数据源 2.State是只读的 3.使用纯函数来执行修改
面试题 199. 简述下面是对refs使用不合适的是 ?
复制代码
A:获取子组件的实例,直接通过子组件的setState方法修改子组件的state
B:管理焦点,文本选择或媒体播放
C:集成第三方 DOM 库
D:触发强制动画

答案:A

解析:
避免使用refs来做任何可以通过声明式实现来完成的事情,下面是几个适合使用refs的情况:
1.管理焦点,文本选择或媒体播放。
2.触发强制动画。
3.集成第三方 DOM 库
面试题 200. 简述关于Hook中里的useEffect的执行时机,下面说法正确的是 ?
复制代码
A:与class组件的componentDidMount相同
B:与class组件的componentWillUpdate相同
C:与class组件的componentDidUpdate相同
D:其他选项都不正确

答案:D

解析:
如果熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合
面试题 201. 简述 以下哪个钩子可以使组件变成"错误边界"?
复制代码
A:shouldComponentUpdate
B:getSnapshotBeforeUpdate
C:componentDidCatch
D:getDerivedStateFromProps

答案:C

解析:
如果一个class组件中定义了static getDerivedStateFromError()或componentDidCatch()这两个生命周期方法中的任意一个(或两个)时,那么它就变成一个错误边界。当抛出错误后,请使用static getDerivedStateFromError()渲染备用 UI ,使用componentDidCatch()打印错误信息。
面试题 202. 简述以下不属于React复合事件的是 ?
复制代码
A:onCompositionEnd
B:onCompositionRender
C:onCompositionUpdate
D:onCompositionStart

答案:B

解析:
React复合事件有onCompositionEnd,onCompositionStart,onCompositionUpdate
面试题 203. 简述 以下不属于React支持的触摸事件的是?
复制代码
A:onTouchCancel
B:onTouchEnd
C:onTouchStart
D:onTouchOver

答案:D

解析:
React支持的触摸事件有onTouchCancel,onTouchEnd,onTouchMove,onTouchStart
面试题 204. 简述以下关于ReactDOM.findDOMNode说法错误的是 ?
复制代码
A:findDOMNode只在已挂载的组件上可用
B:findDOMNode不能用于函数组件
C:如果你尝试调用未挂载的组件,会返回false
D:如果你尝试调用未挂载的组件,会引发异常

答案:C

解析:
findDOMNode 只在已挂载的组件上可用(即,已经放置在 DOM 中的组件)。如果你尝试调用未挂载的组件(例如在一个还未创建的组件上调用 render() 中的 findDOMNode())将会引发异常。
面试题 205. 简述以下关于Mobx中原则说法错误的是 ?
复制代码
A:Mobx 支持单向数据流
B:当状态改变时,所有衍生都会进行自动更新,可以观察到中间值
C:所有衍生默认都是同步更新
D:所有的计算值都应该是纯净的

答案:B

解析:
当状态改变时,所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。
面试题 206. ReactDOM.createPortal(child, container)函数可以将子节点渲染到存在于父组件以外的DOM节点上,那么通过Portal进行事件冒泡时,会冒泡到 ?
复制代码
A:会上冒到子元素插入的DOM节点,一直冒泡至DOM树的根
B:不会上冒
C:会上冒到子元素插入的DOM节点,不再继续上冒
D:从portal内部触发的事件会一直冒泡至包含React树的祖先

答案:D

解析:
尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 React 树, 且与 DOM 树 中的位置无关,那么无论其子节点是否是 portal,像 context 这样的功能特性都是不变的,包含事件冒泡
面试题 207. 简述在Redux中,不属于store提供的方法的是 ?
复制代码
A:store.subscribe
B:store.dispatch
C:store.getState
D:store.createStore

答案:D

解析:
不存在store.createStore方法,store可以使用Redux提供的createStore生成
面试题 208. 简述可以使子节点渲染到存在于父组件以外的DOM节点上的方法是 ?
复制代码
A:React.createPortal
B:React.createElement
C:ReactDOM.createPortal
D:ReactDom.render

答案:C

解析:
ReactDOM.createPortal函数可以将子节点渲染到存在于父组件以外的DOM节点上
面试题 209. 简述关于Hook的使用,以下说法中不满足官方使用规则的是 ?
复制代码
A:不要在循环、条件判断中调用Hook
B;在自定义Hook或其他自定义函数中调用
C:在React函数最外层调用Hook
D:在React的函数组件中调用Hook

答案:B

解析:
Hook使用规则:
1.只能在函数最外层调用 Hook,不要在循环、条件判断或者子函数中调用;
2.只能在React的函数组件或自定义的Hook中调用 Hook,不要在其他 JavaScript 函数中调用
面试题 210. 每个路由都有自己的onEnter和onLeave钩子,观察以下代码,当从"/a"跳转到"/b"时,各路由的钩子被调用顺序为() ?
复制代码
<Route path="/b" component={Inbox} />
<Route path="/c" component={Inbox} />

A:"/a"的onEnter -> "/a"的onLeave -> "/c"的onLeave -> "/b"的onLeave -> "/b"的onEnter
B:"/a"的onEnter -> "/a"的onLeave -> "/c"的onLeave -> "/b"的onEnter
C:"/a"的onEnter -> "/a"的onLeave -> "/b"的onEnter
D:"/a"的onLeave -> "/b"的onEnter

答案:D
面试题 211. 简述关于"错误边界",以下说法错误的是?
复制代码
A:static getDerivedStateFromError() 可以用来渲染备用UI
B:componentDidCatch()可以打印错误信息
C:错误边界是一种React组件,这种组件可以捕获并打印发生在当前组件的javaScript错误
D:class组件中只要定义了static getDerivedStateFromError()或componentDidCatch()其中一个,该组件就会变成错误边界

答案:C

解析:
错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的JavaScript错误
面试题 212. 简述中的path属性可以使用通配符,以下关于通配符的规则描述错误的是 ?
复制代码
A:":paramName": 匹配URL的一个部分,直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出
B:"()": ()表示URL的这个部分是可选的。
C:"*": *匹配任意字符,直到模式里面的下一个字符为止。匹配方式是贪婪模式。
D:"**":** 匹配任意字符,直到下一个/、?、#为止。匹配方式是贪婪模式。

答案:C

解析:
*匹配任意字符,直到模式里面的下一个字符为止。匹配方式是非贪婪模式。(贪婪模式和非贪婪模式:贪婪模式在整个表达式匹配成功的前提下,尽可能多的匹配,而非贪婪模式在整个表达式匹配成功的前提下,尽可能少的匹配。)
面试题 213. 以下路由代码中,如果现在跳转到"/inbox/messages/3",浏览器链接栏中显示的路由为jsx ?
复制代码
<Redirect from="messages/:id" to="/messages/:id" />

A:/inbox/messages/3
B:messages/3
C:/inbox/messages
D:/messages/3

答案:D

解析:
组件用于路由的跳转,即用户访问一个路由,会自动跳转到另一个路由,访问/inbox/messages/3,会自动跳转到/messages/3
面试题 214. 简述StrictMode组件的作用是 ?
复制代码
A:作用跟Fragment组件一样,可以一个组件返回多个元素
B:用来突出显示应用程序中潜在问题
C:为其后代元素开启严格模式
D:为其后代元素触发额外的检查和警告

答案:A
面试题 215. 在React中渲染列表应该使用哪种方法?
复制代码
A:map()
B:reduce()
C:createList()
D:every()

答案:A
面试题 216. 在React组件中的JSX里,如果要添加类选择器,可以给DOM节点和组件添加()属性 ?
复制代码
A:classStyle
B:class
C:styleName
D:className

答案:D

解析:
className属性用于指定CSS的class,此特性适用于所有常规 DOM 节点和 SVG 元素
面试题 217. 简述以下可以用来动态引入组件的是 ?
复制代码
A:React.Fragments
B:React.lazy
C:React.Suspense
D:React.import

答案:B
面试题 218. Babel 会把 JSX 转译成一个名为()函数调用 ?
复制代码
A:React.render
B:React.createElement
C:ReactDom.createElement
D:ReactDom.render

答案:B

解析:
Babel会把JSX转译成一个名为React.createElement()函数调用
面试题 219. 简述以下哪个选项不能作为Router组件的history属性值 ?
复制代码
A:createMemoryHistory
B:History
C:hashHistory
D:browserHistory

答案:B

解析:
history属性,一共可以设置三种值:browserHistory、hashHistory和createMemoryHistory。
面试题 220. 简述以下关于Reducer的作用说法错误的是 ?
复制代码
A:Reducer是纯函数,它指定应用程序的状态如何随操作的变化而变化
B:Reduce通过获取以前的状态和动作来工作,然后返回一个新的状态
C:它根据操作的类型确定需要执行哪种类型的更新,然后返回新值
D:如果不需要做任何工作,它将返回的当前状态的浅拷贝

答案:D

解析:
如果不需要做任何工作,它将返回以前的状态,而不是当前状态的浅拷贝,所以,D选项错误。
面试题 221. 简述传给useEffect的函数会在浏览器完成布局与绘制之后执行,如果想在在浏览器执行绘制之前执行,可以使用 ?
复制代码
A:useContext
B:useReducer
C:useCallback
D:useLayoutEffect

答案:D
面试题 222. 简述class组件生命周期方法对应到函数组件和Hook,以下说法错误的是 ?
复制代码
A:render => 这是函数组件体本身
B:getSnapshotBeforeUpdate 目前没有对应的Hook
C:constructor => 函数组件不需要构造函数。你可以通过调用 useState 来初始化 state。
D:componentWillUnmount 目前没有对应的Hook

答案:D

解析:
componentDidMount,componentDidUpdate,componentWillUnmount:useEffect Hook 可以表达这些(包括不那么常见的场景)的组合;getSnapshotBeforeUpdate,componentDidCatch 以及 getDerivedStateFromError:目前还没有这些方法的 Hook 等价写法,但很快会被添加。
面试题 223. 简述以下不属于react支持的剪贴板事件的是 ?
复制代码
A:onCopy
B:onPaste
C:onCut
D:onBeforeCopy

答案:D
面试题 224. 简述当使用ReactDOM.unmountComponentAtNode从DOM中卸载组件时,以下说法正确的是 ?
复制代码
A:从DOM中卸载组件时,会将其事件处理器(event handlers)和 state 一并清除
B:从DOM中卸载组件时,如果指定容器上没有要删除的组件,则会报一个警告,没有返回
C:从DOM中卸载组件时,如果指定容器上没有要删除的组件,会返回一个包含错误信息的Error对象
D:从DOM中卸载组件时,如果组件被移除将会返回被移除的组件实例

答案:A
面试题 225. 简述以下不属于React支持的鼠标事件的是 ?
复制代码
A:onContextMenu
B:onClick
C:onDblclick
D:onDragExit

答案:C
面试题 226. 简述以下哪些不是react-router内置的组件 ?
复制代码
A:DefaultLink
B:Router
C:RoutingContext
D:Link

答案:A
面试题 227. 简述以下关于state和props说法错误的是 ?
复制代码
A:props和state都是普通的JavaScript对象
B:state是在组件内被组件自己管理的
C:props是外部传递给组件的
D:它们都是用来保存信息的,但是只有state中的信息可以控制组件的渲染输出

答案:D

解析:
state和props都可以控制组件的渲染输出
面试题 228. 简述以下不属于React作者添加hook动机的是 ?
复制代码
A:在class组件之间复用状态逻辑很难
B:添加hook后函数组件可以实现class所有功能,React中移除class
C:复杂组件变得难以理解
D:class组件难以理解

答案:B
面试题 229. 简述在使用Redux时,如果想要监听State中的值变化,可以使用 ?
复制代码
A:state.subscribe
B:store.subscribe
C:store.setter
D:state.setter

答案:B

解析:
Store允许使用store.subscribe方法设置监听函数,一旦State发生变化,就自动执行这个函数。
面试题 230. 简述JSX只是()的语法糖 ?
复制代码
A:ReactDom.render
B:ReactDom.createElement
C:React.render
D:React.createElement

答案:D
面试题 231. 简述关于React中的"状态提升"说法错误的是 ?
复制代码
A:React建议任何可变数据应当只有一个相对应的唯一"数据源"
B:提升状态(state)方式相比于双向绑定方式需要编写更多的"样板"代码
C:虽然某些数据可以由props或state推导得出,但是我们最好还是单独在state声明它
D:通常,多个组件需要反映相同的变化数据,都应尽量将共享状态提升到最近的公共父组件中去

答案:C

解析:
其中ABD都为官方说法,C选项中如果某些数据可以由props或state推导得出,那么就不应该将其在state中声明。
面试题 232. 简述以下关于ReactDOM.render说法错误的是 ?
复制代码
A:ReactDOM.render() 会控制你传入容器节点里的内容
B:ReactDOM.render() 会修改容器节点以及其子节点
C:ReactDOM.render() 目前会返回对根组件 ReactComponent 实例的引用
D:使用 ReactDOM.render() 对服务端渲染容器进行 hydrate 操作的方式已经被废弃,并且会在 React 17 被移除

答案:B

解析:
ReactDOM.render() 不会修改容器节点(只会修改容器的子节点)。可以在不覆盖现有子节点的情况下,将组件插入已有的 DOM 节点中
面试题 233. 简述从 DOM 中卸载组件,可以使用 ?
复制代码
A:ReactDOM.unmountComponentAtNode
B:ReactDOM.unmountComponent
C:ReactDOM.unmountRender
D:ReactDOM.clearDOMNode

答案:A

解析:
ReactDOM.unmountComponentAtNode,从DOM中卸载组件,会将其事件处理器(event handlers)和 state 一并清除。如果指定容器上没有对应已挂载的组件,这个函数什么也不会做。如果组件被移除将会返回 true,如果没有组件可被移除将会返回 false
面试题 234. 简述关于Hook中的useDebugValue的作用是 ?
复制代码
A:获取当前是否在debug模式
B:开启当前函数组件debug模式
C:可以在React开发者工具中显示自定义hook的标签
D:可以在React开发者工具中给函数组件添加额外的描述

答案:C

解析:
useDebugValue可用于在React开发者工具中显示自定义Hook的标签。
面试题 235. 简述以下关于ref说法错误的是 ?
复制代码
A:当ref属性用于HTML元素时,构造函数中使用React.createRef()创建的ref接收底层DOM元素作为其current属性
B:ref是使用React.createRef()创建的,并通过ref属性附加到React元素
C:当ref属性用于函数组件时,ref对象接收组件的挂载实例作为其current属性
D:当ref属性用于自定义class组件时,ref对象接收组件的挂载实例作为其current属性

答案:C

解析:
默认情况下不能在函数组件上使用 ref 属性,因为函数组件没有实例。如果要在函数组件中使用 ref,可以使用 forwardRef,或者可以将该组件转化为 class 组件。不管怎样,可以在函数组件内部使用 ref 属性,只要它指向一个 DOM 元素或 class 组件
相关推荐
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
想跑步的小弱鸡3 小时前
Leetcode hot 100(day 3)
算法·leetcode·职场和发展
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!7 小时前
优选算法系列(5.位运算)
java·前端·c++·算法