成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

常見react面試題匯總（適合中級(jí)前端）

leone / 1713人閱讀

摘要：但在中會(huì)有些不同，包含表單元素的組件將會(huì)在中追蹤輸入的值，并且每次調(diào)用回調(diào)函數(shù)時(shí)，如會(huì)更新，重新渲染組件。在構(gòu)造函數(shù)中調(diào)用的目的是什么在被調(diào)用之前，子類是不能使用的，在中，子類必須在中調(diào)用。將使用單個(gè)事件監(jiān)聽器監(jiān)聽頂層的所有事件。

已經(jīng)開源

地址：https://github.com/nanhupatar...
關(guān)注我們團(tuán)隊(duì)：

React 中 keys 的作用是什么？

Keys 是 React 用于追蹤哪些列表中元素被修改、被添加或者被移除的輔助標(biāo)識(shí)。

render () {
  return (
    
    
      {this.state.todoItems.map(({item, key}) => {
        return 
  • {item}
    • 
      })}
    

  )
}

在開發(fā)過程中，我們需要保證某個(gè)元素的 key 在其同級(jí)元素中具有唯一性。在 React Diff 算法中 React 會(huì)借助元素的 Key 值來判斷該元素是新近創(chuàng)建的還是被移動(dòng)而來的元素，從而減少不必要的元素重渲染。此外，React 還需要借助 Key 值來判斷元素與本地狀態(tài)的關(guān)聯(lián)關(guān)系，因此我們絕不可忽視轉(zhuǎn)換函數(shù)中 Key 的重要性。

調(diào)用 setState 之后發(fā)生了什么？

在代碼中調(diào)用 setState 函數(shù)之后，React 會(huì)將傳入的參數(shù)對(duì)象與組件當(dāng)前的狀態(tài)合并，然后觸發(fā)所謂的調(diào)和過程（Reconciliation）。經(jīng)過調(diào)和過程，React 會(huì)以相對(duì)高效的方式根據(jù)新的狀態(tài)構(gòu)建 React 元素樹并且著手重新渲染整個(gè) UI 界面。在 React 得到元素樹之后，React 會(huì)自動(dòng)計(jì)算出新的樹與老樹的節(jié)點(diǎn)差異，然后根據(jù)差異對(duì)界面進(jìn)行最小化重渲染。在差異計(jì)算算法中，React 能夠相對(duì)精確地知道哪些位置發(fā)生了改變以及應(yīng)該如何改變，這就保證了按需更新，而不是全部重新渲染。

react 生命周期函數(shù)

初始化階段：

getDefaultProps:獲取實(shí)例的默認(rèn)屬性

getInitialState:獲取每個(gè)實(shí)例的初始化狀態(tài)

componentWillMount：組件即將被裝載、渲染到頁面上

render:組件在這里生成虛擬的 DOM 節(jié)點(diǎn)

componentDidMount:組件真正在被裝載之后

運(yùn)行中狀態(tài)：

componentWillReceiveProps:組件將要接收到屬性的時(shí)候調(diào)用

shouldComponentUpdate:組件接受到新屬性或者新狀態(tài)的時(shí)候（可以返回 false，接收數(shù)據(jù)后不更新，阻止 render 調(diào)用，后面的函數(shù)不會(huì)被繼續(xù)執(zhí)行了）

componentWillUpdate:組件即將更新不能修改屬性和狀態(tài)

render:組件重新描繪

componentDidUpdate:組件已經(jīng)更新

銷毀階段：

componentWillUnmount:組件即將銷毀

shouldComponentUpdate 是做什么的，（react 性能優(yōu)化是哪個(gè)周期函數(shù)？）

shouldComponentUpdate 這個(gè)方法用來判斷是否需要調(diào)用 render 方法重新描繪 dom。因?yàn)?dom 的描繪非常消耗性能，如果我們能在 shouldComponentUpdate 方法中能夠?qū)懗龈鼉?yōu)化的 dom diff 算法，可以極大的提高性能。

參考react 性能優(yōu)化-sf

為什么虛擬 dom 會(huì)提高性能?(必考)

虛擬 dom 相當(dāng)于在 js 和真實(shí) dom 中間加了一個(gè)緩存，利用 dom diff 算法避免了沒有必要的 dom 操作，從而提高性能。

用 JavaScript 對(duì)象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu)；然后用這個(gè)樹構(gòu)建一個(gè)真正的 DOM 樹，插到文檔當(dāng)中當(dāng)狀態(tài)變更的時(shí)候，重新構(gòu)造一棵新的對(duì)象樹。然后用新的樹和舊的樹進(jìn)行比較，記錄兩棵樹差異把 2 所記錄的差異應(yīng)用到步驟 1 所構(gòu)建的真正的 DOM 樹上，視圖就更新了。

參考 如何理解虛擬 DOM?-zhihu

react diff 原理（?？迹髲S必考）

把樹形結(jié)構(gòu)按照層級(jí)分解，只比較同級(jí)元素。

給列表結(jié)構(gòu)的每個(gè)單元添加唯一的 key 屬性，方便比較。

