當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

22道高级 React 面试题

發布時間：2023/12/24 综合教程 27 生活家

生活随笔收集整理的這篇文章主要介紹了 22道高级 React 面试题小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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 面试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：大数据技术在电子商务物流集成中应用案例
下一篇： php怎么获取时间戳