工做很差找， 這 35 道React 面試題能夠助你一波

時間  2020-03-12
標籤 很差 react 面試 能夠 欄目 React 简体版
原文   原文鏈接
做者：Alex
譯者：前端小智
來源：dev.to
點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。html

問題1：什麼是虛擬DOM？

主題: React
難度: ⭐

虛擬 DOM (VDOM)是真實 DOM 在內存中的表示。UI 的表示形式保存在內存中，並與實際的 DOM 同步。這是一個發生在渲染函數被調用和元素在屏幕上顯示之間的步驟，整個過程被稱爲調和。前端

問題2：類組件和函數組件之間的區別是啥？

主題: React
難度: ⭐⭐
  • 類組件可使用其餘特性，如狀態 state 和生命週期鉤子。
  • 當組件只是接收 props 渲染到頁面時，就是無狀態組件，就屬於函數組件，也被稱爲啞組件或展現組件。

函數組件和類組件固然是有區別的，並且函數組件的性能比類組件的性能要高，由於類組件使用的時候要實例化，而函數組件直接執行函數取返回結果便可。爲了提升性能，儘可能使用函數組件。node

區別 函數組件 類組件
是否有 this 沒有 有
是否有生命週期 沒有 有
是否有狀態 state 沒有 有

問題 3：React 中 refs 幹嗎用的？

主題: React
難度: ⭐⭐

Refs 提供了一種訪問在render方法中建立的 DOM 節點或者 React 元素的方法。在典型的數據流中，props 是父子組件交互的惟一方式，想要修改子組件，須要使用新的pros從新渲染它。凡事有例外，某些狀況下我們須要在典型數據流外，強制修改子代，這個時候可使用 Refs。react

我們能夠在組件添加一個 ref 屬性來使用，該屬性的值是一個回調函數，接收做爲其第一個參數的底層 DOM 元素或組件的掛載實例。webpack

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屬性，它的值是一個函數。該函數接收輸入的實際 DOM 元素，而後將其放在實例上，這樣就能夠在 handleSubmit 函數內部訪問它。git

常常被誤解的只有在類組件中才能使用 refs，可是refs也能夠經過利用 JS 中的閉包與函數組件一塊兒使用。github

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

問題 4：在 React 中如何處理事件

主題: React
難度: ⭐⭐

爲了解決跨瀏覽器的兼容性問題，SyntheticEvent 實例將被傳遞給你的事件處理函數，SyntheticEvent是 React 跨瀏覽器的瀏覽器原生事件包裝器，它還擁有和瀏覽器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。web

比較有趣的是，React 實際上並不將事件附加到子節點自己。React 使用單個事件偵聽器偵聽頂層的全部事件。這對性能有好處，也意味着 React 在更新 DOM 時不須要跟蹤事件監聽器。面試

問題 5：state 和 props 區別是啥？

主題: React
難度: ⭐⭐

props和state是普通的 JS 對象。雖然它們都包含影響渲染輸出的信息，可是它們在組件方面的功能是不一樣的。即算法

  • state 是組件本身管理數據，控制本身的狀態，可變；
  • props 是外部傳入的數據參數，不可變；
  • 沒有state的叫作無狀態組件，有state的叫作有狀態組件；
  • 多用 props，少用 state，也就是多寫無狀態組件。

問題 6：如何建立 refs

主題: React
難度: ⭐⭐

Refs 是使用 React.createRef() 建立的，並經過 ref 屬性附加到 React 元素。在構造組件時，一般將 Refs 分配給實例屬性，以即可以在整個組件中引用它們。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div 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>
    )
  }
}

問題 7：什麼是高階組件？

主題: React
難度: ⭐⭐

高階組件(HOC)是接受一個組件並返回一個新組件的函數。基本上，這是一個模式，是從 React 的組合特性中衍生出來的，稱其爲純組件，由於它們能夠接受任何動態提供的子組件，但不會修改或複製輸入組件中的任何行爲。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 能夠用於如下許多用例

  • 代碼重用、邏輯和引導抽象
  • 渲染劫持
  • state 抽象和操做
  • props 處理

