面试题 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 组件