本文概述
- React一般面试问题
- React组件面试问题
- React Refs面试问题
- React Router面试问题
- React面试问题
- React Redux面试问题
文章图片
下面列出了最常见的React Interview问题和答案。
| SN | React面试主题 |
|---|---|
| React一般面试问题 | |
| React组件面试问题 | |
| React Refs面试问题 | |
| React Router面试问题 | |
| React面试问题 | |
| React Redux面试问题 |
React是Facebook在2011年开发的一种声明式, 高效, 灵活的开源前端JavaScript库。它遵循基于组件的方法来构建可重用的UI组件, 尤其是用于单页应用程序。它用于开发Web和移动应用程序的交互式视图层。它是由Facebook的软件工程师Jordan Walke创建的。它最初于2011年部署在Facebook的” 新闻提要” 部分, 后来在其WhatsApp和Instagram等产品中使用。
欲了解更多信息, 请点击此处。
2)React有什么特点？
作为Web开发人员中最好的框架, React框架迅速流行。 React的主要特点是：
- JSX
- 组件
- 单向数据绑定
- 虚拟dom
- 简单
- 性能
3)React有什么优势？
React的优点是：
- 易学易用
- 创建动态Web应用程序变得更加容易
- 可重复使用的组件
- 性能提升
- 方便工具的支持
- 被称为SEO友好
- 拥有JavaScript库的好处
- 测试代码的范围
4)React的局限性是什么？
React的局限性是：
- 高速发展
- 文档不良
- 查看零件
- JSX作为障碍
5)什么是JSX？
JSX代表JavaScript XML。它是一个React扩展, 它允许编写类似于HTML的JavaScript代码。它使HTML文件易于理解。 JSX文件使React应用程序更强大并提高了其性能。 JSX使你可以在编写JavaScript代码的同一文件中编写类似XML的语法, 然后预处理器(即Babel之类的编译器)将这些表达式转换为实际的JavaScript代码。就像XML / HTML一样, JSX标记具有标记名称, 属性和子代。
例子
class App extends React.Component {
render() {
return(
<
div>
<
h1>
Hello srcmini<
/h1>
<
/div>
)
}
}在上面的示例中, < h1> 标记内的文本作为JavaScript函数返回到render函数。编译后, JSX表达式变为普通的JavaScript函数, 如下所示。
React.createElement("h1", null, "Hello srcmini");
欲了解更多信息, 请点击此处。
6)为什么浏览器无法读取JSX？
浏览器无法直接阅读JSX, 因为它们只能理解JavaScript对象, 而JSX不是常规的JavaScript对象。因此, 我们需要使用类似Babel的编译器将JSX文件转换为JavaScript对象, 然后将其传递给浏览器。
7)为什么要使用JSX？
- 它比常规JavaScript更快, 因为它在将代码转换为JavaScript时执行优化。
- React并没有通过将标记和逻辑放在单独的文件中来分离技术, 而是使用包含两者的组件。
- t是类型安全的, 大多数错误可以在编译时发现。
- 它使创建模板更加容易。
虚拟DOM是轻量级的JavaScript对象, 是真实DOM的内存表示形式。这是调用渲染函数和在屏幕上显示元素之间的中间步骤。它类似于将元素, 元素的属性和内容列为对象及其属性的节点树。渲染功能创建React组件的节点树, 然后响应于由用户或系统执行的各种操作导致的数据模型中的突变来更新此节点树。
9)解释虚拟DOM的工作原理。
虚拟DOM分为三个步骤：
1.每当React App中的任何数据发生更改时, 整个UI都会以虚拟DOM表示形式重新呈现。
文章图片
2.现在, 将计算先前的DOM表示和新的DOM之间的差异。
文章图片
3.计算完成后, 仅使用已更改的内容更新实际DOM。
文章图片
10)React与Angular有何不同？
React在以下方面不同于Angular。
| Angular | React | |
|---|---|---|
| Facebook Community | ||
| Misko Hevery | Jordan Walke | |
| October 2010 | March 2013 | |
| JavaScript, HTML | JSX | |
| 开源MVC框架 | 开源JS框架 | |
| Client-Side | Server-Side | |
| Bi-directional | Uni-directional | |
| 常规DOM | Virtual DOM | |
| 单元和集成测试 | 单元测试 | |
| MVC | Flux | |
| Slow | 由于虚拟DOM, 速度很快。 |
11)React的ES6语法与ES5语法有何不同？
在以下方面, React的ES6语法与ES5语法有所不同。
需要与导入
// ES5
var React = require('react');
// ES6
import React from 'react';
出口与出口
// ES5
module.exports = Component;
// ES6
export default Component;
组成和功能
// ES5
var MyComponent = React.createClass({
render: function() {
return(
<
h3>
Hello srcmini<
/h3>
);
}
});
// ES6
class MyComponent extends React.Component {
render() {
return(
<
h3>
Hello srcmini<
/h3>
);
}
}道具
// 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>
);
}
}州
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>
);
}
}12)ReactJS和React Native有什么区别？
下面给出了ReactJS和React Native之间的主要区别。
| SN | ReactJS | React Native |
|---|---|---|
| 2013年首次发布。 | 2015年首次发布。 | |
| 它用于开发Web应用程序。 | 它用于开发移动应用程序。 | |
| 它可以在所有平台上执行。 | 它不是平台无关的。在所有平台上执行都需要更多的精力。 | |
| 它使用JavaScript库和CSS制作动画。 | 它带有内置的动画库。 | |
| 它使用React-router来浏览网页。 | 它具有用于导航移动应用程序的内置导航器库。 | |
| 它使用HTML标签。 | 它不使用HTML标记。 | |
| 在此, 虚拟DOM呈现浏览器代码。 | 在这种情况下, Native使用其API为移动应用程序呈现代码。 |
React组件面试问题 13)你从” 在React中, 一切都是组件” 中了解到什么。
在React中, 组件是React应用程序的构建块。这些组件将整个React应用程序的UI分成小的, 独立的和可重用的代码段。 React独立地渲染了每个组件, 而不会影响应用程序UI的其余部分。因此, 可以说, 在React中, 一切都是组件。
14)解释React中render()的目的。
每个React组件都必须具有render()函数。渲染功能用于返回要在组件中显示的HTML。如果需要呈现多个HTML元素, 则需要将它们组合在单个封闭标签(父标签)中, 例如< div> , < form> , < group> 等。每次调用此函数都返回相同的结果。
示例：如果需要显示标题, 可以按照以下步骤进行操作。
import React from 'react'
class App extends React.Component {
render (){
return (
<
h1>
Hello World<
/h1>
)
}
}
export default App注意事项：
- 每个render()函数都包含一个return语句。
- return语句只能有一个父HTML标记。
你可以通过以下方式嵌入两个或更多组件：
import React from 'react'
class App extends React.Component {
render (){
return (
<
h1>
Hello World<
/h1>
)
}
}
class Example extends React.Component {
render (){
return (
<
h1>
Hello srcmini<
/h1>
)
}
}
export default App16)什么是道具？
道具在React中代表” 属性” 。它们是组件的只读输入。道具是存储标记属性值的对象, 其工作方式类似于HTML属性。它提供了一种在整个应用程序中将数据从父组件传递到子组件的方法。
它类似于函数参数, 并以与函数中传递的参数相同的方式传递给组件。
道具是不可变的, 因此我们无法从组件内部修改道具。在组件内部, 我们可以添加称为props的属性。这些属性在组件中以this.props的形式提供, 可用于在我们的render方法中呈现动态数据。
欲了解更多信息, 请点击此处。
17)React中的状态是什么？
状态是一种可更新的结构, 其中包含有关组件的数据和信息。可以响应用户操作或系统事件在组件的整个生命周期中更改它。这是React组件的核心, 它决定了该组件的行为及其呈现方式。它必须保持尽可能简单。
让我们创建一个带有” 消息状态” 的” 用户” 组件。
import React from 'react'class User extends React.Component {
constructor(props) {
super(props)this.state = {
message: 'Welcome to srcmini'
}
}render() {
return (
<
div>
<
h1>
{this.state.message}<
/h1>
<
/div>
)
}
}
export default User欲了解更多信息, 请点击此处。
18)区分国家和道具。
国家与道具之间的主要区别如下。
| SN | Props | State |
|---|---|---|
| 道具是只读的。 | 状态更改可以是异步的。 | |
| 道具是一成不变的。 | 状态是易变的。 | |
| 道具使你可以将数据从一个组件传递到其他组件作为参数。 | State拥有有关组件的信息。 | |
| 子组件可以访问道具。 | 子组件无法访问状态。 | |
| 道具用于在组件之间进行通信。 | 状态可用于呈现组件的动态更改。 | |
| 无状态组件可以具有道具。 | 无状态组件不能具有状态。 | |
| 道具使组件可重复使用。 | 国家不能使组件可重复使用。 | |
| 道具是外部的, 并由呈现组件的任何东西控制。 | 国家是内部的, 由组成部分本身控制。 |
19)如何更新组件的状态？
我们可以使用this.setState()方法更新组件的状态。此方法并不总是立即替换State。相反, 它仅将更改添加到原始状态。它是一种主要方法, 用于响应事件处理程序和服务器响应来更新用户界面(UI)。
例子
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
constructor() {
super();
this.state = {
msg: "Welcome to srcmini"
};
this.updateSetState = this.updateSetState.bind(this);
}
updateSetState() {
this.setState({
msg:"Its a best ReactJS tutorial"
});
}
render() {
return (
<
div>
<
h1>
{this.state.msg}<
/h1>
<
button onClick = {this.updateSetState}>
SET STATE<
/button>
<
/div>
);
}
}
export default App;
欲了解更多信息, 请点击此处。
20)区分无状态组件和有状态组件。
无状态组件和有状态组件之间的区别是：
| SN | 无状态组件 | Stateful Component |
|---|---|---|
| 无状态组件不保存或管理状态。 | 有状态组件可以保存或管理状态。 | |
| 它不包含过去, 当前和将来可能发生的状态更改的知识。 | 它可以包含状态的过去, 当前以及将来可能发生的变化的知识。 | |
| 它也被称为功能组件。 | 它也被称为类组件。 | |
| 它简单易懂。 | 与无状态组件相比, 它很复杂。 | |
| 它不适用于任何React的生命周期方法。 | 它可以与React的所有生命周期方法一起使用。 | |
| 无状态组件不能重复使用。 | 有状态组件可以重复使用。 |
箭头功能是ES6标准的新功能。如果需要使用箭头功能, 则无需将任何事件绑定到” this” 。在这里, ” this” 的范围是全局的, 不限于任何调用函数。因此, 如果你使用的是箭头功能, 则无需在构造函数中绑定” this” 。它也被称为” 胖箭头” (=> )函数。
//General way
render() {
return(
<
MyInput onChange={this.handleChange.bind(this) } />
);
}
//With Arrow Function
render() {
return(
<
MyInput onChange={ (e) =>
this.handleOnChange(e) } />
);
}22)React中的事件是什么？
事件是由于用户操作或系统生成的事件(例如, 单击鼠标, 加载网页, 按下键, 调整窗口大小等)而触发的操作。在React中, 事件处理系统与处理非常相似。 DOM元素中的事件。 React事件处理系统称为Synthetic Event, 它是浏览器本地事件的跨浏览器包装。
使用React处理事件在语法上有一些差异, 它们是：
- React事件被命名为camelCase而不是小写。
- 使用JSX, 将传递一个函数作为事件处理程序, 而不是字符串。
23)你如何在React中创建事件？
我们可以如下创建一个事件。
class Display extends React.Component({
show(msgEvent) {
// code
}, render() {
// Here, we render the div with an onClick prop
return (
<
div onClick={this.show}>
Click Me<
/div>
);
}
});
例子
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
companyName: ''
};
}
changeText(event) {
this.setState({
companyName: event.target.value
});
}
render() {
return (
<
div>
<
h2>
Simple Event Example<
/h2>
<
label htmlFor="name">
Enter company name: <
/label>
<
input type="text" id="companyName" onChange={this.changeText.bind(this)}/>
<
h4>
You entered: { this.state.companyName }<
/h4>
<
/div>
);
}
}
export default App;
欲了解更多信息, 请点击此处。
24)React中的综合事件是什么？
合成事件是充当浏览器本地事件周围的跨浏览器包装的对象。它将不同浏览器的本机事件的行为组合到一个API中, 包括stopPropagation()和preventDefault()。
在给定的示例中, e是一个合成事件。
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('You had clicked a Link.');
}
return (
<
a href="http://www.srcmini.com/#" onClick={handleClick}>
Click_Me
<
/a>
);
}25)受控组件和非受控组件有什么区别？
受控组件和非受控组件之间的区别是：
| SN | Controlled | Uncontrolled |
|---|---|---|
| 它不保持其内部状态。 | 它保持其内部状态。 | |
| 在此, 数据由父组件控制。 | 在这里, 数据由DOM本身控制。 | |
| 它接受其当前值作为道具。 | 它使用ref作为其当前值。 | |
| 它允许验证控制。 | 它不允许验证控制。 | |
| 它可以更好地控制表单元素和数据。 | 它对表单元素和数据的控制有限。 |
26)解释React中的列表。
列表用于以有序格式显示数据。在React中, 可以像在JavaScript中创建列表一样创建列表。我们可以使用map()函数遍历列表的元素。
例子
import React from 'react';
import ReactDOM from 'react-dom';
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((myList) =>
<
li>
{myList}<
/li>
);
return (
<
div>
<
h2>
Rendering Lists inside component<
/h2>
<
ul>
{listItems}<
/ul>
<
/div>
);
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
<
NameList myLists={myLists} />
, document.getElementById('app')
);
export default App;
欲了解更多信息, 请点击此处。
27)React中按键的意义是什么？
密钥是唯一的标识符。在React中, 它用于标识哪些项目已更改, 更新或从列表中删除。当我们动态创建组件或用户更改列表时, 这很有用。它还有助于确定需要重新呈现集合中的哪些组件, 而不是每次都重新呈现整个组件集。它提高了应用程序的性能。
欲了解更多信息, 请点击此处。
28)在React中如何创建表单？
表单允许用户与应用程序交互以及从用户那里收集信息。表单可以执行许多任务, 例如用户身份验证, 添加用户, 搜索, 过滤等。表单可以包含文本字段, 按钮, 复选框, 单选按钮等。
React提供了一种有状态的, React性的方法来构建表单。 React中的表单类似于HTML表单。但是在React中, 组件的state属性仅通过setState()更新, 并且JavaScript函数处理其提交。该功能可以完全访问用户输入到表格中的数据。
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('You have submitted the input successfully: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<
form onSubmit={this.handleSubmit}>
<
h1>
Controlled Form Example<
/h1>
<
label>
Name:
<
input type="text" value=http://www.srcmini.com/{this.state.value} onChange={this.handleChange} />
<
/label>
<
input type="submit" value="http://www.srcmini.com/Submit" />
<
/form>
);
}
}
export default App;
欲了解更多信息, 请点击此处。
29)React组件的生命周期有哪些不同阶段？
React组件生命周期的不同阶段是：
初始阶段：这是React生命周期的诞生阶段, 当组件开始其通往DOM的旅程时。在此阶段, 组件包含默认的Props和初始状态。这些默认属性在组件的构造函数中完成。
安装阶段：在此阶段, 将创建组件实例并将其添加到DOM中。
更新阶段：这是React生命周期的下一个阶段。在此阶段, 我们获得新的道具并更改状态。仅当属性或状态发生更改时, 此阶段才可能潜在地更新和重新渲染。此阶段的主要目的是确保组件显示其自身的最新版本。此阶段一次又一次地重复。
卸载阶段：这是React生命周期的最后阶段, 组件实例被销毁并从DOM卸载(移除)。
欲了解更多信息, 请点击此处。
30)详细说明React组件的生命周期方法。
重要的React生命周期方法是：
- getInitialState()：用于指定this.state的默认值。它在创建组件之前执行。
- componentWillMount()：在组件呈现到DOM中之前执行。
- componentDidMount()：当组件被渲染并放置在DOM上时执行。现在, 你可以执行任何DOM查询操作。
- componentWillReceiveProps()：当组件从父类接收新的道具时, 并且在调用另一个渲染之前, 将调用它。如果要更新状态以响应道具更改, 则应比较this.props和nextProps以使用this.setState()方法执行状态转换。
- shouldComponentUpdate()：当组件决定对DOM进行任何更改/更新并根据某些条件返回true或false值时, 将调用此方法。如果此方法返回true, 则组件将更新。否则, 组件将跳过更新。
- componentWillUpdate()：在DOM中进行渲染之前调用它。在这里, 你不能通过调用this.setState()方法来更改组件状态。如果shouldComponentUpdate()返回false, 则不会调用它。
- componentDidUpdate()：渲染发生后立即调用。在这种方法中, 你可以在更新发生后将要执行的任何代码放入其中。
- componentWillUnmount()：在组件被永久销毁并永久卸载之前立即调用它。它用于清除内存空间, 例如使计时器无效, 事件侦听器, 取消网络请求或清除DOM元素。如果卸载了组件实例, 则无法再次安装它。
31)什么是纯成分？
在React 15.3版本中引入了纯组件。 React.Component和React.PureComponent在shouldComponentUpdate()React生命周期方法上有所不同。此方法通过返回布尔值(真或假)来决定组件的重新呈现。在React.Component中, 默认情况下, shouldComponentUpdate()方法将返回true。但是在React.PureComponent中, 它比较状态或道具的更改以重新渲染组件。纯组件增强了代码的简洁性和应用程序的性能。
32)什么是高阶成分(HOC)？
在React中, 高阶组件是用于重用组件逻辑的高级技术。它是一个接受组件并返回新组件的函数。换句话说, 它是一个接受另一个函数作为参数的函数。根据官方网站的说法, 它不是React API的功能(部分), 而是一种模式, 它是从React的组成性质中产生的。
欲了解更多信息, 请点击此处。
33)你如何使用HOC？
你可以使用HOC执行许多任务, 下面列出其中一些任务：
- 代码可重用性
- 道具操纵
- 状态操纵
- 渲染劫机
元素和组件之间的主要区别是：
| SN | Element | Component |
|---|---|---|
| 元素是一个普通的JavaScript对象, 它描述了组件状态和DOM节点及其所需的属性。 | 组件是React应用程序的核心构建块。它是一个接受输入并返回React元素的类或函数。 | |
| 它仅包含有关组件类型, 其属性以及其中的任何子元素的信息。 | 它可以包含状态和道具, 并可以访问React生命周期方法。 | |
| 这是一成不变的。 | 这是可变的。 | |
| 我们不能对元素应用任何方法。 | 我们可以将方法应用于组件。 | |
| 示例：const element = React.createElement(‘ div’ , {id：’ login-btn’ }, ‘ Login’ ) | 示例：function Button({onLogin}){return React.createElement(‘ div’ , {id：’ login-btn’ , onClick：onLogin}, ‘ Login’ )} |
在React中, 我们可以像在JavaScript中那样编写注释。可以通过两种方式：
1.单行注释：我们可以使用大括号将注释写为/ *块注释* /：
{/* Single Line comment */}2.多行注释：如果我们要注释一行以上, 则可以这样
{ /*
Multi
line
comment
*/ }36)为什么必须用大写字母开头组件名称？
在React中, 必须以大写字母开头组件名称。如果我们以小写字母开头的组件名称, 它将作为无法识别的标签抛出错误。这是因为在JSX中, 小写标签名称被视为HTML标签。
37)什么是碎片？
在React 16.2版本中引入。在React中, 片段用于组件以返回多个元素。它允许你将多个子项列表分组, 而无需向DOM添加额外的节点。
例子
render() {
return (
<
React.Fragment>
<
ChildA />
<
ChildB />
<
ChildC />
<
/React.Fragment>
)
}还有一种用于声明片段的简写语法, 但许多工具不支持该语法：
render() {
return (
<
>
<
ChildA />
<
ChildB />
<
ChildC />
<
/>
)
}欲了解更多信息, 请点击此处。
38)为什么片段比容器div好？
- 片段更快, 消耗更少的内存, 因为它没有创建额外的DOM节点。
- 某些CSS样式(如CSS Grid和Flexbox)具有特殊的父子关系, 并在中间添加< div> 标签, 这使得难以保持所需的布局。
- DOM检查器变得比较整洁。
道具验证是一种工具, 可帮助开发人员避免将来出现错误和问题。它使你的代码更具可读性。 React组件使用特殊属性PropTypes来帮助你通过验证通过props传递的值的数据类型来捕获错误, 尽管不必使用propTypes定义组件。
我们可以使用React组件中的App.propTypes对道具进行验证。当某些道具以无效类型传递时, 你将在JavaScript控制台上收到警告。指定验证模式后, 需要设置App.defaultProps。
class App extends React.Component {
render() {}
}
Component.propTypes = { /*Definition */};
欲了解更多信息, 请点击此处。
40)什么是create-react-app？
创建React应用程序是Facebook引入的用于构建React应用程序的工具。它提供了创建单页React应用程序的功能。预先配置了create-react-app, 这使你无需进行费时的设置和配置, 例如Webpack或Babel。你需要运行一个命令来启动React项目, 如下所示。
$ npx create-react-app my-app该命令包括构建React应用所需的一切。其中一些如下：
- 它包括React, JSX, ES6和Flow语法支持。
- 它包含自动前缀CSS, 因此你不需要-webkit-或其他前缀。
- 它包括一个快速的交互式单元测试运行程序, 并内置了对覆盖率报告的支持。
- 它包括一个实时开发服务器, 可警告常见错误。
- 它包括一个构建脚本, 用于将JS, CSS和图像捆绑在一起用于生产, 并带有哈希和源映射。
React Refs面试问题 41)你对React中的引用有什么了解？
Refs是React中用于引用的简写。这是一个有助于存储对特定DOM节点或React元素的引用的属性。它提供了一种访问React DOM节点或React元素以及如何与之交互的方法。当我们想要更改子组件的值而不使用道具时使用它。
欲了解更多信息, 请点击此处。
42)如何创建裁判？
可以使用React.createRef()创建引用, 并通过ref属性将其附加到React元素。通常在创建组件时将其分配给实例属性, 然后可以在整个组件中对其进行引用。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.callRef = React.createRef();
}
render() {
return <
div ref={this.callRef} />
;
}
}43)什么是前锋裁判？
引用转发是一项功能, 用于将引用通过组件传递到其子组件之一。可以通过使用React.forwardRef()方法来执行。它对于高阶组件特别有用, 特别适用于可重用组件库。
例子
import React, { Component } from 'react';
import { render } from 'react-dom';
const TextInput = React.forwardRef((props, ref) =>
(
<
input type="text" placeholder="Hello World" ref={ref} />
));
const inputRef = React.createRef();
class CustomTextInput extends React.Component {
handleSubmit = e =>
{
e.preventDefault();
console.log(inputRef.current.value);
};
render() {
return (
<
div>
<
form onSubmit={e =>
this.handleSubmit(e)}>
<
TextInput ref={inputRef} />
<
button>
Submit<
/button>
<
/form>
<
/div>
);
}
}
export default App;
欲了解更多信息, 请点击此处。
44)回调ref或findDOMNode()是首选的选项？
首选选项是在findDOMNode()API上使用回调引用。因为回调ref在设置和取消设置ref时提供了更好的控制, 而findDOMNode()阻止了React在将来的某些改进。
class MyComponent extends Component {
componentDidMount() {
findDOMNode(this).scrollIntoView()
}
render() {
return <
div />
}
}推荐的方法是：
class MyComponent extends Component {
componentDidMount() {
this.node.scrollIntoView()
}
render() {
return <
div ref={node =>
this.node = node} />
}
}
class MyComponent extends Component {
componentDidMount() {
this.node.scrollIntoView()
}
render() {
return <
div ref={node =>
this.node = node} />
}
}45)引用的用途是什么？
在以下情况下使用React中的Ref：
- 它用于返回对该元素的引用。
- 当我们需要DOM测量(例如管理焦点, 文本选择或媒体播放)时, 可以使用它。
- 它用于触发命令式动画。
- 与第三方DOM库集成时使用。
- 它也可以在回调中使用as。
React Router面试问题 46)什么是React Router？
React Router是在React之上构建的标准路由库系统。它用于在使用React Router Package的React应用程序中创建路由。它可以帮助你在应用程序中定义多个路由。它为浏览器上的同步URL提供将在网页上显示的数据。它保持了应用程序的标准结构和行为, 并且主要用于开发单页Web应用程序。
欲了解更多信息, 请点击此处。
47)为什么在React中需要路由器？
React Router在一个页面应用程序中显示多个视图的过程中扮演着重要的角色。它用于在应用程序中定义多个路由。当用户在浏览器中输入特定的URL, 并且此URL路径与路由器文件中的任何” 路由” 匹配时, 该用户将被重定向到该特定的Route。因此, 我们需要在React应用程序中添加一个Router库, 该库允许创建多个路由, 每个路由都为我们带来唯一的视图。
<
switch>
<
h1>
React Router Example<
/h1>
<
Route path="/" component={Home} />
<
Route path="/about" component={About} />
<
Route path="/contact" component={Contact} />
<
/switch>
48)列出React Router的优点。
下面给出了React Router的重要优点：
- 在这种情况下, 无需手动设置浏览器历史记录。
- 链接用于浏览应用程序中的内部链接。它类似于锚标签。
- 它使用切换功能进行渲染。
- 路由器仅需要单个子元素。
- 在此, 在< Route> 中指定每个组件。
- 这些软件包分为三个软件包, 分别是Web, Native和Core。它支持React应用程序的紧凑尺寸。
React路由和常规路由之间的区别是：
| SN | Conventional Routing | React Routing |
|---|---|---|
| 在” 常规路由” 中, 每个视图都包含一个新文件。 | 在React Routing中, 仅涉及一个HTML页面。 | |
| HTTP请求被发送到服务器以接收相应的HTML页面。 | 仅历史记录属性< BrowserRouter> 被更改。 | |
| 这样, 用户可以在每个视图的不同页面之间导航。 | 在这种情况下, 用户认为他正在浏览不同的页面, 但这只是一种幻想。 |
这是因为你不必将路由的路径包装在< Switch> 块或< div> 块中, 后者专门呈现了一条路由。
例子
render((
<
Router>
<
Route {/* ... */} />
<
Route {/* ... */} />
<
/Router>
)应该
render(
<
Router>
<
Switch>
<
Route {/* ... */} />
<
Route {/* ... */} />
<
/Switch>
<
/Router>
)51)为什么在React Router v4中使用switch关键字？
” switch” 关键字用于仅显示要定义的多个路径中的单个路径。 < Switch> 组件仅在路径匹配时才用于渲染组件。否则, 它将返回到未找到的组件。
React面试问题 52)如何在React中使用样式？
我们可以在React应用程序中使用style属性进行样式设置, 从而在渲染时添加动态计算的样式。它接受camelCased属性中的JavaScript对象, 而不是CSS字符串。样式属性与访问JavaScript中DOM节点上的属性一致。
例子
const divStyle = {
color: 'blue', backgroundImage: 'url(' + imgUrl + ')'
};
function HelloWorldComponent() {
return <
div style={divStyle}>
Hello World!<
/div>
}53)我们可以使用几种方法来设计React组件？
我们可以通过以下四种主要方式对React Component进行样式设置：
- 内联样式
- CSS样式表
- CSS模块
- 样式化的组件
54)在React中解释CSS模块样式。
CSS模块是一个CSS文件, 默认情况下, 所有类名和动画名都在本地作用域内。它仅适用于导入它的组件, 未经你的许可, 它不能应用于任何其他组件。你可以创建扩展名为.module.css的CSS模块文件。
欲了解更多信息, 请点击此处。
55)什么是样式化组件？
Styled-Components是React的库。它是CSS模块的继承者。它使用增强型CSS来样式化应用程序中的React组件系统, 并使用JavaScript和CSS混合编写。它的作用域仅限于单个组件, 并且不会泄漏到页面中的任何其他元素。
样式化的组件提供：
- 自动关键CSS
- 没有类名错误
- 轻松删除CSS
- 简单的动态样式
- 无痛维护
React Redux面试问题 56)MVC框架的主要问题是什么？
MVC框架的主要问题是：
- DOM操作非常昂贵。
- 这会使应用程序变慢且效率低下。
- 内存浪费很大。
- 这使应用程序调试困难。
Flux是Facebook内部用于使用React构建客户端Web应用程序的应用程序体系结构。它既不是库, 也不是框架。它是一种对React作为视图的补充, 并遵循单向数据流模型的概念的体系结构。当项目具有动态数据时, 这很有用, 并且我们需要以有效的方式保持数据的更新。
文章图片
欲了解更多信息, 请点击此处。
58)什么是Redux？
Redux是用于管理应用程序状态的开源JavaScript库。 React使用Redux来构建用户界面。 Redux应用程序易于测试, 并且可以在表现出一致行为的不同环境中运行。它是由Dan Abramov和Andrew Clark于2015年首次提出的。
React Redux是Redux的官方React绑定。它允许React组件从Redux商店读取数据, 并将Action调度到商店以更新数据。 Redux提供了一种通过单向数据流模型管理状态的明智方法, 可帮助应用扩展。 React Redux在概念上很简单。它订阅Redux存储, 检查组件所需的数据是否已更改, 然后重新提供组件。
欲了解更多信息, 请点击此处。
59)Redux遵循的三个原则是什么？
redux遵循的三个原则是：
- 单一事实来源：整个应用程序的状态存储在单个商店内的对象/状态树中。单个状态树使随时间变化的保持变得更加容易。它还使调试或检查应用程序变得更加容易。
- 状态是只读的：更改状态的唯一方法是发出一个动作, 一个描述发生了什么的对象。该原则确保视图和网络回调都不能直接写入状态。
- 使用纯函数进行更改：要指定动作如何转换状态树, 你需要编写reducer(纯函数)。纯函数将先前的状态和操作作为参数, 并返回新的状态。
Redux的组件如下。
- 商店：商店是整个应用程序状态列表的地方。就像大脑负责Redux中的所有运动部件。
- 行动：这是一个描述发生了什么的对象。
- 减少者：它确定状态将如何改变。
61)说明减速器的作用。
减速器从动作中读取有效负载, 然后通过State相应地更新Store。它是一个纯函数, 可以从初始状态返回新状态。如果不需要进行任何工作, 它将按原样返回先前的状态。
62)在Redux中存储的意义是什么？
商店是一个对象, 它保存应用程序的状态, 并提供方法来访问状态, 通过subscription(listener)调度操作和注册侦听器。应用程序的整个状态树都保存在单个Store中, 这使Redux变得简单且可预测。我们可以将中间件传递给存储, 该中间件处理数据的处理, 并保留更改存储状态的各种操作的日志。所有动作都通过化简器返回新状态。
63)Redux与Flux有何不同？
Redux在以下方面不同于Flux。
| SN | Redux | Flux |
|---|---|---|
| Redux是用于管理应用程序状态的开源JavaScript库。 | Flux既不是库, 也不是框架。它是一种对React作为视图的补充, 并遵循单向数据流模型的概念的体系结构。 | |
| 商店的状态是不变的。 | 商店的状态是可变的。 | |
| 在此, 存储和更改逻辑是分开的。 | 在此, 存储包含状态和更改逻辑。 | |
| 它只有一个商店。 | 它可以有多个商店。 | |
| Redux没有分派器概念。 | 它具有单个Dispatcher, 并且所有操作都通过该Dispatcher。 |
React Redux的主要优点是：
- React Redux是react Application的官方UI绑定。它会随着API的变化而保持最新状态, 以确保你的React组件的行为符合预期。
- 它鼓励良好的” React” 架构。
- 它在内部实现了许多性能优化, 这允许仅在实际需要时才重新渲染组件。
- 它使代码维护变得容易。
- Redux的代码编写为小型, 纯净和隔离的函数, 这使该代码可测试且独立。
你需要从使用createStore()方法创建的模块中导出商店。另外, 你需要确保它不会污染全局窗口空间。
store = createStore(myReducer)
export default store| 工作/人力资源面试问题 |
| jQuery面试问题 |
| Java OOP面试问题 |
| JSP面试问题 |
| 休眠面试问题 |
| SQL面试题 |
| Android面试题 |
| MySQL面试问题 |
2
3
4
5
6
作者
开发者
初始发行
语言
类型
渲染图
数据绑定
判决
测试
应用架构
性能
1.
2.
3.
4.
5.
6.
7.
1.
2.
【精品！React面试问题推荐合集】3.
4.
5.
6.
7.
8.
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
1.
2.
3.
1.
2.
3.
4.
5.
面试技巧
JavaScript面试问题
Java基础面试问题
Servlet面试问题
春季面试问题
PL / SQL面试问题
Oracle面试问题
SQL Server面试问题
推荐阅读
- 最新Swift热门面试题精品推荐
- 最新推荐！Informatica面试题合集
- 最新质量保证(QA)面试问题合集推荐
- 最新深度学习面试题及其答案大全
- 精品！J2EE面试题及其答案汇总
- 推荐！SEO面试题精品汇总图解
- 关于SpringBoot集成myBatis时，mapper接口注入失败的问题
- UVA10498Happiness单纯形
- App自动化测试必备之adb使用