当前位置: 主页>网站教程>JS教程> 22道高级 React 面试题

分享文章到：

22道高级 React 面试题

发布时间：09/01 来源：未知浏览：关键词：

【相关专题引荐：react面试题（2020）】

Q1：什么是虚拟DOM？

难度：?

虚拟DOM（VDOM）它是真实DOM的内存表示,一种编程概念，一种模式。它会和真实的DOM同步，比方通过ReactDOM这种库，这个同步的历程叫做调和(reconcilation)。

虚拟DOM更多是一种模式，不是一种特定的技术。

材料来源：https://github.com/sudheerj/reactjs-interview-questions
参照材料：https://www.javascriptcn.com/read-65385.html

Q2：类组件和函数组件之间有什么不同？

难度：??

类组件（Class components）
- 不管是使用函数或是类来声明一个组件，它决不克不及修改它本人的 props。
  - 所有 React 组件都必需是纯函数，并制止修改其本身 props。
- React是单项数据流，父组件改动了属性，那么子组件视图会更新。
  - 属性 props是外界传递过来的，状态 state是组件本身的，状态可以在组件中任意修改
  - 组件的属性和状态改动都会更新视图。

class Welcome extends React.Component {
  render() {
    return (
      <h1>Welcome { this.props.name }</h1>
    );
  }
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

函数组件（functional component）

函数组件接收一个简单的 props 对象并返回了一个React元素

function Welcome (props) {
  return <h1>Welcome {props.name}</h1>
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

不同

函数组件和类组件当然是有不同的，并且函数组件的机能比类组件的机能要高，由于类组件使用的时候要实例化，而函数组件直接施行函数取返回结果即可。为了提高机能，尽量使用函数组件。

不同	函数组件	类组件
可否有 `this`	没有	有
可否有生命周期	没有	有
可否有状态 `state`	没有	有

材料来源：https://github.com/Pau1fitz/react-interview

参照材料：https://overreacted.io/how-are-function-components-different-from-classes/

Q3：React中的refs作用是啥？

难度：??

Refs 是 React 供给给我们的平安拜访 DOM 元素或者某个组件实例的句柄。
我们可认为元素增加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

上述代码中的 input 域包括了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。
别的值得一提的是，refs 并不是类组件的专属，函数式组件一样能够利用闭包暂存其值：

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

材料来源：https://github.com/Pau1fitz/react-interview
参照材料：https://stackoverflow.com/questions/29503213/use-state-or-refs-in-react-js-form-components

Q4：描写React事件处置。

难度：??

为理解决跨阅读器兼容性问题，React中的事件处置程序将传递SyntheticEvent实例，该实例是React跨阅读器本机事件的跨阅读器包装器。这些综合事件具有与您惯用的本机事件雷同的界面，除了它们在所有阅读器中的工作方式雷同。

有点有味的是，React实际上并未将事件附加到子节点本身。React将使用单个事件侦听器在顶层侦听所有事件。这对机能有好处，也意味着React在更新DOM时无需担忧跟踪事件监听器。

材料来源：https://tylermcginnis.com/react-interview-questions/
参照材料：https://www.cnblogs.com/xiangming25/p/6430461.html

Q5：state 和 props有什么不同？

难度：??

state 和 props都是一般的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功效不一样。即

props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来从新渲染子组件，不然子组件的props乃至展示情势不会改动。
state的主要作用是用于组件留存、操纵乃至修改本人的状态，它只能在constructor中初始化，它算是组件的私有属性，不成通过外部拜访和修改，只能通过组件内部的this.setState来修改，修改state属性会致使组件的从新渲染。

材料来源： https://github.com/sudheerj/reactjs-interview-questions

参照材料：https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react

Q6：怎样创立refs？

难度：??

Refs 是使用 React.createRef() 办法创立的，并通过 ref 属性增加到 React 元素上。为了在整个组件中使用refs，只需将 ref 分配给结构函数中的实例属性

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <p ref={this.myRef} />;
  }
}

和：

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} /> // Access DOM input in handle submit
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

我们还可以借助闭包在功效组件中使用它。

材料来源： https://github.com/sudheerj/reactjs-interview-questions

参照材料：https://segmentfault.com/a/1190000015113359

