撩課-Web大前端每天5道面試題-Day35

撩課學院發表於2019-01-15
Web前端面試題

1.React 中 refs 的作用是什麼？

Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個元件例項的控制程式碼。
我們可以為元素新增 ref 屬性然後在回撥函式中接受該元素在 DOM 樹中的控制程式碼，
該值會作為回撥函式的第一個引數返回：

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

 

2.展示元件(Presentational component)和容器元件(Container component)之間有何不同?

展示元件關心元件看起來是什麼。
展示專門通過 props 接受資料和回撥，
並且幾乎不會有自身的狀態，
但當展示元件擁有自身的狀態時，
通常也只關心 UI 狀態而不是資料的狀態。
容器元件則更關心元件是如何運作的。
容器元件會為展示元件或者其它容器元件提供資料和行為(behavior)，
它們會呼叫 Flux actions，
並將其作為回撥提供給展示元件。
容器元件經常是有狀態的，
因為它們是(其它元件的)資料來源。

 

3.類元件(Class component)和函式式元件(Functional component)之間有何不同?

類元件不僅允許你使用更多額外的功能，
如元件自身的狀態和生命週期鉤子，
也能使元件直接訪問 store 並維持狀態
當元件僅是接收 props，
並將元件自身渲染到頁面時，
該元件就是一個 `無狀態元件(stateless component)`，
可以使用一個純函式來建立這樣的元件。
這種元件也被稱為啞元件(dumb components)或展示元件

 

4.(元件的)狀態(state)和屬性(props)之間有何不同?

State 是一種資料結構，
用於元件掛載時所需資料的預設值。
State 可能會隨著時間的推移而發生突變，
但多數時候是作為使用者事件行為的結果。
Props(properties 的簡寫)則是元件的配置。
props 由父元件傳遞給子元件，
並且就子元件而言，
props 是不可變的(immutable)。
元件不能改變自身的 props，
但是可以把其子元件的 props 放在一起(統一管理)。
Props 也不僅僅是資料--回撥函式也可以通過 props 傳遞。

 

5.何為受控元件(controlled component)?

在 HTML 中，類似 <input>, 
<textarea> 和 <select> 這樣的表單元素會維護自身的狀態，
並基於使用者的輸入來更新。
當使用者提交表單時，
前面提到的元素的值將隨表單一起被髮送。
但在 React 中會有些不同，
包含表單元素的元件將會在 state 中追蹤輸入的值，
並且每次呼叫回撥函式時，
如 onChange 會更新 state，重新渲染元件。
一個輸入表單元素，
它的值通過 React 的這種方式來控制，
這樣的元素就被稱為"受控元素"。

 

 

相關文章