玖叶教程网

随着JQuery的逐渐衰落离场，如今的前端开发框架界前三已被：Vue，React，Angular 牢牢占据，Vue，React，Angular三巨头也是我们前端开发工程师必须要学习的内容之一，三大前端框架相关问题在面试中常常会着重被面试官提问到。在以往的文章中总结过Vue和Angualr相关的前端开发面试题，今天就来总结分享一下常考的 React 相关面试题和答案。

这份React面试题总结来自Github，目前，这个 reactjs-interview-questions 项目在GitHub上已经获得 1911 个Star，333个Fork。（GitHub地址：https://github.com/sudheerj/reactjs-interview-questions）

该Github项目大体由整理排列好的 304个React面试问题和对应解答组成，具体问题截图如下：

一共有304个问题，点击对应问题即可进入相应的答案和解析。有的小伙伴看到这密密麻麻的英文，估计就头疼了，不过还好，这个项目已经有善良的前端开发者把它翻译成中文版：

目前此中文版也已经获得 1000多 个Star，100多个Fork（中文版GitHub地址：https://github.com/semlinker/reactjs-interview-questions）

对于所有的304个前端面试题，中文版都有一一对应，目录一共304个问题，点击对应问题即可查看相应的答案和解析。下面，我们来一起随便看看其中几个问题和解答。

如问题13：

13.HTML 和 React 事件处理有什么区别?

解答：

1. 在 HTML 中事件名必须小写：

<button onclick='activateLasers()'>

而在 React 中它遵循 camelCase (驼峰) 惯例：

<button onClick={activateLasers}>

1. 在 HTML 中你可以返回 false 以阻止默认的行为：

<a href='#' onclick='console.log("The link was clicked."); return false;' />

而在 React 中你必须地明确地调用 preventDefault() ：

function handleClick(event) {

event.preventDefault()

console.log('The link was clicked.')

}

如问题17：

17.什么是内联条件表达式?

解答：在 JS 中你可以使用 if 语句或三元表达式，来实现条件判断。除了这些方法之外，你还可以在 JSX 中嵌入任何表达式，方法是将它们用大括号括起来，然后再加上 JS 逻辑运算符 &&。

<h1>Hello!</h1>

{

messages.length > 0 && !isLogin ?

<h2>

You have {messages.length} unread messages.

</h2>

:

<h2>

You don't have unread messages.

</h2>

}

当然如果只是想判断 if，可以如下直接判断：

{

isLogin && <span>Your have been login!</span>

}

在上面的代码中，不需要使用isLogin ? <span>Your have been login!</span> : null这样的形式。

从最基础的：“什么是 React? ”到React的各个难点，这里都有解答，一共304个面试中常考的问题和答案解析。赶紧看看你还有哪些题不会吧，把这些面试题刷起来，多刷几遍，前端开发面试再也不怕了。一起加油呀！