Q7：什么是高阶组件？

难度：??

高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。根本上，这是从React的组成性质派生的一种模式，我们称它们为“纯”组件， 由于它们可以接受任何动态供给的子组件，但它们不会修改或复制其输入组件的任何行动。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧
高阶组件的参数为一个组件返回一个新的组件
组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件

材料来源： https://github.com/sudheerj/reactjs-interview-questions

参照材料：https://css-tricks.com/what-are-higher-order-components-in-react/

Q8：constructor中super与props参数一起使用的目的是啥？

难度：??

在调取办法此前，子类结构函数没法使用this援用super()。

在ES6中，在子类的constructor中必需先调取super才能援用this。

在constructor中可以使用this.props

使用props：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props);  // Prints { name: 'sudheer',age: 30 }
    }
}

不使用props：

class MyComponent extends React.Component {
    constructor(props) {
        super();
        console.log(this.props); // Prints undefined
        // But Props parameter is still available
        console.log(props); // Prints { name: 'sudheer',age: 30 }
    }

    render() {
        // No difference outside constructor
        console.log(this.props) // Prints { name: 'sudheer',age: 30 }
    }
}

上面的代码片段揭示了this.props行动仅在结构函数中有所不一样。外部结构函数雷同。

材料来源：

https://github.com/sudheerj/reactjs-interview-questions

https://www.fullstack.cafe/React)

Q9：什么是受控组件？

难度：???

在HTML傍边，像<input>,<textarea>, 和 <select>这类表单元素会保持本身状态，并按照会员输入停止更新。但在React中，可变的状态平常留存在组件的状态属性中，并且只能用 setState() 办法停止更新。

非受控组件

非受控组件，即组件的状态不受React操纵的组件，例如下边这个

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Demo1 extends Component {
    render() {
        return (
            <input />
        )
    }
}

ReactDOM.render(<Demo1/>, document.getElementById('content'))

在这个最简便的输入框组件里,我们并没有干预input中的value展现,即会员输入的内容都会展现在上面。假如我们通过props给组件设定一个初始默许值,defaultValue属性是React内部实现的一个属性,目的相似于input的placeholder属性。
ps: 此处假如使用value代替defaultValue,会发明输入框的值没法改动

受控组件

一样的，受控组件就是组件的状态受React操纵。上面提到过，既然通过设定input的value属性, 没法改动输入框值,那么我们把它和state结合在一起,再绑定onChange事件,实时更新value值就行了。

class Demo1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.value
        }
    }

    handleChange(e) {
        this.setState({
            value: e.target.value
        })
    }

    render() {
        return (
            <input value={this.state.value} onChange={e => this.handleChange(e)}/>
        )
    }
}

材料来源：https://github.com/Pau1fitz/react-interview

参照材料：https://www.php.cn/js-tutorial-382697.html

Q10：以下使用React.createElement的等价项是啥？

难度：???

问题：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

以劣等同于什么使用React.createElement？

答：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

材料来源：https://github.com/Pau1fitz/react-interview

Q11：什么是JSX？

难度：???

JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用根基。React在不使用JSX的状况下一样可以工作，然而使用JSX可以提高组件的可读性，因此引荐使用JSX。

class MyComponent extends React.Component {
  render() {
    let props = this.props;  
    return (
      <p className="my-component">
      <a href={props.url}>{props.name}</a>
      </p>
    );
  }
}

长处：

1.同意使用熟知的语法来定义 HTML 元素树；

2.供给愈加语义化且移动的标签；

3.程序构造更容易被直不雅化；

4.抽象了 React Element 的创立历程；

5.可以随时掌控 HTML 标签乃至生成这些标签的代码；

6.是原生的 JavaScript。

材料来源： https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1

参照材料：http://facebook.github.io/jsx/

Q12：为什么不直接更新state状态？

难度：???

假如停止如下方式更新状态，那么它将不会从新渲染组件。

    //Wrong
    This.state.message =”Hello world”;

而是使用setState()办法。它方案对组件状态对象的更新。状态改动时，组件通过从新渲染做出响应

 //Correct
 This.setState({message: ‘Hello World’});

留意：可以分配状态的独一位置是结构函数。

材料来源：https://github.com/sudheerj/reactjs-interview-questions

