資訊專欄INFORMATION COLUMN
摘要：但在中會有些不同，包含表單元素的組件將會在中追蹤輸入的值，并且每次調用回調函數時，如會更新，重新渲染組件。在構造函數中調用的目的是什么在被調用之前，子類是不能使用的，在中，子類必須在中調用。將使用單個事件監聽器監聽頂層的所有事件。
已經開源
地址：https://github.com/nanhupatar...
關注我們團隊：
Keys 是 React 用于追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識。
render () {
return (
在開發過程中，我們需要保證某個元素的 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 (
)
}
}
上述代碼中的 input 域包含了一個 ref 屬性，該屬性聲明的回調函數會接收 input 對應的 DOM 元素，我們將其綁定到 this 指針以便在其他的類函數中使用。另外值得一提的是，refs 并不是類組件的專屬，函數式組件同樣能夠利用閉包暫存其值：
function CustomForm ({handleSubmit}) {
let inputElement
return (
)
}
如果你創建了類似于下面的 Twitter 元素，那么它相關的類定義是啥樣子的？
{(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
}
如果你還不熟悉回調渲染模式（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，我們可以輕易地修改下回調函數即可：
展示組件(Presentational component)和容器組件(Container component)之間有何不同{(user) => user === null ? : }
展示組件關心組件看起來是什么。展示專門通過 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 中，類似 ,