React 只會(huì)匹配相同 class 的 component（這里面的 class 指的是組件的名字）

合并操作，調(diào)用 component 的 setState 方法的時(shí)候, React 將其標(biāo)記為 dirty.到每一個(gè)事件循環(huán)結(jié)束, React 檢查所有標(biāo)記 dirty 的 component 重新繪制.

選擇性子樹渲染。開發(fā)人員可以重寫 shouldComponentUpdate 提高 diff 的性能。

參考：React 的 diff 算法

React 中 refs 的作用是什么？

Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個(gè)組件實(shí)例的句柄。我們可以為元素添加 ref 屬性然后在回調(diào)函數(shù)中接受該元素在 DOM 樹中的句柄，該值會(huì)作為回調(diào)函數(shù)的第一個(gè)參數(shù)返回：

class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      

         this.input = input} />
        
      

    )
  }
}

上述代碼中的 input 域包含了一個(gè) ref 屬性，該屬性聲明的回調(diào)函數(shù)會(huì)接收 input 對(duì)應(yīng)的 DOM 元素，我們將其綁定到 this 指針以便在其他的類函數(shù)中使用。另外值得一提的是，refs 并不是類組件的專屬，函數(shù)式組件同樣能夠利用閉包暫存其值：

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    
 handleSubmit(inputElement.value)}>
       inputElement = input} />
      
    

  )
}
如果你創(chuàng)建了類似于下面的 Twitter 元素，那么它相關(guān)的類定義是啥樣子的？ 

  {(user) => user === null
    ? 
    : }

import React, { Component, PropTypes } from "react"
import fetchUser from "twitter"
// fetchUser take in a username returns a promise
// which will resolve with that username"s data.
class Twitter extends Component {
  // finish this
}

如果你還不熟悉回調(diào)渲染模式（Render Callback Pattern），這個(gè)代碼可能看起來有點(diǎn)怪。這種模式中，組件會(huì)接收某個(gè)函數(shù)作為其子組件，然后在渲染函數(shù)中以 props.children 進(jìn)行調(diào)用：

import React, { Component, PropTypes } from "react"
import fetchUser from "twitter"
class Twitter extends Component {
  state = {
    user: null,
  }
  static propTypes = {
    username: PropTypes.string.isRequired,
  }
  componentDidMount () {
    fetchUser(this.props.username)
      .then((user) => this.setState({user}))
  }
  render () {
    return this.props.children(this.state.user)
  }
}

這種模式的優(yōu)勢在于將父組件與子組件解耦和，父組件可以直接訪問子組件的內(nèi)部狀態(tài)而不需要再通過 Props 傳遞，這樣父組件能夠更為方便地控制子組件展示的 UI 界面。譬如產(chǎn)品經(jīng)理讓我們將原本展示的 Badge 替換為 Profile，我們可以輕易地修改下回調(diào)函數(shù)即可：


  {(user) => user === null
    ? 
    : }
展示組件(Presentational component)和容器組件(Container component)之間有何不同

展示組件關(guān)心組件看起來是什么。展示專門通過 props 接受數(shù)據(jù)和回調(diào)，并且?guī)缀醪粫?huì)有自身的狀態(tài)，但當(dāng)展示組件擁有自身的狀態(tài)時(shí)，通常也只關(guān)心 UI 狀態(tài)而不是數(shù)據(jù)的狀態(tài)。

容器組件則更關(guān)心組件是如何運(yùn)作的。容器組件會(huì)為展示組件或者其它容器組件提供數(shù)據(jù)和行為(behavior)，它們會(huì)調(diào)用 Flux actions，并將其作為回調(diào)提供給展示組件。容器組件經(jīng)常是有狀態(tài)的，因?yàn)樗鼈兪?其它組件的)數(shù)據(jù)源。

類組件(Class component)和函數(shù)式組件(Functional component)之間有何不同

類組件不僅允許你使用更多額外的功能，如組件自身的狀態(tài)和生命周期鉤子，也能使組件直接訪問 store 并維持狀態(tài)

當(dāng)組件僅是接收 props，并將組件自身渲染到頁面時(shí)，該組件就是一個(gè) "無狀態(tài)組件(stateless component)"，可以使用一個(gè)純函數(shù)來創(chuàng)建這樣的組件。這種組件也被稱為啞組件(dumb components)或展示組件

(組件的)狀態(tài)(state)和屬性(props)之間有何不同

State 是一種數(shù)據(jù)結(jié)構(gòu)，用于組件掛載時(shí)所需數(shù)據(jù)的默認(rèn)值。State 可能會(huì)隨著時(shí)間的推移而發(fā)生突變，但多數(shù)時(shí)候是作為用戶事件行為的結(jié)果。

Props(properties 的簡寫)則是組件的配置。props 由父組件傳遞給子組件，并且就子組件而言，props 是不可變的(immutable)。組件不能改變自身的 props，但是可以把其子組件的 props 放在一起(統(tǒng)一管理)。Props 也不僅僅是數(shù)據(jù)--回調(diào)函數(shù)也可以通過 props 傳遞。

何為受控組件(controlled component)

在 HTML 中，類似 ,