一些热门的 React 面试问题

什么是 React？

React 是一个开源 JavaScript 库，而非成熟的框架，由 Facebook 创建。它并非像 Angular 那样是一个完整的 MVC 架构，而是一个由组件构建的视图。这些组件将整个 UI 解析成可复用的小块。然后，它会独立渲染每个组件，而不会影响 UI 的其余部分。由于 React 只根据需要渲染每个 UI 组件，因此性能非常快。

React 有哪些特性？

它使用虚拟 DOM 替代真实 DOM，进行服务器端渲染，并实现单向数据流或数据绑定。它可以提升应用程序的性能，并可与其他 Web 框架集成。

真实 DOM 和虚拟 DOM 有什么区别？

React 会创建 DOM 的虚拟副本，以根据用户操作确定实际 DOM 的哪些部分需要更改。然后，它会从虚拟 DOM 中获取更改日期，并选择性地更新实际 DOM（而不是重新加载整个 DOM）。由于这避免了页面的频繁重新加载，因此可以显著提升性能。

真实 DOM

更新速度慢。
可以直接更新 HTML。
如果元素更新，则会创建新的 DOM。DOM
操作非常昂贵。
内存浪费太多。

虚拟 DOM

更新速度更快
无法直接更新 HTML
如果元素更新
DOM，则更新 JSX 操作非常容易
没有内存浪费

什么是 JSX？

JSX 是 JavaScript XML 的简写。React 充分利用了 JavaScript 的表达能力以及类似 HTML 的模板语法。

浏览器只能读取 JavaScript 对象，但 JSX 不像常规 JavaScript 对象，因此为了让浏览器读取 JSX，我们需要使用 JSX 转换器（如 Babel 或 Webpack）将 JSX 文件转换为常规 JavaScript 对象。

尽管 JSX 是一个有用的工具，但您不需要使用JSX 来通过 React 构建网站。

class Tickets extends React.Component {

    render() {
        return (
            <div class="from-edge">
                <Pricing />
                <Seasonpass />
                <Info />
            </div>
        )
    }
}

render() 在 React 中起什么作用？

它返回一个单独的 React 元素，它是原生 DOM 组件的表示，如果一组元素嵌套在一个 html 元素中，它也可以返回它们。

类组件与功能组件？

函数式组件是 React 的基本组件，由组件不变的 props（属性）定义。类组件是更复杂的组件。类组件允许你执行组件的生命周期方法以及管理组件的状态。

React 中的箭头函数是什么？

箭头函数=>是一种函数表达式的语法，也是向回调函数传递参数的方法之一。使用箭头函数会在组件每次渲染时创建一个新函数。

ES5 和 ES6 有什么区别？

ECMAScript 6 是 JavaScript 的第二次重大修订，也称为 ES6 和 ECMAScript 2015。ES5 于 2009 年发布。

一些重大差异在于 require 与 import、如何导出以及组件

// 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
      <h4>Howdy!</h4>
    };
});
// ES6
class MyComponent extends React.Component {
    render() {
        return
       <h4>Howdy!</h4>
    }
}

你对 Flux 了解多少？

Flux 是一种强制单向数据流的架构模式 - 并且不是 React 所特有的。

操作 > 调度程序 > 存储 > 视图

虽然 Store 数据在多个 View 之间共享，但这些数据无法直接修改——所有更新数据的请求都必须先经过 Action > Dispatcher 链。因此，当数据发生更新时，更容易找到请求这些更改的代码来自哪里。

React 中的 Props 是什么？

Props（Properties 的缩写）是只读组件，从父组件传递到子组件（维护单向数据流）。它们是不可变的，主要用于渲染动态创建或获取的数据——它们描述了 React 组件的配置方式。Properties
在实例化组件时设置，之后不应再进行修改。组件内的值的修改是通过stateproperty 而不是propsproperty 来跟踪的。

var TicketInfo = React.createClass({
  render: function() {
    return React.createElement("span", {
      className: this.props.className
    }, this.props.message);
  },

});

var ticketMessage = React.createElement(Message, {
  className: "coolTicket",
  message: "You have bought a ticket! Congrats!"
});
ReactDOM.render(ticketMessage)

React 中的 State 是什么？

状态用于创建动态且响应迅速的组件，可以通过 访问this.state()。状态通过 DOM 元素上的事件处理程序来实现，这些事件处理程序会将从 DOM 中检索到的更新值通知组件新的状态（例如，当用户在输入框中输入内容时）。组件的状态可以通过 this.setState() 进行更新。

 getInitialState: function() {
    return { message: this.props.message };
  },

  _ticketCount: function(e) {
    this.setState({ message: e.target.value });
  },

  render: function() {
    return (
      <div>
        <span>How Many Tickets: {this.state.countTickets}</span>
        <br />
        How Many Tickets? <input type="text" value={this.state.countTickets} onChange={this._ticketCount} />
      </div>
    );

React 中的 Refs 是什么?

它们是 Reference 的缩写，用于存储对特定 React 元素或组件的引用，然后由组件的渲染配置函数返回。它们通常在需要管理焦点、媒体播放或与第三方 DOM 库集成时使用。

有哪些生命周期方法？

React 的所有生命周期方法可以分为以下几类：初始化、状态/属性更新以及析构。
以下列出了 React 的一些生命周期方法。

componentWillMount()这是在渲染发生之前调用的（客户端和服务器端）。
componentDidMount()这仅在第一次渲染后在客户端调用 - 您可以使用此生命周期方法从服务器获取数据
shouldComponentUpdate()这将返回一个布尔值，默认情况下为 false，表示您希望更新组件。
componentWillUpdate()这在渲染组件之前调用。
componentWillReceiveProps()一旦从组件的父类接收到 props，就会调用此生命周期方法，但也会在调用（或调用）渲染之前调用。
componentDidUpdate()这在组件渲染之后调用。
componentWillUnmount()这用于在从 DOM 卸载组件后清除内存空间。

什么是 React Router？

React Router 是一个基于 React 构建的路由库，它使 URL 与网页上当前显示的数据保持同步，同时保持标准化的结构。它用于开发单页 Web 应用。与传统路由不同，它仅更改 history 属性，而无需向服务器发送 HTTP 请求。