专栏首页用户8771298的专栏2021前端react高频面试题
原创

2021前端react高频面试题

2021前端react高频面试题

React视频教程系列

React 实战:CNode视频教程

完整教程目录:点击查看

React经典教程-从入门到精通

完整教程目录:点击查看

最新最全前端毕设项目(小程序+VUE+Noed+React+uni app+Express+Mongodb)

完整教程目录:点击查看

2021前端React精品教程

完整教程目录:点击查看

1:讲讲什么是 JSX ?

主题: React

难度: ⭐⭐⭐

当 **Facebook** 第一次发布 React 时,他们还引入了一种新的 JS 方言 JSX,将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取,必须使用Babelwebpack等工具将其转换为传统的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

难度: ⭐⭐⭐

请看下面的代码:

img

答案:

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

难度: ⭐⭐⭐

在组件生命周期中有四个不同的阶段:

  1. **Initialization**:在这个阶段,组件准备设置初始化状态和默认属性。
  2. **Mounting**:react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括componentWillMountcomponentDidMount生命周期方法。
  3. **Updating**:在这个阶段,组件以两种方式更新,发送新的 props 和 state 状态。此阶段包括shouldComponentUpdatecomponentWillUpdatecomponentDidUpdate生命周期方法。
  4. **Unmounting**:在这个阶段,组件已经不再被需要了,它从浏览器 DOM 中卸载下来。这个阶段包含 componentWillUnmount 生命周期方法。

除以上四个常用生命周期外,还有一个错误处理的阶段:

**Error Handling**:在这个阶段,不论在渲染的过程中,还是在生命周期方法中或是在任何子组件的构造函数中发生错误,该组件都会被调用。这个阶段包含了 componentDidCatch 生命周期方法。

5:React 的生命周期方法有哪些?

主题: React

难度: ⭐⭐⭐

  • componentWillMount:在渲染之前执行,用于根组件中的 App 级配置。
  • componentDidMount:在第一次渲染之后执行,可以在这里做AJAX请求,DOM 的操作或状态更新以及设置事件监听器。
  • componentWillReceiveProps:在初始化render的时候不会执行,它会在组件接受到新的状态(Props)时被触发,一般用于父组件状态更新时子组件的重新渲染
  • shouldComponentUpdate:确定是否更新组件。默认情况下,它返回true。如果确定在 stateprops 更新后组件不需要在重新渲染,则可以返回false,这是一个提高性能的方法。
  • componentWillUpdate:在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。
  • componentDidUpdate:它主要用于更新DOM以响应propsstate更改。
  • componentWillUnmount:它用于取消任何的网络请求,或删除与组件关联的所有事件监听器。

6:这三个点(...)在 React 干嘛用的?

主题: React

难度: ⭐⭐⭐

... 在React(使用JSX)代码中做什么?它叫什么?

<Modal {...this.props} title='Modal heading'  animation={false}/>

复制代码

这个叫扩展操作符号或者展开操作符,例如,如果this.props包含a:1b: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>

    );

}

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

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

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

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

  1. require 与 import
// ES5

var React = require('react');

 

// ES6

import React from 'react';

复制代码
  1. export 与 exports
// ES5module.exports = Component; // ES6export default Component;复制代码
  1. 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>;

    }

}

复制代码
  1. 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>;

    }

}

复制代码
  1. 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>;

    }

}

**10. React与Angular有何不同?**

| **主题** | **React** | **Angular** |

| ------------- | ------------------ | ------------- |

| *1. 体系结构* | 只有 MVC 中的 View | 完整的 MVC |

| *2. 渲染* | 可以在服务器端渲染 | 客户端渲染 |

| *3. DOM* | 使用 virtual DOM | 使用 real DOM |

| *4. 数据绑定* | 单向数据绑定 | 双向数据绑定 |

| *5. 调试* | 编译时调试 | 运行时调试 |

| *6. 作者* | Facebook | Google |

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2021前端react高频面试题汇总

    路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时,它将渲染其内容,当它不匹配时...

    zz1998
  • 2021高频前端面试题汇总之React篇

    合成事件是 react 模拟原生 DOM 事件所有能力的一个事件对象,其优点如下:

    zz1998
  • 2021高频前端面试题汇总之React篇

    React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React...

    zz1998
  • 2021前端react面试题汇总

    (2)区别 Redux更多的是遵循Flux模式的一种实现,是一个 JavaScript库,它关注点主要是以下几方面∶

    zz1998
  • 2021前端面试高频 HTML + CSS

    当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。

    小阿新
  • 中高级前端高频面试题分享

    代码比较简单,我们只是在setTimeout的方法里面又调用了一次setTimeout,就可以达到间歇调用的目的。

    前端迷
  • vue面试题+答案,2021前端面试

    MVC 全名是 Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范

    zz1998
  • 前端面试拔高题

    对象是 JS 中基本类型之一,而且和原型链、数组等知识息息相关。不管是面试中,还是实际开发中我们都会碰见深拷贝对象的问题。

    李才哥
  • 前端高频手写面试题整理汇总

    用户1272076
  • 树+8道前端算法面试高频题解

    A 是 根节点。C、D、F、G 是 叶子节点。A 是 B 和 E 的 父节点。B 和 E 是 A 的 子节点。B、E 之间是 兄弟节点。

    童欧巴
  • 2021前端面试必备题+答案

    如果是 HTTP 1.0 版本协议,一般情况下,不支持长连接,因此在每次请求发送完毕之后,TCP 连接即会断开,因此一个 TCP 发送一个 HTTP 请求,...

    zz1998
  • 链表+6道前端算法面试高频题解

    数组在上一篇的专栏,数组回炉重造+6道前端算法面试高频题解中我们进行了回顾和刷题。

    童欧巴
  • 高频前端开发面试问题及答案整理

    https://blog.csdn.net/p358278505/article/details/78718283

    @超人
  • 前端常见20道高频面试题深入解析

    今年来,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力。本文挑选了20道大厂面试题,建议在阅...

    前端达人
  • 460道Java后端面试高频题

    转自公众号:码农求职小助手

    乔戈里
  • React高频面试题梳理,看看面试怎么答?(上)

    前段时间准备面试,总结了很多,下面是我在准备React面试时,结合自己的实际面试经历,以及我以前源码分析的文章,总结出来的一些 React高频面试题目。

    ConardLi
  • 2021 年最佳 JavaScript 框架

    据 Stackoverflow 的 2021 年开发者调查,JavaScript 已连续第八年成为使用最多的语言,有 67.7% 的受访者选择它。之所以如此受欢...

    用户7365393
  • web前端面试中10个关于css高频面试题,你都会吗?

    BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的...

    coder_koala
  • 【前端面试题】2021/3/15面试题

    所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。

    孙叫兽

扫码关注云+社区

领取腾讯云代金券