標籤:方法 receive idm render 就是 github get 合并 指標
已經開源
地址:https://github.com/nanhupatar...
關注我們團隊:
React 中 keys 的作用是什嗎?
Keys 是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識。
render () { return ( <ul> {this.state.todoItems.map(({item, key}) => { return <li key={key}>{item}</li> })} </ul> )}
在開發過程中,我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 React Diff 演算法中 React 會藉助元素的 Key 值來判斷該元素是新近建立的還是被移動而來的元素,從而減少不必要的元素重渲染。此外,React 還需要藉助 Key 值來判斷元素與本地狀態的關聯關係,因此我們絕不可忽視轉換函式中 Key 的重要性。
調用 setState 之後發生了什嗎?
在代碼中調用 setState 函數之後,React 會將傳入的參數對象與組件當前的狀態合并,然後觸發所謂的調和過程(Reconciliation)。經過調和過程,React 會以相對高效的方式根據新的狀態構建 React 元素樹並且著手重新渲染整個 UI 介面。在 React 得到元素樹之後,React 會自動計算出新的樹與老樹的節點差異,然後根據差異對介面進行最小化重渲染。在差異計算演算法中,React 能夠相對精確地知道哪些位置發生了改變以及應該如何改變,這就保證了按需更新,而不是全部重新渲染。
react 生命週期函數
初始化階段:
- getDefaultProps:擷取執行個體的預設屬性
- getInitialState:擷取每個執行個體的初始化狀態
- componentWillMount:組件即將被裝載、渲染到頁面上
- render:組件在這裡產生虛擬 DOM 節點
- componentDidMount:組件真正在被裝載之後
運行中狀態:
- componentWillReceiveProps:組件將要接收到屬性的時候調用
- shouldComponentUpdate:組件接受到新屬性或者新狀態的時候(可以返回 false,接收資料後不更新,阻止 render 調用,後面的函數不會被繼續執行了)
- componentWillUpdate:組件即將更新不能修改屬性和狀態
- render:組件重新描繪
- componentDidUpdate:組件已經更新
銷毀階段:
- componentWillUnmount:組件即將銷毀
shouldComponentUpdate 是做什麼的,(react 效能最佳化是哪個周期函數?)
shouldComponentUpdate 這個方法用來判斷是否需要調用 render 方法重新描繪 dom。因為 dom 的描繪非常消耗效能,如果我們能在 shouldComponentUpdate 方法中能夠寫出更最佳化的 dom diff 演算法,可以極大的提高效能。
參考react 效能最佳化-sf
為什麼虛擬 dom 會提高效能?(必考)
虛擬 dom 相當於在 js 和真實 dom 中間加了一個緩衝,利用 dom diff 演算法避免了沒有必要的 dom 操作,從而提高效能。
用 JavaScript 對象結構表示 DOM 樹的結構;然後用這個樹構建一個真正的 DOM 樹,插到文檔當中當狀態變更的時候,重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較,記錄兩棵樹差異把 2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上,視圖就更新了。
參考 如何理解虛擬 DOM?-zhihu
react diff 原理(常考,大廠必考)
- 把樹形結構按照層級分解,只比較同級元素。
- 給列表結構的每個單元添加唯一的 key 屬性,方便比較。
- React 只會匹配相同 class 的 component(這裡面的 class 指的是組件的名字)
- 合併作業,調用 component 的 setState 方法的時候, React 將其標記為 dirty.到每一個事件迴圈結束, React 檢查所有標記 dirty 的 component 重新繪製.
- 選擇性子樹渲染。開發人員可以重寫 shouldComponentUpdate 提高 diff 的效能。
參考:React 的 diff 演算法
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> )}
如果你建立了類似於下面的 Twitter 元素,那麼它相關的類定義是啥樣子的?
<Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : <Badge info={user} />}</Twitter>
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}
如果你還不熟悉回調渲染模式(Render Callback Pattern),這個代碼可能看起來有點怪。這種模式中,組件會接收某個函數作為其子組件,然後在渲染函數中以 props.children 進行調用:
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) }}
這種模式的優勢在於將父組件與子組件解耦和,父組件可以直接存取子組件的內部狀態而不需要再通過 Props 傳遞,這樣父組件能夠更為方便地控制子組件展示的 UI 介面。譬如產品經理讓我們將原本展示的 Badge 替換為 Profile,我們可以輕易地修改下回呼函數即可:
<Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : <Profile info={user} />}</Twitter>
展示組件(Presentational component)和容器組件(Container component)之間有何不同
- 展示組件關心組件看起來是什麼。展示專門通過 props 接受資料和回調,並且幾乎不會有自身的狀態,但當展示組件擁有自身的狀態時,通常也只關心 UI 狀態而不是資料的狀態。
- 容器組件則更關心組件是如何運作的。容器組件會為展示組件或者其它容器組件提供資料和行為(behavior),它們會調用 Flux actions,並將其作為回調提供給展示組件。容器組件經常是有狀態的,因為它們是(其它組件的)資料來源。
類組件(Class component)和函數式組件(Functional component)之間有何不同
- 類組件不僅允許你使用更多額外的功能,如組件自身的狀態和生命週期鉤子,也能使組件直接存取 store 並維持狀態
- 當組件僅是接收 props,並將組件自身渲染到頁面時,該組件就是一個 ‘無狀態組件(stateless component)‘,可以使用一個純函數來建立這樣的組件。這種組件也被稱為啞組件(dumb components)或展示組件
(組件的)狀態(state)和屬性(props)之間有何不同
- State 是一種資料結構,用於組件掛載時所需資料的預設值。State 可能會隨著時間的推移而發生突變,但多數時候是作為使用者事件行為的結果。
- Props(properties 的簡寫)則是組件的配置。props 由父組件傳遞給子組件,並且就子組件而言,props 是不可變的(immutable)。組件不能改變自身的 props,但是可以把其子組件的 props 放在一起(統一管理)。Props 也不僅僅是資料--回呼函數也可以通過 props 傳遞。
何為受控組件(controlled component)
在 HTML 中,類似 <input>
, <textarea>
和 <select>
這樣的表單元素會維護自身的狀態,並基於使用者的輸入來更新。當使用者提交表單時,前面提到的元素的值將隨表單一起被發送。但在 React 中會有些不同,包含表單元素的組件將會在 state 中追蹤輸入的值,並且每次調用回呼函數時,如 onChange 會更新 state,重新渲染組件。一個輸入表單元素,它的值通過 React 的這種方式來控制,這樣的元素就被稱為"受控元素"。
何為高階組件(higher order component)
高階組件是一個以組件為參數並返回一個新組件的函數。HOC 運行你重用代碼、邏輯和引導抽象。最常見的可能是 Redux 的 connect 函數。除了簡單分享工具庫和簡單的組合,HOC 最好的方式是共用 React 組件之間的行為。如果你發現你在不同的地方寫了大量代碼來做同一件事時,就應該考慮將代碼重構為可重用的 HOC。
為什麼建議傳遞給 setState 的參數是一個 callback 而不是一個對象
因為 this.props 和 this.state 的更新可能是非同步,不能依賴它們的值去計算下一個 state。
除了在建構函式中綁定 this,還有其它方式嗎
你可以使用屬性初始值設定項(property initializers)來正確綁定回調,create-react-app 也是預設支援的。在回調中你可以使用箭頭函數,但問題是每次組件渲染時都會建立一個新的回調。
(在建構函式中)調用 super(props) 的目的是什麼
在 super() 被調用之前,子類是不能使用 this 的,在 ES2015 中,子類必須在 constructor 中調用 super()。傳遞 props 給 super() 的原因則是便於(在子類中)能在 constructor 訪問 this.props。
應該在 React 組件的何處發起 Ajax 請求
在 React 組件中,應該在 componentDidMount 中發起網路請求。這個方法會在組件第一次“掛載”(被添加到 DOM)時執行,在組件的生命週期中僅會執行一次。更重要的是,你不能保證在組件掛載之前 Ajax 請求已經完成,如果是這樣,也就意味著你將嘗試在一個未掛載的組件上調用 setState,這將不起作用。在 componentDidMount 中發起網路請求將保證這有一個組件可以更新了。
描述事件在 React 中的處理方式。
為瞭解決跨瀏覽器安全色性問題,您的 React 中的事件處理常式將傳遞 SyntheticEvent 的執行個體,它是 React 的瀏覽器本機事件的跨瀏覽器封裝器。
這些 SyntheticEvent 與您習慣的原生事件具有相同的介面,除了它們在所有瀏覽器中都相容。有趣的是,React 實際上並沒有將事件附加到子節點本身。React 將使用單個事件監聽器監聽頂層的所有事件。這對於效能是有好處的,這也意味著在更新 DOM 時,React 不需要擔心跟蹤事件監聽器。
createElement 和 cloneElement 有什麼區別?
React.createElement():JSX 文法就是用 React.createElement()來構建 React 元素的。它接受三個參數,第一個參數可以是一個標籤名。如 div、span,或者 React 組件。第二個參數為傳入的屬性。第三個以及之後的參數,皆作為組件的子組件。
React.createElement( type, [props], [...children])
React.cloneElement()與 React.createElement()相似,不同的是它傳入的第一個參數是一個 React 元素,而不是標籤名或組件。新添加的屬性會併入原有的屬性,傳入到返回的新元素中,而就的子項目獎盃替換。
React.cloneElement( element, [props], [...children])
React 中有三種構建組件的方式
React.createClass()、ES6 class 和無狀態函數。
react 組件的劃分業務組件技術組件?
- 根據組件的職責通常把組件分為 UI 組件和容器組件。
- UI 組件負責 UI 的呈現,容器組件負責管理資料和邏輯。
- 兩者通過 React-Redux 提供 connect 方法聯絡起來。
簡述 flux 思想
Flux 的最大特點,就是資料的"單向流動"。
- 使用者訪問 View
- View 發出使用者的 Action
- Dispatcher 收到 Action,要求 Store 進行相應的更新
- Store 更新後,發出一個"change"事件
- View 收到"change"事件後,更新頁面
React 項目用過什麼腳手架(本題是開放性題目)
creat-react-app Yeoman 等
瞭解 redux 麼,說一下 redux 把
- redux 是一個應用資料流架構,主要是解決了組件間狀態共用的問題,原理是集中式管理,主要有三個核心方法,action,store,reducer,工作流程是 view 調用 store 的 dispatch 接收 action 傳入 store,reducer 進行 state 操作,view 通過 store 提供的 getState 擷取最新的資料,flux 也是用來進行資料操作的,有四個組成部分 action,dispatch,view,store,工作流程是 view 發出一個 action,派發器接收 action,讓 store 進行資料更新,更新完成以後 store 發出 change,view 接受 change 更新視圖。Redux 和 Flux 很像。主要區別在於 Flux 有多個可以改變應用狀態的 store,在 Flux 中 dispatcher 被用來傳遞資料到註冊的回調事件,但是在 redux 中只能定義一個可更新狀態的 store,redux 把 store 和 Dispatcher 合并,結構更加簡單清晰
- 新增 state,對狀態的管理更加明確,通過 redux,流程更加規範了,減少手動編碼量,提高了編碼效率,同時缺點時當資料更新時有時候組件不需要,但是也要重新繪製,有些影響效率。一般情況下,我們在構建多互動,多資料流的複雜項目應用時才會使用它們
redux 有什麼缺點
- 一個組件所需要的資料,必須由父組件傳過來,而不能像 flux 中直接從 store 取。
- 當一個組件相關資料更新時,即使父組件不需要用到這個組件,父組件還是會重新 render,可能會有效率影響,或者需要寫複雜的 shouldComponentUpdate 進行判斷。
原文地址:1190000016885832
常見react面試題匯總