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