专栏首页京程一灯必须要会的 50 个React 面试题(上)[每日前端夜话0x40]

必须要会的 50 个React 面试题(上)[每日前端夜话0x40]

每日前端夜话0x40

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:7469 字 4图

预计阅读时间: 15 分钟

由于内容过多,文章分两次推送,请持续关注。

翻译:疯狂的技术宅 原文:https://www.edureka.co/blog/interview-questions/react-interview-questions/

如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。

JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性。其中 React 被认为是增长最快的 Javascript 框架。

截至今天,Github 上约有1,000名贡献者。 Virtual DOM 和可重用组件等独特功能吸引了前端开发人员的注意力。尽管它只是 MVC(模型 - 视图 - 控制器)中“视图”的库,但它对 Angular,Meteor,Vue 等全面的框架也构成了强力的挑战。下图为流行的 JS 框架的趋势:

JS 框架的趋势

React 面试题

以下是面试官最有可能问到的 50 个 React 面试题和答案。为方便你学习,我对它们进行了分类:

  • 基本知识
  • React 组件
  • React Redux
  • React 路由

基本知识

1. 区分Real DOM和Virtual DOM

Real DOM

Virtual DOM

1. 更新缓慢。

1. 更新更快。

2. 可以直接更新 HTML。

2. 无法直接更新 HTML。

3. 如果元素更新,则创建新DOM。

3. 如果元素更新,则更新 JSX 。

4. DOM操作代价很高。

4. DOM 操作非常简单。

5.消耗太多的内存。

5. 很少的内存消耗。

2. 什么是React?

  • React 是 Facebook 在 2011 年开发的前端 JavaScript 库。
  • 它遵循基于组件的方法,有助于构建可重用的UI组件。
  • 它用于开发复杂和交互式的 Web 和移动 UI。
  • 尽管它仅在 2015 年开源,但有一个很大的支持社区。

3. React有什么特点?

React的主要功能如下:

  1. 它使用**虚拟DOM **而不是真正的DOM。
  2. 它使用客户端渲染
  3. 它遵循单向数据流或数据绑定。

4. 列出React的一些主要优点。

React的一些主要优点是:

  1. 它提高了应用的性能
  2. 可以方便地在客户端和服务器端使用
  3. 由于 JSX,代码的可读性很好
  4. React 很容易与 Meteor,Angular 等其他框架集成
  5. 使用React,编写UI测试用例变得非常容易

5. React有哪些限制?

React的限制如下:

  1. React 只是一个库,而不是一个完整的框架
  2. 它的库非常庞大,需要时间来理解
  3. 新手程序员可能很难理解
  4. 编码变得复杂,因为它使用内联模板和 JSX

6. 什么是JSX?

JSX 是J avaScript XML 的简写。是 React 使用的一种文件,它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠,并能够提高其性能。下面是JSX的一个例子:

1render(){
2    return(        
3        <div>
4            <h1> Hello World from Edureka!!</h1>
5        </div>
6    );
7}

7. 你了解 Virtual DOM 吗?解释一下它的工作原理。

Virtual DOM 是一个轻量级的 JavaScript 对象,它最初只是 real DOM 的副本。它是一个节点树,它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树,该变化是由用户或系统完成的各种动作引起的。

Virtual DOM 工作过程有三个简单的步骤。

1. 每当底层数据发生改变时,整个 UI 都将在 Virtual DOM 描述中重新渲染。

Virtual DOM 1

2. 然后计算之前 DOM 表示与新表示的之间的差异。

Virtual DOM 2

3. 完成计算后,将只用实际更改的内容更新 real DOM。

Virtual DOM 3

8. 为什么浏览器无法读取JSX?

浏览器只能处理 JavaScript 对象,而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX,首先,需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象,然后再将其传给浏览器。

9. 与 ES5 相比,React 的 ES6 语法有何不同?

以下语法是 ES5 与 ES6 中的区别:

  1. require 与 import
1// ES5
2var React = require('react');
3
4// ES6
5import React from 'react';
  1. export 与 exports
1// ES5
2module.exports = Component;
3
4// ES6
5export default Component;
  1. component 和 function
 1// ES5
 2var MyComponent = React.createClass({
 3    render: function() {
 4        return
 5            <h3>Hello Edureka!</h3>;
 6    }
 7});
 8
 9// ES6
10class MyComponent extends React.Component {
11    render() {
12        return
13            <h3>Hello Edureka!</h3>;
14    }
15}
  1. props
 1// ES5
 2var App = React.createClass({
 3    propTypes: { name: React.PropTypes.string },
 4    render: function() {
 5        return
 6            <h3>Hello, {this.props.name}!</h3>;
 7    }
 8});
 9
