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 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的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 中。这个阶段包括componentWillMount和componentDidMount生命周期方法。
3. **Updating**：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。
4. **Unmounting**：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 componentWillUnmount 生命周期方法。

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

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

5：React 的生命周期方法有哪些？

主题: React

难度: ⭐⭐⭐

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

6：这三个点(...)在 React 干嘛用的？

主题: React

难度: ⭐⭐⭐

... 在React（使用JSX）代码中做什么？它叫什么？

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

复制代码

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