第三天 主要回顧了一下 React 文檔，有了新的體會
每次更新發(fā)生時都會調(diào)用 render 方法，但只要我們將 <Clock /> 渲染到同一個 DOM 節(jié)點中，就只會使用 Clock 類的單例。 這讓我們可以使用額外功能，例如本地狀態(tài)(state) 和 生命周期鉤子。
state 和 props 類似，但是它是私有的，并且由組件本身完全控制。
用類定義的組件有一些額外的特性。 這個”類專有的特性”， 指的就是局部狀態(tài)。
類組件應(yīng)始終使用 props 調(diào)用基礎(chǔ)構(gòu)造函數(shù)。
當(dāng)組件輸出被插入到 DOM 中時，React 調(diào)用 componentDidMount() 生命周期鉤子
通過 setState(), React 得知了組件 state(狀態(tài))的變化, 隨即再次調(diào)用 render() 方法，獲取了當(dāng)前應(yīng)該顯示的內(nèi)容。React 于是據(jù)此對 DOM 進行更新。React 為了優(yōu)化性能，有可能會將多個 setState() 調(diào)用合并為一次更新。因為 this.props 和 this.state 可能是異步更新的，你不能依賴他們的值計算下一個state(狀態(tài))。要解決這個問題，應(yīng)該使用第 2 種 setState() 的格式，它接收一個函數(shù)，而不是一個對象。該函數(shù)接收前一個狀態(tài)值作為第 1 個參數(shù)， 并將更新后的值作為第 2 個參數(shù):
// 正確
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
組件(Components) 讓你可以將用戶界面分成獨立的，可復(fù)用的小部件，并可以對每個部件進行單獨的設(shè)計。從定義上來說， 組件就像JavaScript的函數(shù)。組件可以接收任意輸入(稱為”props”)， 并返回 React 元素，用以描述屏幕顯示內(nèi)容。
DOM 標簽的 React 元素 const element = <div />; 元素也可以代表用戶定義的組件：
const element = <Welcome name="Sara" />;
當(dāng) React 遇到一個代表用戶定義組件的元素時，它將 JSX 屬性以一個單獨對象的形式傳遞給相應(yīng)的組件。 我們將其稱為 “props” 對象。
組件名稱總是以大寫字母開始。<div /> 代表一個 DOM 標簽，而 <Welcome /> 則代表一個組件，并且需要在作用域中有一個 Welcome 組件。
提取組件可能看起來是一個繁瑣的工作，但是在大型的 Apps 中可以回報給我們的是大量的可復(fù)用組件。一個好的經(jīng)驗準則是如果你 UI 的一部分需要用多次 (Button，Panel，Avatar)，或者本身足夠復(fù)雜(App，F(xiàn)eedStory，Comment)，最好的做法是使其成為可復(fù)用組件。
“純函數(shù)” ，它們不會試圖改變它們的輸入，并且對于同樣的輸入,始終可以得到相同的結(jié)果。雖然 React 很靈活，但是它有一條嚴格的規(guī)則：所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props 。state 允許 React 組件在不違反上述規(guī)則的情況下, 根據(jù)用戶操作, 網(wǎng)絡(luò)響應(yīng), 或者其他隨便什么東西, 來動態(tài)地改變其輸出。
元素(Elements) 是 React 應(yīng)用中最小的構(gòu)建塊(building blocks) 。一個元素用于描述你在將在屏幕上看到的內(nèi)容：const element = <h1>Hello, world</h1>;
不同于瀏覽器的 DOM 元素， React 元素是普通的對象，非常容易創(chuàng)建。React DOM 會負責(zé)更新 DOM ，以匹配React元素（愚人碼頭注：DOM元素與React元素保持一致）。
有人可能會將元素與更廣為人知的 “組件(Components)” 概念相混淆，元素是構(gòu)成組件的”材料”。
單純用 React 構(gòu)建的應(yīng)用程序通常只有一個單獨的 根 DOM 節(jié)點。但如果你要把 React 整合進現(xiàn)有的 app 中 ，那你可能會有多個相互獨立的 root DOM節(jié)點。
要渲染一個 React 元素到一個 root DOM 節(jié)點，把它們傳遞給 ReactDOM.render() 方法：
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
React 元素是不可突變的. 一旦你創(chuàng)建了一個元素, 就不能再修改其子元素或任何屬性。一個元素就像電影里的一幀: 它表示在某一特定時間點的 UI 。就我們所知, 更新 UI 的唯一方法是創(chuàng)建一個新的元素, 并將其傳入
ReactDOM.render()方法.
React 只更新必需要更新的部分。React DOM 會將元素及其子元素與之前版本逐一對比, 并只對有必要更新的 DOM 進行更新, 以達到 DOM 所需的狀態(tài)。