10// ES6
11class App extends React.Component {
12    render() {
13        return
14            <h3>Hello, {this.props.name}!</h3>;
15    }
16}
  1. state
 1// ES5
 2var App = React.createClass({
 3    getInitialState: function() {
 4        return { name: 'world' };
 5    },
 6    render: function() {
 7        return
 8            <h3>Hello, {this.state.name}!</h3>;
 9    }
10});
11
12// ES6
13class App extends React.Component {
14    constructor() {
15        super();
16        this.state = { name: 'world' };
17    }
18    render() {
19        return
20            <h3>Hello, {this.state.name}!</h3>;
21    }
22}

10. React与Angular有何不同?

主题

React

Angular

1. 体系结构

只有 MVC 中的 View

完整的 MVC

2. 渲染

服务器端渲染

客户端渲染

3. DOM

使用 virtual DOM

使用 real DOM

4. 数据绑定

单向数据绑定

双向数据绑定

5. 调试

编译时调试

运行时调试

6. 作者

Facebook

Google

React 组件

11. 你理解“在React中,一切都是组件”这句话。

组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立,而不会影响 UI 的其余部分。

12. 解释 React 中 render() 的目的。

每个React组件强制要求必须有一个 render()。它返回一个 React 元素,是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 <form><group><div> 等。此函数必须保持纯净,即必须每次调用时都返回相同的结果。

13. 如何将两个或多个组件嵌入到一个组件中?

可以通过以下方式将组件嵌入到一个组件中:

 1class MyComponent extends React.Component{
 2    render(){
 3        return(          
 4            <div>
 5                <h1>Hello</h1>
 6                <Header/>
 7            </div>
 8        );
 9    }
10}
11class Header extends React.Component{
12    render(){
13        return
14            <h1>Header Component</h1>   
15   };
16}
17ReactDOM.render(
18    <MyComponent/>, document.getElementById('content')
19);

14. 什么是 Props?

Props 是 React 中属性的简写。它们是只读组件,必须保持纯,即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流,通常用于呈现动态生成的数据。

15. React中的状态是什么?它是如何使用的?

状态是 React 组件的核心,是数据的来源,必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同,它们是可变的,并创建动态和交互式组件。可以通过 this.state() 访问它们。

16. 区分状态和 props

条件

State

Props

1. 从父组件中接收初始值

Yes

Yes

2. 父组件可以改变值

No

Yes

3. 在组件中设置默认值

Yes

Yes

4. 在组件的内部变化

Yes

No

5. 设置子组件的初始值

Yes

Yes

6. 在子组件的内部更改

No

Yes

17. 如何更新组件的状态?

可以用 this.setState()更新组件的状态。

 1class MyComponent extends React.Component {
 2    constructor() {
 3        super();
 4        this.state = {
 5            name: 'Maxx',
 6            id: '101'
 7        }
 8    }
 9    render()
10        {
11            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
12            return (              
13                <div>
14                    <h1>Hello {this.state.name}</h1>
15                    <h2>Your Id is {this.state.id}</h2>
16                </div>
17            );
18        }
19    }
20ReactDOM.render(
21    <MyComponent/>, document.getElementById('content')
22);

18. React 中的箭头函数是什么?怎么用?

箭头函数(=>)是用于编写函数表达式的简短语法。这些函数允许正确绑定组件的上下文,因为在 ES6 中默认下不能使用自动绑定。使用高阶函数时,箭头函数非常有用。

 1//General way
 2render() {    
 3    return(
 4        <MyInput onChange = {this.handleChange.bind(this) } />
 5    );
 6}
 7//With Arrow Function
 8render() {  
 9    return(
10        <MyInput onChange = { (e)=>this.handleOnChange(e) } />
11    );
12}

19. 区分有状态和无状态组件。

有状态组件

无状态组件

1. 在内存中存储有关组件状态变化的信息

1. 计算组件的内部的状态

2. 有权改变状态

2. 无权改变状态

3. 包含过去、现在和未来可能的状态变化情况

3. 不包含过去,现在和未来可能发生的状态变化情况

4. 接受无状态组件状态变化要求的通知,然后将 props 发送给他们。

4.从有状态组件接收 props 并将其视为回调函数。

20. React组件生命周期的阶段是什么?

React 组件的生命周期有三个不同的阶段:

  1. 初始渲染阶段:这是组件即将开始其生命之旅并进入 DOM 的阶段。
  2. 更新阶段:一旦组件被添加到 DOM,它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。
  3. 卸载阶段:这是组件生命周期的最后阶段,组件被销毁并从 DOM 中删除。

21. 详细解释 React 组件的生命周期方法。

一些最重要的生命周期方法是:

  1. componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行。
  2. componentDidMount() – 仅在第一次渲染后在客户端执行。
  3. componentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。
  4. shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件,请返回true 否则返回 false。默认情况下,它返回 false。
  5. componentWillUpdate() – 在 DOM 中进行渲染之前调用。
  6. componentDidUpdate() – 在渲染发生后立即调用。
  7. componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。

22. React中的事件是什么?

在 React 中,事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异,如:

  1. 用驼峰命名法对事件命名而不是仅使用小写字母。
  2. 事件作为函数而不是字符串传递。