Q13：ReactJS生命周期是什么不一样阶段？

难度：???

React组件的生命周期分为四个不一样阶段：

初始化：在此阶段，react组件预备设定初始状态和默许道具。
挂载： react组件已预备好挂载在阅读器DOM中。此阶段涵盖componentWillMount和componentDidMount生命周期办法。
更新：在此阶段，组件以两种方式停止更新，即发送新道具和更新状态。此阶段涵盖了shouldComponentUpdate，componentWillUpdate和componentDidUpdate生命周期办法。
卸载：在最后一个阶段，不需要该组件，并且可以从阅读器DOM上卸载该组件。此阶段包罗componentWillUnmount生命周期办法。

材料来源： https://github.com/sudheerj/reactjs-interview-questions

Q14：ReactJS的生命周期办法是啥？

难度：???

componentWillMount：在渲染此前施行，用于根组件中的利用程序级别配置。
componentDidMount：仅在客户端的第一次渲染之后施行。这是AJAX恳求和DOM或状态更新应当发生的地方。此办法也用于与其他JavaScript框架乃至任何延迟施行的函数(如setTimeout或setInterval)停止集成，在这里使用它来更新状态，以便我们可以触发其他生命周期办法。
componentWillReceiveProps：只要在另一个渲染被调取此前更新props就被调取。当我们更新状态时，从setNewNumber触发它。
shouldComponentUpdate：肯定可否将更新组件。默许状况下，它返回true。假如您肯定组件在状态或道具更新后不需要渲染，则可以返回false值。这是提高机能的好地方，由于假如组件收到新的道具，它可以防止从新渲染。
componentWillUpdate：在由shouldComponentUpdate确定返回正值的长处和状态更换时，在从新渲染组件此前施行。
componentDidUpdate：平常用于更新DOM以响应属性或状态更换。
componentWillUnmount：它将用于取消任何传出的网络恳求，或删除与该组件关联的所有事件侦听器。

材料来源：

https://github.com/sudheerj/reactjs-interview-questions

https://www.fullstack.cafe/React)

Q15：React中的这三个点（...）是做什么的？

难度：???

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

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

扩展传值符号。它是在ES2018中增加的（数组/可迭代对象的传播较早，ES2015）。

例如，假如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}>

扩展符号不仅适用于该用例，并且关于创立具有现有对象的大多数（或全部）属性的新对象非常利便-在更新状态时会碰到许多问题，由于您没法修改状态直：

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

材料来源： https://stackoverflow.com/questions/31048953/what-do-these-three-dots-in-react-do

Q16：使用React Hooks有什么优势？

难度：???

hooks 是react 16.8 引入的特性，他同意你在不写class的状况下操纵state 和react的其他特性。
hooks 只是多了一种写组件的办法，使编写一个组件更简便更利便，同时可以自定义hook把公共的逻辑提取出来，让逻辑在多个组件之间同享。

Hook 是啥

Hook 是啥？ Hook 是一个非凡的函数，它可以让你“钩入” React 的特性。例如，useState 是同意你在 React 函数组件中增加 state 的 Hook。稍后我们将学习其他 Hook。

什么时候我会用 Hook？假如你在编写函数组件并意识到需要向其增加一些 state，之前的做法是必需将其它转化为 class。此刻你可以在现有的函数组件中使用 Hook。

ReactHooks的长处

无需复杂的DOM构造
简约易懂

材料来源： https://hackernoon.com/react-hooks-usestate-using-the-state-hook-89ec55b84f8c

Q17：React中的useState？

难度：???

案例：

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <p>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </p>
  )
}

语法:

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

其中 state 是他的值, setState 是用来设定值的函数, initialState 是初始值

useState-initialState

该初始值可以接受任何参数,但是记得当他接受为一个函数时,就变成了Lazy initialization (延迟初始化)
该函数返回值即为initialState

const [count, setCount] = useState(0);

const [count, setCount] = useState(()=>0);
// 这两种初始化方式 是相等的,但是在函数为初始值时会被施行一次

const [count, setCount] = useState(()=>{
    console.log('这里只会在初始化的时候施行')
    // class 中的 constructor 的操纵都可以移植到这里
    return 0
});
// 当第一次施行完毕后 就和另一句的代码是雷同的结果了