問題 8：在構造函數調用 super 並將 props 做爲參數傳入的做用是啥？

主題: React
難度: ⭐⭐

在調用 super() 方法以前，子類構造函數沒法使用this引用，ES6 子類也是如此。將 props 參數傳遞給 super() 調用的主要緣由是在子構造函數中可以經過this.props來獲取傳入的 props。

傳遞 props

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

沒傳遞 props

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
    // 可是 Props 參數仍然可用
    console.log(props); // Prints { name: 'sudheer',age: 30 }
  }

  render() {
    // 構造函數外部不受影響
    console.log(this.props) // { name: 'sudheer',age: 30 }
  }
}

上面示例揭示了一點。props 的行爲只有在構造函數中是不一樣的，在構造函數以外也是同樣的。

問題 9：什麼是控制組件？

主題: React
難度: ⭐⭐⭐

在 HTML 中，表單元素如 <input>、<textarea>和<select>一般維護本身的狀態，並根據用戶輸入進行更新。當用戶提交表單時，來自上述元素的值將隨表單一塊兒發送。

而 React 的工做方式則不一樣。包含表單的組件將跟蹤其狀態中的輸入值，並在每次回調函數(例如onChange)觸發時從新渲染組件，由於狀態被更新。以這種方式由 React 控制其值的輸入表單元素稱爲受控組件。

問題 10：如何 React.createElement ？

主題: React
難度: ⭐⭐⭐

問題：

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

上述代碼如何使用 React.createElement 來實現:

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

問題 11：講講什麼是 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>
    );
  }
}

問題 12：根據下面定義的代碼，能夠找出存在的兩個問題嗎 ？

主題: React
難度: ⭐⭐⭐

請看下面的代碼：

圖片描述

答案：

1.在構造函數沒有將 props 傳遞給 super，它應該包括如下行

constructor(props) {
  super(props);
  // ...
}

2.事件監聽器(經過addEventListener()分配時)的做用域不正確，由於 ES6 不提供自動綁定。所以，開發人員能夠在構造函數中從新分配clickHandler來包含正確的綁定:

constructor(props) {
  super(props);
  this.clickHandler = this.clickHandler.bind(this);
  // ...
}

問題 13：爲何不直接更新 state 呢 ?

主題: React
難度: ⭐⭐⭐

若是試圖直接更新 state ，則不會從新渲染組件。

// 錯誤
 This.state.message = 'Hello world';

須要使用setState()方法來更新 state。它調度對組件state對象的更新。當state改變時，組件經過從新渲染來響應：

// 正確作法
This.setState({message: ‘Hello World’});

問題 14：React 組件生命週期有哪些不一樣階段？

主題: React
難度: ⭐⭐⭐

在組件生命週期中有四個不一樣的階段：

  1. Initialization：在這個階段，組件準備設置初始化狀態和默認屬性。
  2. Mounting：react 組件已經準備好掛載到瀏覽器 DOM 中。這個階段包括componentWillMount和componentDidMount生命週期方法。
  3. Updating：在這個階段，組件以兩種方式更新，發送新的 props 和 state 狀態。此階段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命週期方法。
  4. Unmounting：在這個階段，組件已經再也不被須要了，它從瀏覽器 DOM 中卸載下來。這個階段包含 componentWillUnmount 生命週期方法。

除以上四個經常使用生命週期外，還有一個錯誤處理的階段：

Error Handling：在這個階段，不論在渲染的過程當中，仍是在生命週期方法中或是在任何子組件的構造函數中發生錯誤，該組件都會被調用。這個階段包含了 componentDidCatch 生命週期方法。

clipboard.png

問題 15：React 的生命週期方法有哪些？

