如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了 React 面试中最常见的面试问题,这是一份理想的指南,让你为 React 相关的面试做好充分的准备工作。
React面试题总结内容主要包括基础知识,React 组件,React Redux,React 路由。【点击这里领取面试题资料】
虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中,并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤,整个过程被称为调和。
函数组件和类组件当然是有区别的,而且函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件。
为了解决跨浏览器的兼容性问题,SyntheticEvent 实例将被传递给你的事件处理函数,SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器,它还拥有和浏览器原生事件相同的接口,包括 stopPropagation() 和 preventDefault()。
比较有趣的是,React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处,也意味着 React 在更新 DOM 时不需要跟踪事件监听器。
Refs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。在构造组件时,通常将 Refs 分配给实例属性,以便可以在整个组件中引用它们。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <p ref={
this.myRef} />;
}
}
或者这样用:
class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
<form onSubmit={
this.handleSubmit}>
<input
type='text'
ref={
(input) => this.input = input} /> // Access DOM input in handle submit
<button type='submit'>Submit</button>
</form>
)
}
}
高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上,这是一个模式,是从 React 的组合特性中衍生出来的,称其为纯组件,因为它们可以接受任何动态提供的子组件,但不会修改或复制输入组件中的任何行为。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
HOC 可以用于以下许多用例
React的一些主要优点是:
React的限制如下:
JSX 是J avaScript XML 的简写。是 React 使用的一种文件,它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠,并能够提高其性能。下面是JSX的一个例子:
render(){
return(
<div>
<h1> Hello World from Edureka!!</h1>
</div>
);
}
浏览器只能处理 JavaScript 对象,而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX,首先,需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象,然后再将其传给浏览器。
以下语法是 ES5 与 ES6 中的区别:
1)require 与 import
// ES5
var React = require('react');
// ES6
import React from 'react';
2)export 与 exports
// ES5
module.exports = Component;
// ES6
export default Component;
3)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>;
}
}
4)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>;
}
}
5)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>;
}
}
在 HTML 中,表单元素如、
和通常维护自己的状态,并根据用户输入进行更新。当用户提交表单时,来自上述元素的值将随表单一起发送。
而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值,并在每次回调函数(例如onChange
)触发时重新渲染组件,因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。
问题:
const element = (
<h1 className="h=greeting">
Hello, world!
</h1>
)
上述代码如何使用 React.createElement
来实现:
const element = React.createElement(
'h1',
{
className: 'greeting'},
'Hello, world!'
);
在组件生命周期中有四个不同的阶段:
Initialization:在这个阶段,组件准备设置初始化状态和默认属性。
Mounting:react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括componentWillMount
和componentDidMount
生命周期方法。
Updating:在这个阶段,组件以两种方式更新,发送新的 props 和 state 状态。此阶段包括shouldComponentUpdate
、componentWillUpdate
和componentDidUpdate
生命周期方法。
Unmounting:在这个阶段,组件已经不再被需要了,它从浏览器 DOM 中卸载下来。这个阶段包含 componentWillUnmount
生命周期方法。
除以上四个常用生命周期外,还有一个错误处理的阶段:
Error Handling:在这个阶段,不论在渲染的过程中,还是在生命周期方法中或是在任何子组件的构造函数中发生错误,该组件都会被调用。这个阶段包含了 componentDidCatch
生命周期方法。
this.setState((prevState, props) => {
return {
streak: prevState.streak + props.count
}
})
答案:
没有什么问题。这种方式很少被使用,咱们可以将一个函数传递给setState
,该函数接收上一个 state
的值和当前的props
,并返回一个新的状态,如果咱们需要根据以前的状态重新设置状态,推荐使用这种方式。
对于某些属性,React 非常聪明,如果传递给它的值是虚值,可以省略该属性。例如:
var InputComponent = React.createClass({
render: function() {
var required = true;
var disabled = false;
return (
<input type="text" disabled={
disabled} reqyired={
reqyired} />
);
}
});
渲染结果:
<input type="text" reqyired>
另一种可能的方法是:
var condition = true;
var component = (
<p
value="foo"
{
...( condition && {
disabled: true } ) } />
);
shouldComponentUpdate
来避免不必要的dom
操作production
版本的react.js
key
来帮助React
识别列表中所有子组件的最小变化19.MVC框架的主要问题是什么?
20. 解释一下 Flux
21. 什么是Redux?
22. Redux遵循的三个原则是什么?
23. 你对“单一事实来源”有什么理解?
24. 列出 Redux 的组件。
25. 数据如何通过 Redux 流动?
26. 如何在 Redux 中定义 Action?
27. 解释 Reducer 的作用。
28. Store 在 Redux 中的意义是什么?
29. Redux与Flux有何不同?
30. Redux 有哪些优点?
31.什么是React 路由?
32.为什么React Router v4中使用 switch 关键字 ?
33.为什么需要 React 中的路由?
34.列出 React Router 的优点。
35.React Router与常规路由有何不同?
需要可以点击这里免费领取,还包括JavaScript面试题文档,Vue面试题文档,大厂面试题文档,都可以免费领取!