什么時候使用功能組件( Functional? Component )，使用類組件( Class? Component )？
如果您的組件具有狀態( state )或生命周期方法，請使用 Class 組件。否則，使用功能組件
在哪個生命周期事件中發出 AJAX 請求？
AJAX 請求應該在componentDidMount生命周期事件中。 有幾個原因:
Fiber，是下一次實施React的和解算法，將有能力根據需要啟動和停止渲染，以獲得性能優勢。其中一個取舍之一是componentWillMount，而在其他的生命周期事件中出發 AJAX 請求，將是具有 “非確定性的”。 這意味著 React 可以在需要時感覺到不同的時間開始調用 componentWillMount。這顯然是AJAX請求的不好的方式。
-您不能保證在組件掛載之前，AJAX請求將無法 resolve。如果這樣做，那意味著你會嘗試在一個未掛載的組件上設置 StState，這不僅不會起作用，反而會對你大喊大叫。 在componentDidMount中執行 AJAX 將保證至少有一個要更新的組件。
shouldComponentUpdate 的作用？
在生命周期方法 shouldComponentUpdate 中，允許我們選擇退出某些組件（和他們的子組件）的 reconciliation 過程
“和解（ reconciliation ）的最終目標是以最有效的方式，根據新的狀態更新用戶界面”。如果我們知道用戶界面（UI）的某一部分不會改變，那么沒有理由讓 React 再去弄清楚它是否應該渲染。通過從 shouldComponentUpdate 返回 false，React 將假定當前組件及其所有子組件將保持與當前組件相同
shouldComponentUpdate 用來判斷是否需要調用render方法重新描繪dom。因為dom的描繪非常消耗性能，如果在這個方法中能夠寫出更優化的dom diff算法，就可以極大的提高性能。
組件的生命周期為：
初始化：
????getDefaultProps: 獲取實例的默認屬性
????getInitialState: 獲取每個實例的初始化狀態
掛載階段：
????constructor()??
????componentWillMount()?組件即將被裝載、渲染到頁面上
????render()??組件生成虛擬的DOM節點
????componentDidMount()??組件真正在被裝載之后
更新階段為：
????componentWillReceiveProps()? ??組件將要接收到屬性的時候調用
????shouldComponentUpdate()? ?組件接受到新屬性或者新狀態的時候（可以返回false，接收數據后不更新，阻止render調用，后面的函數不會被繼續執行）
????componentWillUpdate()? ?組件即將更新不能修改屬性和狀態
????render()? ? ?組件重新描繪
????componentDidUpdate? ?組件已經更新
銷毀階段：
? ??componentWillUnmount? ?組件即將銷毀
受控組件( controlled component )與不受控制的組件( uncontrolled component )有什么區別
受控組件是React控制的組件，也是表單數據的唯一真理來源
不受控制( uncontrolled component )的組件是您的表單數據由 DOM 處理，而不是您的 React 組件
React 中的keys是什么，為什么它們很重要？
keys是什么幫助 React 跟蹤哪些項目已更改、添加或從列表中刪除
什么是 React 的 refs
refs就像是一個逃生艙口，允許直接訪問DOM元素或組件實例
向組件添加一個?ref?屬性，該屬性的值是一個回調函數，它將接收底層的 DOM 元素或組件的已掛接實例，作為其第一個參數
在 React 當中 Element 和 Component 有何區別？
簡單地說，一個React element描述了你想在屏幕上看到什么。換個說法就是，一個React element是一些 UI 的對象表示
一個React Component是一個函數或一個類，它可以接受輸入并返回一個React elementt（通常是通過 JSX ，它被轉化成一個 createElement 調用）
當調用setState的時候，發生了什么？
當調用setState時，React會做的第一件事情是將傳遞給setState的對象合并到組件的當前狀態。這將啟動一個稱為和解（reconciliation）的過程。和解（reconciliation）的最終目標是以最有效的方式，根據這個新的狀態來更新UI。 為此，React將構建一個新的React元素樹（您可以將其視為 UI 的對象表示）。
一旦有了這個樹，為了弄清 UI 如何響應新的狀態而改變，React 會將這個新樹與上一個元素樹相比較（diff）。
通過這樣做， React 將會知道發生的確切變化，并且通過了解發生什么變化，只需在絕對必要的情況下進行更新即可最小化 UI 的占用空間。
React 基礎
一、環境搭建 創建項目
npx create-react-app my-app? #創建一個react項目
cd my-app
npm start
二、jsx 語法
????JSX 防注入攻擊
三、面向數據編程
?React 的基本原理：組件（components），屬性（props）和狀態（state）
1.?React是一個聲明式的，高效的，并且靈活的用于構建用戶界面的 JavaScript 庫。它允許您使用”components(組件)“（小巧而獨立的代碼片段）組合出各種復雜的UI。
2.?組件接收參數，稱為?props(屬性)，通過 Props 傳遞數據，并通過?render?方法返回一個顯示的視圖層次結構，render?方法返回您要渲染的內容描述，然后 React 接受該描述并將其渲染到屏幕上。
3.?React 開發人員使用一種名為 JSX (JavaScript XML)的特殊語法，可以更容易地編寫這些結構
4.?React 組件可以通過在構造函數中設置?this.state?來擁有 state(狀態) ，構造函數應該被認為是組件的私有。
5.?在?JavaScript classes(類)中， 在定義子類的構造函數時，你需要始終調用?super?。所有具有constructor?的 React 組件類都應該以?super(props)?調用啟動它
6.?要從多個子級收集數據 或 使兩個子組件之間相互通信，您需要在其父組件中聲明共享 state(狀態) 。父組件可以使用props(屬性) 將 state(狀態) 傳遞回子節點；這可以使子組件彼此同步并與父組件保持同步。
7.?數據自頂向下流動
????父組件通過 屬性的形式向子組件傳遞參數 子組件通過props接收父組件傳來的參數
????子組件想要和父組件通信 要調用父組件傳遞過來的方法
四、Component 組件
Mounted：React Components 被render解析生成對應的DOM節點 并被插入瀏覽器的DOM結構的過程
Update：一個mounted的React Components被重新render的過程
Unmounted：一個mounted的React Components對應的DOM節點被從DOM結構中移除的過程
每一個狀態React都封裝了hook（鉤子）函數
生命周期鉤子：
???componentDidMount?：掛載函數
???componentWillUnmount：卸載函數
React 使用Redux數據流
React 是純V層框架 需要數據流進行支撐
主流數據流框架： Flux / reFlux? /? Redux
Redux優勢：簡單 / 單一狀態樹
redux 安裝：
? ? npm install react-redux redux
????資料：? ? https://redux.js.org/
react-redux 項目結構：
? ? -- actions??
? ? -- components?
? ? -- container
? ? -- reducer?
? ? - index.html
? ? - server.js
? ? - webpack
action 、reducer、store介紹：
組件：
使用yeoman 構建項目
npm install -g yo? ? ? #安裝yeoman
yo --version? ?#查看版本
npm install -g generator-react-webpack? #安裝generator
npm ls -g --depth=1 2>/dev/null | grep generator-? ? ? #列出npm安裝的全局generator包
yo react-webpack gallery-by-react? ? ?#新建名叫gallery-by-react 的項目
cd??gallery-by-react??
npm run start? ? ? ?#運行項目
構建工具：grunt 、webpack 、browserify、gulp