useState-setState

或许许多人在使用 class 的 setState 时候,会经常使用他的回调函数,
但是这里很遗憾,他只接受新的值,假如想要对应的回调,可以使用useEffect,这个问题等会会供给一个跳转链接

Q18：React中的StrictMode是啥？

难度：???

React的StrictMode是一种帮忙程序组件，可以帮忙您编写更好的react组件，您可以使用包装一些组件，<StrictMode />并且根本上可以：

验证内部组件可否遵照某些引荐做法，假如不在操纵台中，则会发出警告。
验证不赞同使用的办法，假如使用了严厉模式，则会在操纵台中警告您。
通过识别潜在风险来帮忙您预防某些副作用。

参照材料：http://react.html.cn/docs/strict-mode.html

Q19：为什么类办法需要绑定？

难度：???

在JavaScript中，this的值取决于当前上下文。在React类的组件办法中，开发人员平常但愿它援用组件的当前实例，因此有必要将这些办法绑定到该实例。平常，这是在结构函数中完成的，例如：

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

材料来源： https://www.toptal.com/react/interview-questions

Q20：描写Flux与MVC？

难度：????

传统的MVC模式在别离数据（模型），UI（视图）和逻辑（操纵器）的关注方面结果很好，但是MVC架构经常碰到两个主要问题：

数据流定义不佳：跨视图停止的级联更新平常会致使纠结的事件网，难以调试。
缺乏数据完全性：可以从任何地方对模型数据停止突变，从而在整个UI上发生不成猜测的结果。

使用Flux模式，复杂的UI不再受到级联更新的困扰。任何给定的React组件都将能够按照商店供给的数据重建其状态。Flux模式还通过限制对同享数据的直接拜访来增强数据完全性。

材料来源：

https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1

https://www.fullstack.cafe/React)

Q21：React context是啥？

难度：????

React文档官网并未对Context给出“是啥”的定义，更多是描写使用的Context的场景，乃至怎样使用Context。

官网关于使用Context的场景是这样描写的：

In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API.

简便说就是，当你不想在组件树中通过逐层传递props或者state的方式来传递数据时，可以使用Context来实现跨层级的组件数据传递。

使用props或者state传递数据，数据自顶下贱。

使用Context，可以跨过组件停止数据传递。

材料来源： https://github.com/WebPredict/react-interview-questions

Q22：React Fiber是啥？

难度：????

React Fiber 并不是所谓的纤程（微线程、协程），而是一种基于阅读器的单线程调度算法，背后的支撑 API 是大名鼎鼎的：requestIdleCallback。

Fiberl是一种将 recocilation （递归 diff），拆分成很多个小任务的算法；它随时能够休止，复原。休止复原的时机取决于当前的一帧（16ms）内，还有没有足够的时间同意运算。

以上就是22道高级 React 面试题的具体内容，更多请关注百分百源码网其它相关文章！

打赏

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

百分百源码网建议打赏1～10元，土豪随意，感谢您的阅读！

上一篇：mock JQuery如何使用
下一篇：详解使用Minify紧缩css和js文件

共有150人阅读，期待你的评论！发表评论

本文标签

广告赞助

能出一分力是一分吧！

22道高级 React 面试题

Q1：什么是虚拟DOM？

Q2：类组件和函数组件之间有什么不同？

Q3：React中的refs作用是啥？

Q4：描写React事件处置。

Q5：state 和 props有什么不同？

Q6：怎样创立refs？

Q7：什么是高阶组件？

Q8：constructor中super与props参数一起使用的目的是啥？

Q9：什么是受控组件？

Q10：以下使用React.createElement的等价项是啥？

Q11：什么是JSX？

Q12：为什么不直接更新state状态？

Q13：ReactJS生命周期是什么不一样阶段？

Q14：ReactJS的生命周期办法是啥？

Q15：React中的这三个点（...）是做什么的？

Q16：使用React Hooks有什么优势？

Q17：React中的useState？

useState-initialState

useState-setState

Q18：React中的StrictMode是啥？

Q19：为什么类办法需要绑定？

Q20：描写Flux与MVC？

Q21：React context是啥？

Q22：React Fiber是啥？

相关文章

本文标签

广告赞助

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板