前言
作為一個前端開發有些不好意思，居然還沒有接觸過 React ，就借這段時間積累下 React 相關經驗，為疫情過後能有更多的就業機會。
如果你已經是個經驗豐富的 React Developer 可能這系列文章不太適合你閱讀。
雖然我承認下面大多數內容，基本都可以在官網找到原型。 但我會努力讓你們儘可能不枉此行，如果有不對之處，望各位評論指出。
為了更好的閱讀體驗，你可以在底下的“瞭解更多”查看原文（訪問我的語雀知識庫）。
以下出現的代碼，均可在我的碼雲中找到：https://gitee.com/eminoda/react-learn/branches
組件
在 React 中，組件就是一個 js 函數，通過對 UI 的細緻劃分，可以獨立出可複用的代碼片段。
可以通過最簡單的 js 函數來定義。
也可以通過繼承 React.Component 或 React.PureComponent 來定義 React Component。
當然後者通過類繼承的方式，提供了更多組件特性。
組件分類
函數組件
函數組件就是使用 js 函數，來返回一個 React JSX 元素。
在此函數中接收一個 props 的參數，其是 JSX 上定義的一系列屬性 attribute 。
示例：
頁面展示：
class 組件
相反 class 組件複雜些，除了要繼承 React.Component 類外，還要實現 render 方法：
後面會詳細介紹 class 組件這塊內容。
props 和 state
這兩個是組件內出現率最高的實例屬性，我們所有的邏輯實現基本都是依靠這兩者。
props 示例
肯定已經注意到，無論是函數組件，還是 class 組件，它們內部的入參都是 props ，其就是在 JSX 中定義的屬性內容，最後被解析到 props 裡。
比如：我們定義一個 class 組件 Welcome，JSX 上定義一個屬性 lang="React"
在組件內的 props 值為：
props 的只讀性
props 也有自己的脾氣，不能修改自身的 props 。如果你嘗試那樣，就會出現如下錯誤：
state 示例
組件內的 state 包含了隨時可能發生變化的數據，所以如果有想實時更新的數據，建議用 state 來描述。
比如，我們有個 Clock 組件，內部有個定時器來實時刷新當前時間：
運行後，能看到頁面對應的數據不停的在變化。
頁面效果：
state 最佳實踐
通過 setState 設置 state 對象，設置後，React 並不會立即更新組件，而是將設置推到更新的隊列，在最後一次一起更新。
所以，在 setState 後來讀取 state 對象不是明智之舉。因為存在異不會推遲更新的原因。
通常使用 componentDidUpdate 、setState 的回調函數來取得最新的 state 值。
不要直接修改 state
修改 state ，需要調用 setState api ：
異步更新 state
例如，異步通過 ajax 拉取數據，會導致 state 取值不符合預期。或者重複的 setState 操作。
紅框和綠框的結果不同（綠色符合預期），雖然他們都試圖累加三次 num 。
總結
以上就是一個簡單組件大致基礎的概念，講了實現組件的兩種方式，以及說明內部出現的 props 和 state 有什麼作用。
當然落地到平時寫業務代碼，還涉及如何在組件上定義事件、表單，以及如何顯示條件和列表數據等基本的操作。
為了獨立出更健壯的組件，還要懂得組件生命週期、高階組件、錯誤邊界等概念。
大塊的細節還有很多，之後繼續學習。
閱讀更多 前端雨爸 的文章
