2022 前端开发社招 React 面试题 附答案
React 视频解说 点击学习
全副视频：点击学习
1：讲讲什么是 JSX？
主题: React
难度: ⭐⭐⭐
当 Facebook 第一次公布 React 时，他们还引入了一种新的 JS 方言 JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码自身不能被浏览器读取，必须应用 Babel 和 webpack 等工具将其转换为传统的 JS。很多开发人员就能有意识应用 JSX，因为它曾经与 React 联合在始终了。
class MyComponent extends React.Component {
render() {
let props = this.props;
return (
<div className="my-component">
<a href={props.url}>{props.name}</a>
</div>
);}
}
2：依据上面定义的代码，能够找出存在的两个问题吗？
主题: React
难度: ⭐⭐⭐
请看上面的代码：
答案：
1. 在构造函数没有将 props 传递给 super，它应该包含以下行
constructor(props) {
super(props);
// …
}
复制代码
2. 事件监听器(通过 addEventListener() 调配时)的作用域不正确，因为 ES6 不提供主动绑定。因而，开发人员能够在构造函数中重新分配 clickHandler 来蕴含正确的绑定:
constructor(props) {
super(props);
this.clickHandler = this.clickHandler.bind(this);
// …
}
3：为什么不间接更新 state 呢 ?
主题: React
难度: ⭐⭐⭐
如果试图间接更新 state，则不会从新渲染组件。
// 谬误
This.state.message = ‘Hello world’;
复制代码
须要应用 setState()办法来更新 state。它调度对组件 state 对象的更新。当 state 扭转时，组件通过从新渲染来响应：
// 正确做法
This.setState({message:‘Hello World’});
4：React 组件生命周期有哪些不同阶段？
主题: React
难度: ⭐⭐⭐
在组件生命周期中有四个不同的阶段：
Initialization：在这个阶段，组件筹备设置初始化状态和默认属性。
Mounting：react 组件曾经筹备好挂载到浏览器 DOM 中。这个阶段包含 componentWillMount 和 componentDidMount 生命周期办法。
Updating：在这个阶段，组件以两种形式更新，发送新的 props 和 state 状态。此阶段包含 shouldComponentUpdate、componentWillUpdate 和 componentDidUpdate 生命周期办法。
Unmounting：在这个阶段，组件曾经不再被须要了，它从浏览器 DOM 中卸载下来。这个阶段蕴含 componentWillUnmount 生命周期办法。
除以上四个罕用生命周期外，还有一个错误处理的阶段：
Error Handling：在这个阶段，不管在渲染的过程中，还是在生命周期办法中或是在任何子组件的构造函数中产生谬误，该组件都会被调用。这个阶段蕴含了 componentDidCatch 生命周期办法。
5：React 的生命周期办法有哪些？
主题: React
难度: ⭐⭐⭐
componentWillMount: 在渲染之前执行，用于根组件中的 App 级配置。
componentDidMount：在第一次渲染之后执行，能够在这里做 AJAX 申请，DOM 的操作或状态更新以及设置事件监听器。
componentWillReceiveProps：在初始化 render 的时候不会执行，它会在组件承受到新的状态 (Props) 时被触发，个别用于父组件状态更新时子组件的从新渲染
shouldComponentUpdate：确定是否更新组件。默认状况下，它返回 true。如果确定在 state 或 props 更新后组件不须要在从新渲染，则能够返回 false，这是一个进步性能的办法。
componentWillUpdate：在 shouldComponentUpdate 返回 true 确定要更新组件之前件之前执行。
componentDidUpdate：它次要用于更新 DOM 以响应 props 或 state 更改。
componentWillUnmount：它用于勾销任何的网络申请，或删除与组件关联的所有事件监听器。
6：这三个点(…) 在 React 干嘛用的？
主题: React
难度: ⭐⭐⭐
… 在 React（应用 JSX）代码中做什么？它叫什么？
<Modal {…this.props} title=’Modal heading’ animation={false}/>
复制代码
这个叫扩大操作符号或者开展操作符，例如，如果 this.props 蕴含 a：1 和 b：2，则
<Modal {…this.props} title=’Modal heading’ animation={false}>
复制代码
等价于上面内容：
<Modal a={this.props.a} b={this.props.b} title=’Modal heading’ animation={false}>
复制代码
扩大符号不仅实用于该用例，而且对于创立具备现有对象的大多数（或全副）属性的新对象十分不便，在更新 state 咱们就常常这么做：
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};});
7. 什么是 JSX？
JSX 是 J avaScript XML 的简写。是 React 应用的一种文件，它利用 JavaScript 的表现力和相似 HTML 的模板语法。这使得 HTML 文件非常容易了解。此文件能使利用十分牢靠，并可能进步其性能。上面是 JSX 的一个例子：
render(){
return(
<div>
<h1> Hello World from Edureka!!</h1>
</div>
);}
- 为什么浏览器无奈读取 JSX？
浏览器只能解决 JavaScript 对象，而不能读取惯例 JavaScript 对象中的 JSX。所以为了使浏览器可能读取 JSX，首先，须要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，而后再将其传给浏览器。 - 与 ES5 相比，React 的 ES6 语法有何不同？
以下语法是 ES5 与 ES6 中的区别：
require 与 import
// ES5
var React = require(‘react’);
// ES6
import React from ‘react’;
复制代码
export 与 exports
// ES5
module.exports = Component;
// ES6
export default Component;
复制代码
component 和 function
// ES5
var MyComponent = React.createClass({
render: function() {
return
<h3>Hello Edureka!</h3>;
}});
// ES6
class MyComponent extends React.Component {
render() {
return
<h3>Hello Edureka!</h3>;
}}
复制代码
props
// ES5
var App = React.createClass({
propTypes: {name: React.PropTypes.string},
render: function() {
return
<h3>Hello, {this.props.name}!</h3>;
}});
// ES6
class App extends React.Component {
render() {
return
<h3>Hello, {this.props.name}!</h3>;
}}
复制代码
state
// ES5
var App = React.createClass({
getInitialState: function() {return { name: 'world'};
},
render: function() {
return
<h3>Hello, {this.state.name}!</h3>;
}});
// ES6
class App extends React.Component {
constructor() {super();
this.state = {name: 'world'};
}
render() {
return
<h3>Hello, {this.state.name}!</h3>;
}}
- React 与 Angular 有何不同？
| 主题 | React | Angular | | ————- | —————— | ————- | | 1. 体系结构 | 只有 MVC 中的 View | 残缺的 MVC | | 2. 渲染 | 能够在服务器端渲染 | 客户端渲染 | | 3. DOM | 应用 virtual DOM | 应用 real DOM | | 4. 数据绑定 | 单向数据绑定 | 双向数据绑定 | | 5. 调试 | 编译时调试 | 运行时调试 | | 6. 作者 | Facebook | Google |