React必知必會的35個面試題-js教程-PHP中文網

React必知必會的35個面試題

青灯夜游

發布： 2020-09-02 15:33:56

轉載

21244 人瀏覽過

React必知必會的35個面試題

【相關專題推薦：react面試題（2020）】

問題1：什麼是虛擬DOM？

主題: React
難度: ⭐

#虛擬 DOM (VDOM)是真實 DOM 在記憶體中的表示。 UI 的表示形式保存在記憶體中，並與實際的 DOM 同步。這是一個發生在渲染函數被呼叫和元素在螢幕上顯示之間的步驟，整個過程被稱為調和。

問題2：類別元件和函數元件之間的差異是啥？

主題: React
難度: ⭐⭐

#類別元件可以使用其他特性，如狀態state#和生命週期鉤子。
當元件只是接收 props 渲染到頁面時，就是無狀態元件，就屬於函數元件，也稱為啞元件或展示元件。

函數元件和類別元件當然是有差別的，而且函數元件的效能比類別元件的效能要高，因為類別元件使用的時候要實例化，而函數元件直接執行函數取返回結果即可。為了提高性能，盡量使用函數組件。

##有

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

主題: React
難度: ⭐⭐

#Refs 提供了一個存取在render方法中建立的DOM節點或React 元素的方法。在典型的資料流中，props 是父子元件互動的唯一方式，想要修改子元件，需要使用新的pros重新渲染它。凡事有例外，某些情況下咱們需要在典型資料流外，強制修改子代，這個時候可以使用 Refs。

咱們可以在元件中加入一個 ref 屬性來使用，該屬性的值是一個回呼函數，接收作為其第一個參數的底層 DOM 元素或元件的掛載實例。

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

登入後複製

請注意，input 元素有一個ref屬性，它的值是一個函數。此函數接收輸入的實際 DOM 元素，然後將其放在實例上，這樣就可以在 handleSubmit 函數內部存取它。

經常被誤解的只有在類別元件中才能使用 refs，但是refs也可以透過利用 JS 中的閉包與函數元件一起使用。

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

登入後複製

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

#主題: React
難度: ⭐⭐

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

比較有趣的是，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 <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=&#39;text&#39;
          ref={(input) => this.input = input} /> // Access DOM input in handle submit
        <button type=&#39;submit&#39;>Submit</button>
      </form>
    )
  }
}

登入後複製

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

主題: React

難度: ⭐⭐

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

const EnhancedComponent = higherOrderComponent(WrappedComponent);

登入後複製

HOC 可以用於以下許多用例

問題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: &#39;sudheer&#39;,age: 30 }
  }
}

登入後複製

沒傳遞 props

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
    // 但是 Props 参数仍然可用
    console.log(props); // Prints { name: &#39;sudheer&#39;,age: 30 }
  }

  render() {
    // 构造函数外部不受影响
    console.log(this.props) // { name: &#39;sudheer&#39;,age: 30 }
  }
}

登入後複製

上面範例揭示了一點。

props 的行為只有在建構子中是不同的，在建構子之外也是一樣的。