主題: React
難度: ⭐⭐⭐
  • componentWillMount:在渲染以前執行，用於根組件中的 App 級配置。
  • componentDidMount：在第一次渲染以後執行，能夠在這裏作AJAX請求，DOM 的操做或狀態更新以及設置事件監聽器。
  • componentWillReceiveProps：在初始化render的時候不會執行，它會在組件接受到新的狀態(Props)時被觸發，通常用於父組件狀態更新時子組件的從新渲染
  • shouldComponentUpdate：肯定是否更新組件。默認狀況下，它返回true。若是肯定在 state 或 props 更新後組件不須要在從新渲染，則能夠返回false，這是一個提升性能的方法。
  • componentWillUpdate：在shouldComponentUpdate返回 true 肯定要更新組件以前件以前執行。
  • componentDidUpdate：它主要用於更新DOM以響應props或state更改。
  • componentWillUnmount：它用於取消任何的網絡請求，或刪除與組件關聯的全部事件監聽器。

問題 16：這三個點(...)在 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"}};
});

問題 17：使用 React Hooks 好處是啥？

主題: React
難度: ⭐⭐⭐

首先，Hooks 一般支持提取和重用跨多個組件通用的有狀態邏輯，而無需承擔高階組件或渲染 props 的負擔。Hooks 能夠輕鬆地操做函數組件的狀態，而不須要將它們轉換爲類組件。

Hooks 在類中不起做用，經過使用它們，我們能夠徹底避免使用生命週期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount。相反，使用像useEffect這樣的內置鉤子。

問題 18：什麼是 React Hooks？

主題: React
難度: ⭐⭐⭐

Hooks是 React 16.8 中的新添加內容。它們容許在不編寫類的狀況下使用state和其餘 React 特性。使用 Hooks，能夠從組件中提取有狀態邏輯，這樣就能夠獨立地測試和重用它。Hooks 容許我們在不改變組件層次結構的狀況下重用有狀態邏輯，這樣在許多組件之間或與社區共享 Hooks 變得很容易。

問題 19：React 中的 useState() 是什麼？

主題: React
難度: ⭐⭐⭐

下面說明useState(0)的用途：

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

useState 是一個內置的 React Hook。useState(0) 返回一個元組，其中第一個參數count是計數器的當前狀態，setCounter 提供更新計數器狀態的方法。

我們能夠在任何地方使用setCounter方法更新計數狀態-在這種狀況下，我們在setCount函數內部使用它能夠作更多的事情，使用 Hooks，可以使我們的代碼保持更多功能，還能夠避免過多使用基於類的組件。

問題 20：React 中的StrictMode(嚴格模式)是什麼？？

主題: React
難度: ⭐⭐⭐

React 的StrictMode是一種輔助組件，能夠幫助我們編寫更好的 react 組件，可使用<StrictMode />包裝一組組件，而且能夠幫我們如下檢查：

  • 驗證內部組件是否遵循某些推薦作法，若是沒有，會在控制檯給出警告。
  • 驗證是否使用的已經廢棄的方法，若是有，會在控制檯給出警告。
  • 經過識別潛在的風險預防一些反作用。

問題 21：爲何類方法須要綁定到類實例？

主題: React
難度: ⭐⭐⭐

在 JS 中，this 值會根據當前上下文變化。在 React 類組件方法中，開發人員一般但願 this 引用組件的當前實例，所以有必要將這些方法綁定到實例。一般這是在構造函數中完成的:

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>
    )
  }
}

問題 22：什麼是 prop drilling，如何避免？

主題: React
難度: ⭐⭐⭐

在構建 React 應用程序時，在多層嵌套組件來使用另外一個嵌套組件提供的數據。最簡單的方法是將一個 prop 從每一個組件一層層的傳遞下去，從源組件傳遞到深層嵌套組件，這叫作prop drilling。

prop drilling的主要缺點是本來不須要數據的組件變得沒必要要地複雜，而且難以維護。

