JSX
JSX 是一個(gè)表達(dá)式耘擂，JSX的值是一個(gè)JS對象胆剧，因此可以再if for代碼塊中使用JSX，也可以將JSX賦給變量或把JSX當(dāng)作參數(shù)傳入醉冤，以及從函數(shù)中返回JSX
JSX 最終會(huì)被編譯為 React.createElement() 函數(shù)調(diào)用秩霍，返回稱為 “React 元素” 的普通 JavaScript 對象
元素渲染
React元素是開銷極小的普通對象，React DOM 會(huì)負(fù)責(zé)更新DOM來與React元素保持一致
更新已渲染的元素：
React元素是不可變對象蚁阳，更新UI的唯一方式是創(chuàng)建一個(gè)全新的元素铃绒，重新ReactDOM.render()
React 只更新它需要更新的部分
React DOM 會(huì)將元素和它的子元素與它們之前的狀態(tài)進(jìn)行比較，并只會(huì)進(jìn)行必要的更新來使 DOM 達(dá)到預(yù)期的狀態(tài)螺捐。
組件 & Props
定義組件兩種方式：
通過JS函數(shù)：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
通過ES6 的 class：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
如何選擇：如果你想寫的組件只包含一個(gè) render 方法颠悬，并且不包含 state，那么使用函數(shù)組件就會(huì)更簡單定血。
注意： 組件名稱必須以大寫字母開頭赔癌。
React 會(huì)將以小寫字母開頭的組件視為原生 DOM 標(biāo)簽
渲染組件：
const element = <Welcome name="Sara" />;
關(guān)于提取組件：
何時(shí)需要將組件拆分為更下的組件？
如果 UI 中有一部分被多次使用（Button澜沟，Panel灾票，Avatar），或者組件本身就足夠復(fù)雜（App茫虽，F(xiàn)eedStory刊苍，Comment）既们，那么它就是一個(gè)可復(fù)用組件的候選項(xiàng)。
Props 的只讀性：
首先了解下純函數(shù)的定義：即不會(huì)更改入?yún)⒌暮瘮?shù)班缰。
React 組件都必須像純函數(shù)一樣保護(hù)它們的 props 不被更改
State & 生命周期
State與生命周期的使用需要在class組件中贤壁。
State 與 props 類似悼枢，但是 state 是私有的埠忘，并且完全受控于當(dāng)前組件。
使用this.setState() 來更新組件 state馒索， 這時(shí)React會(huì)重新調(diào)用render()
生命周期：
componentDidMount() 在組件已經(jīng)被渲染到 DOM 中后運(yùn)行
componentWillUnmount() 組件被刪除前
注意的幾個(gè)點(diǎn)：
構(gòu)造函數(shù)是唯一可以給 this.state 賦值的地方
State 的更新可能是異步的
出于性能考慮莹妒，React 可能會(huì)把多個(gè) setState() 調(diào)用合并成一個(gè)調(diào)用。
因?yàn)?this.props 和 this.state 可能會(huì)異步更新绰上，所以你不要依賴他們的值來更新下一個(gè)狀態(tài)旨怠。
事件處理
React 中你不能通過返回 false 的方式阻止默認(rèn)行為，必須顯式的使用 preventDefault蜈块。
e 是一個(gè)合成事件鉴腻。React 根據(jù) W3C 規(guī)范來定義這些合成事件，所以你不需要擔(dān)心跨瀏覽器的兼容性問題
表單
React 中百揭，HTML 表單元素的工作方式和其他的 DOM 元素有些不同爽哎，表單元素通常會(huì)保持一些內(nèi)部的 state。
受控組件(類似vue中使用:value或v-model綁定數(shù)據(jù))：
- React 的 state 成為“唯一數(shù)據(jù)源”器一。
- 渲染表單的 React 組件控制著用戶輸入過程中表單發(fā)生的操作课锌。
文件input標(biāo)簽 <input type="file" />是非受控組件，因?yàn)樗膙alue只讀祈秕。
狀態(tài)提升
多個(gè)組件中需要共享的 state 向上移動(dòng)到它們的最近共同父組件中渺贤，便可實(shí)現(xiàn)共享 state。這就是所謂的“狀態(tài)提升”请毛。
即通過自上而下的數(shù)據(jù)流志鞍，將state放入父組件通過props傳入子組件。
狀態(tài)提升 vs 雙向綁定
提升 state 方式比雙向綁定方式需要編寫更多的“樣板”代碼方仿，但帶來的好處是述雾，排查和隔離 bug 所需的工作量將會(huì)變少。由于“存在”于組件中的任何 state兼丰，僅有組件自己能夠修改它玻孟，因此 bug 的排查范圍被大大縮減了。
組合 vs 繼承
父組件中的所有內(nèi)容內(nèi)容都會(huì)作為名為children的prop傳遞給子組件
React vs Vue
Vue: 使用slot鳍征。
React: 沒有slot槽的概念黍翎，因?yàn)镽eact 元素本質(zhì)就是對象，所以一切都可通過props傳入子組件艳丛。
React 哲學(xué)
React 最棒的部分之一是引導(dǎo)我們思考如何構(gòu)建一個(gè)應(yīng)用匣掸。
用React 哲學(xué)實(shí)現(xiàn)一個(gè)可搜索數(shù)據(jù)表格
第一步：劃分組件層級
根據(jù)單一功能原則劃分組價(jià)你的范圍趟紊，一個(gè)組件原則上只負(fù)責(zé)一個(gè)功能。
第二步：創(chuàng)建一個(gè)靜態(tài)版本
核心思想是渲染UI和添加交互這兩個(gè)過程應(yīng)該分開碰酝。因?yàn)榫帉憫?yīng)用的靜態(tài)版本時(shí)往往需要編寫大量代碼霎匈，而不需要考慮太多交互細(xì)節(jié)；添加交互功能時(shí)則要考慮大量細(xì)節(jié)送爸，不需要寫大量代碼铛嘱。所以這兩個(gè)過程分開更為合適。
構(gòu)建應(yīng)用的靜態(tài)版本時(shí)袭厂，使用props傳數(shù)據(jù)（即使需要使用state墨吓，這一步也不應(yīng)該使用state，而是把state替換props留到添加交互這一步驟中實(shí)現(xiàn)）
構(gòu)建順序：
你可以自上而下或者自下而上構(gòu)建應(yīng)用纹磺。
當(dāng)你的應(yīng)用比較簡單時(shí)帖烘，使用自上而下的方式更方便；對于較為大型的項(xiàng)目來說橄杨，自下而上地構(gòu)建秘症，并同時(shí)為低層組件編寫測試是更加簡單的方式。
第三步：確定UI state 的最惺浇谩（且完整）表示
即找到應(yīng)用所需的最少數(shù)量state的表示方式乡摹，其余數(shù)據(jù)均可由它們計(jì)算產(chǎn)生。遵循DRY(Don't Repeat Yourself)原則衷佃。
通過問自己以下三個(gè)問題趟卸，你可以逐個(gè)檢查相應(yīng)數(shù)據(jù)是否屬于 state：
- 該數(shù)據(jù)是否是由父組件通過 props 傳遞而來的？如果是氏义，那它應(yīng)該不是 state锄列。
- 該數(shù)據(jù)是否隨時(shí)間的推移而保持不變？如果是惯悠，那它應(yīng)該也不是 state邻邮。
- 你能否根據(jù)其他 state 或 props 計(jì)算出該數(shù)據(jù)的值？如果是克婶，那它也不是 state筒严。
第四步：確定 state 放置的位置
你可以嘗試通過以下步驟來判斷
對于應(yīng)用中的每一個(gè) state：
- 找到根據(jù)這個(gè) state 進(jìn)行渲染的所有組件。
- 找到他們的共同所有者（common owner）組件（在組件層級上高于所有需要該 state 的組件）情萤。
- 該共同所有者組件或者比它層級更高的組件應(yīng)該擁有該 state鸭蛙。
- 如果你找不到一個(gè)合適的位置來存放該 state，就可以直接創(chuàng)建一個(gè)新的組件來存放該 state筋岛，并將這一新組件置于高于共同所有者組件層級的位置娶视。
第五步：添加反向數(shù)據(jù)流
React 通過一種比傳統(tǒng)的雙向綁定略微繁瑣的方法來實(shí)現(xiàn)反向數(shù)據(jù)傳遞。盡管如此，但這種需要顯式聲明的方法更有助于人們理解程序的運(yùn)作方式肪获。
