写点什么

2021 前端 react 高频面试题

用户头像
it优课
关注
发布于: 2 小时前

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

难度: ⭐⭐⭐


请看下面的代码:



答案:


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


// ES5var React = require('react'); // ES6import React from 'react';复制代码
复制代码


  1. export 与 exports


// ES5module.exports = Component; // ES6export default Component;复制代码
复制代码


  1. component 和 function


// ES5var MyComponent = React.createClass({    render: function() {        return      <h3>Hello Edureka!</h3>;    }}); // ES6class MyComponent extends React.Component {    render() {        return      <h3>Hello Edureka!</h3>;    }}复制代码
复制代码


  1. props


// ES5var App = React.createClass({    propTypes: { name: React.PropTypes.string },    render: function() {        return      <h3>Hello, {this.props.name}!</h3>;    }});// ES6class App extends React.Component {    render() {        return      <h3>Hello, {this.props.name}!</h3>;    }}复制代码
复制代码


  1. state


// ES5var App = React.createClass({    getInitialState: function() {        return { name: 'world' };    },    render: function() {        return          <h3>Hello, {this.state.name}!</h3>;    }});// ES6class App extends React.Component {    constructor() {        super();        this.state = { name: 'world' };    }    render() {        return          <h3>Hello, {this.state.name}!</h3>;    }}
复制代码

10. React 与 Angular 有何不同?


用户头像

it优课

关注

还未添加个人签名 2021.06.26 加入

还未添加个人简介

评论

发布
暂无评论
2021前端react高频面试题