爲了不prop drilling，一種經常使用的方法是使用React Context。經過定義提供數據的Provider組件，並容許嵌套的組件經過Consumer組件或useContext Hook 使用上下文數據。

問題 23：描述 Flux 與 MVC？

主題: React
難度: ⭐⭐⭐

傳統的 MVC 模式在分離數據(Model)、UI(View和邏輯(Controller)方面工做得很好，可是 MVC 架構常常遇到兩個主要問題:

數據流不夠清晰:跨視圖發生的級聯更新經常會致使混亂的事件網絡，難於調試。

缺少數據完整性:模型數據能夠在任何地方發生突變，從而在整個UI中產生不可預測的結果。

使用 Flux 模式的複雜用戶界面再也不遭受級聯更新，任何給定的React 組件都可以根據 store 提供的數據重建其狀態。Flux 模式還經過限制對共享數據的直接訪問來增強數據完整性。

問題 24：受控組件和非受控組件區別是啥？

主題: React
難度: ⭐⭐⭐
  • 受控組件是 React 控制中的組件，而且是表單數據真實的惟一來源。
  • 非受控組件是由 DOM 處理表單數據的地方，而不是在 React 組件中。

儘管非受控組件一般更易於實現，由於只需使用refs便可從 DOM 中獲取值，但一般建議優先選擇受控制的組件，而不是非受控制的組件。

這樣作的主要緣由是受控組件支持即時字段驗證，容許有條件地禁用/啓用按鈕，強制輸入格式。

問題 25：這段代碼有什麼問題嗎？

主題: React
難度: ⭐⭐⭐⭐

這段代碼有什麼問題:

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})

答案：

沒有什麼問題。這種方式不多被使用，我們能夠將一個函數傳遞給setState，該函數接收上一個 state 的值和當前的props，並返回一個新的狀態，若是我們須要根據之前的狀態從新設置狀態，推薦使用這種方式。

問題 26：什麼是 React Context?

主題: React
難度: ⭐⭐⭐⭐

Context 經過組件樹提供了一個傳遞數據的方法，從而避免了在每個層級手動的傳遞 props 屬性。

問題 27：什麼是 React Fiber?

主題: React
難度: ⭐⭐⭐⭐

Fiber 是 React 16 中新的協調引擎或從新實現核心算法。它的主要目標是支持虛擬DOM的增量渲染。React Fiber 的目標是提升其在動畫、佈局、手勢、暫停、停止或重用等方面的適用性，併爲不一樣類型的更新分配優先級，以及新的併發原語。

React Fiber 的目標是加強其在動畫、佈局和手勢等領域的適用性。它的主要特性是增量渲染:可以將渲染工做分割成塊，並將其分散到多個幀中。

問題 28：如何在 ReactJS 的 Props上應用驗證？

主題: React
難度: ⭐⭐⭐⭐

當應用程序在開發模式下運行時，React 將自動檢查我們在組件上設置的全部 props，以確保它們具備正確的數據類型。對於不正確的類型，開發模式下會在控制檯中生成警告消息，而在生產模式中因爲性能影響而禁用它。強制的 props 用 isRequired定義的。

下面是一組預約義的 prop 類型:

  • React.PropTypes.string
  • React.PropTypes.number
  • React.PropTypes.func
  • React.PropTypes.node
  • React.PropTypes.bool

例如，我們爲用戶組件定義了以下的propTypes

import PropTypes from 'prop-types';