事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为,只能通过其事件处理程序访问。

23. 如何在React中创建一个事件?

 1class Display extends React.Component({    
 2    show(evt) {
 3        // code   
 4    },   
 5    render() {      
 6        // Render the div with an onClick prop (value is a function)        
 7        return (            
 8            <div onClick={this.show}>Click Me!</div>
 9        );    
10    }
11});

24. React中的合成事件是什么?

合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。

25. 你对 React 的 refs 有什么了解?

Refs 是 React 中引用的简写。它是一个有助于存储对特定的 React 元素或组件的引用的属性,它将由组件渲染配置函数返回。用于对 render() 返回的特定元素或组件的引用。当需要进行 DOM 测量或向组件添加方法时,它们会派上用场。

 1class ReferenceDemo extends React.Component{
 2     display() {
 3         const name = this.inputDemo.value;
 4         document.getElementById('disp').innerHTML = name;
 5     }
 6render() {
 7    return(        
 8          <div>
 9            Name: <input type="text" ref={input => this.inputDemo = input} />
10            <button name="Click" onClick={this.display}>Click</button>            
11            <h2>Hello <span id="disp"></span> !!!</h2>
12          </div>
13    );
14   }
15 }

26. 列出一些应该使用 Refs 的情况。

以下是应该使用 refs 的情况:

  • 需要管理焦点、选择文本或媒体播放时
  • 触发式动画
  • 与第三方 DOM 库集成

27. 你如何模块化 React 中的代码?

可以使用 export 和 import 属性来模块化代码。它们有助于在不同的文件中单独编写组件。

 1//ChildComponent.jsx
 2export default class ChildComponent extends React.Component {
 3    render() {
 4        return(           
 5              <div>
 6                  <h1>This is a child component</h1>
 7              </div>
 8        );
 9    }
10}
11
12//ParentComponent.jsx
13import ChildComponent from './childcomponent.js';
14class ParentComponent extends React.Component {    
15    render() {        
16        return(           
17             <div>               
18                <App />          
19             </div>       
20        );  
21    }
22}

28. 如何在 React 中创建表单

React 表单类似于 HTML 表单。但是在 React 中,状态包含在组件的 state 属性中,并且只能通过 setState() 更新。因此元素不能直接更新它们的状态,它们的提交是由 JavaScript 函数处理的。此函数可以完全访问用户输入到表单的数据。

 1handleSubmit(event) {
 2    alert('A name was submitted: ' + this.state.value);
 3    event.preventDefault();
 4}
 5
 6render() {
 7    return (        
 8        <form onSubmit={this.handleSubmit}>
 9            <label>
10                Name:
11                <input type="text" value={this.state.value} onChange={this.handleSubmit} />
12            </label>
13            <input type="submit" value="Submit" />
14        </form>
15    );
16}

【明天推送下篇】

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:京程一灯

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 所有这些基础的React.js概念都在这里了

    这篇文章不会涵盖什么是React或者为什么你应该学习它。相反,这是对已经熟悉JavaScript并熟悉DOM API基础知识的人们对React.js的基础知识的...

    疯狂的技术宅
  • React 性能工程

    这篇文章适用于复杂的React应用。如果只是构建一些简单的、小型的应用,你还不用考虑性能问题。不必过早地优化,去构建吧!

    疯狂的技术宅
  • React教程:组件,Hooks和性能 [每日前端夜话0x36]

    正如 我们的React教程第一部分 【点击直达】中所指出的,开始使用 React 相对容易。首先使用 Create React App(CRA)初始化一个新项目...

    疯狂的技术宅
  • 通往全栈工程师的捷径 —— React

    首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React...

    腾讯Bugly
  • React基础(4)-理清React的工作方式

    在接触React之前,我们也许习惯了DOM编程,那它相比于原生JS,JQ编程方式,究竟有什么区别?React的工作方式是什么样子的?所谓的虚拟DOM又指的是什么...

    itclanCoder
  • [译]图解React

    React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了?对于它们究竟是什么你是否感到困惑?

    用户1687375
  • React 性能工程

    这篇文章适用于复杂的React应用。如果只是构建一些简单的、小型的应用,你还不用考虑性能问题。不必过早地优化,去构建吧!

    疯狂的技术宅
  • 4、React组件之性能优化

    优化并不嫌早。因为,对性能影响最关键的部分,往往涉及解决方案核心,决定整体的架构, 将来要改变的时候牵扯更大。

    keyWords
  • 「React 基础」React 16 中的这几个新特性值得你关注

    本系列的上篇文章里,「React 基础」在 React 项目中使用 ES6,你需要了解这些 ,我给大家介绍了 ES6 在 React 的常见用法,本篇文章将会大...

    前端达人
  • 深入理解React Native页面构建渲染原理

    前言 React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。 基本概念解释 React 是...

    xiangzhihong

作者介绍

精选专题

活动推荐

扫码关注云+社区

领取腾讯云代金券