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

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 的這種方式來控制,
這樣的元素就被稱爲"受控元素"複製代碼
相關文章
相關標籤/搜索