class User extends React.Component {
  render() {
    return (
      <h1>Welcome, {this.props.name}</h1>
      <h2>Age, {this.props.age}
    );
  }
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

問題 29：在 React 中使用構造函數和 getInitialState 有什麼區別？

主題: React
難度: ⭐⭐⭐⭐

構造函數和getInitialState之間的區別就是ES6和ES5自己的區別。在使用ES6類時，應該在構造函數中初始化state，並在使用React.createClass時定義getInitialState方法。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

等價於：

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

問題 30：如何有條件地向 React 組件添加屬性？

主題: React
難度: ⭐⭐⭐⭐

對於某些屬性，React 很是聰明，若是傳遞給它的值是虛值，能夠省略該屬性。例如：

var InputComponent = React.createClass({
    render: function() {
      var required = true;
      var disabled = false;

      return (
        <input type="text" disabled={disabled} required={required} />
      );
    }
});

渲染結果：

<input type="text" required>

另外一種可能的方法是：

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

問題 31：Hooks會取代 render props 和高階組件嗎？

主題: React
難度: ⭐⭐⭐⭐

一般，render props和高階組件僅渲染一個子組件。React團隊認爲，Hooks 是服務此用例的更簡單方法。

這兩種模式仍然有一席之地(例如，一個虛擬的 scroller 組件可能有一個 renderItem prop，或者一個可視化的容器組件可能有它本身的 DOM 結構)。但在大多數狀況下，Hooks 就足夠了，能夠幫助減小樹中的嵌套。

問題 32：如何避免組件的從新渲染？

主題: React
難度: ⭐⭐⭐⭐

React 中最多見的問題之一是組件沒必要要地從新渲染。React 提供了兩個方法，在這些狀況下很是有用：

  • React.memo():這能夠防止沒必要要地從新渲染函數組件
  • PureComponent:這能夠防止沒必要要地從新渲染類組件

這兩種方法都依賴於對傳遞給組件的props的淺比較，若是 props 沒有改變，那麼組件將不會從新渲染。雖然這兩種工具都很是有用，可是淺比較會帶來額外的性能損失，所以若是使用不當，這兩種方法都會對性能產生負面影響。

經過使用 React Profiler，能夠在使用這些方法先後對性能進行測量，從而確保經過進行給定的更改來實際改進性能。

問題 33：什麼是純函數？

主題: React
難度: ⭐⭐⭐⭐⭐

純函數是不依賴而且不會在其做用域以外修改變量狀態的函數。本質上，純函數始終在給定相同參數的狀況下返回相同結果。

問題 34：當調用setState時，React render 是如何工做的？

主題: React
難度: ⭐⭐⭐⭐⭐

我們能夠將"render"分爲兩個步驟：

  1. 虛擬 DOM 渲染:當render方法被調用時，它返回一個新的組件的虛擬 DOM 結構。當調用setState()時，render會被再次調用，由於默認狀況下shouldComponentUpdate老是返回true，因此默認狀況下 React 是沒有優化的。
  2. 原生 DOM 渲染:React 只會在虛擬DOM中修改真實DOM節點，並且修改的次數很是少——這是很棒的React特性，它優化了真實DOM的變化，使React變得更快。

問題 35：如何避免在React從新綁定實例？

主題: React
難度: ⭐⭐⭐⭐⭐

有幾種經常使用方法能夠避免在 React 中綁定方法：

1.將事件處理程序定義爲內聯箭頭函數

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

  render() {
    return (
      <button onClick={() => {
        this.setState({ isFormSubmitted: true });
      }}>Submit</button>
    )
  }
}

2.使用箭頭函數來定義方法：

class SubmitButton extends React.Component {
  state = {
    isFormSubmitted: false
  }

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

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

3.使用帶有 Hooks 的函數組件

const SubmitButton = () => {
  const [isFormSubmitted, setIsFormSubmitted] = useState(false);

  return (
    <button onClick={() => {
        setIsFormSubmitted(true);
    }}>Submit</button>
  )
};

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://www.gangboard.com/blo...

交流（歡迎加入羣，羣工做日都會發紅包，互動討論技術）

阿里雲最近在作活動，低至2折，有興趣能夠看看：https://promotion.aliyun.com/...

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq449245884/xiaozhi

由於篇幅的限制，今天的分享只到這裏。若是你們想了解更多的內容的話，能夠去掃一掃每篇文章最下面的二維碼，而後關注我們的微信公衆號，瞭解更多的資訊和有價值的內容。

clipboard.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程