React文檔筆記

注：前半段爲今天學習的Jsx文檔， 後半段就有一些稍雜一些的React官方文檔(核心篇1-8總結)若有興趣能夠看看。

React JSX

jsx是一種javascript的語法擴展，jsx用來聲明React當中的元素。Jsx對象表示:Babel會把Jsx轉譯爲一個React.createElement()函數調用.例:

const element=(
    ①
    <h1 className="getting">Hello.world</h1>
    👇從①到②
    ②
    const element=React.createElement(
        'h1',
        {className='getting'},
        'hello.world'
    )
);
---------------------------------------------------------------------------------------
                                    分界線
---------------------------------------------------------------------------------------
const element=<h1>Hello World!</h1>
這個變量的聲明   
複製代碼

這種語法被稱爲JSX，是Javascript的一種擴展語法。咱們推薦在React中使用JSX去編寫咱們的UI界面。也許你會以爲JSX很像是模板語言，可是它具備JavaScript的所有功能。

React信奉渲染邏輯與UI邏輯是自然耦合的：如何處理事件，狀態如何隨着時間變化以及數據如何顯示在頁面上。React用被稱爲「組件」的鬆散的耦合單元（同時包含標籤代碼與邏輯代碼）來代替手動地將標籤與代碼邏輯分散在不懂的文件裏。咱們將會在接下來的介紹裏介紹組件。 React不強制要求使用JSX，可是大部分開發者在開發時發現將UI標籤放在JavaScript代碼裏對觀察代碼渲染十分有幫助。固然，使用JSX能在開發時向開發者顯示更多游泳的錯誤和警告信息

JSX基本語法

1. 定義標籤哈斯，只容許被一個標籤包裹
2. 標籤必定要閉合
3. 若是使用數據形式，必須對數組中的每個元素都要給一個惟一的key值
4. 元素若是是小寫首字母則是元素，若是是大寫首字母則是組件元素
5. 註釋須要用{}包裹
6. 咱們也可使用命名空間的方式以解決組件相同名稱衝突的問題
7. JSX中，咱們必須使用駝峯的形式來書寫事件的屬性名
8. 屬性值要使用表達式；只要將{}來替換「」
9. 傳入數據的展開性{…props}
10. for屬性改爲htmlFor
11. class屬性改成className

在編譯以後，jsx其實會被轉化爲普通的javascript對象。這也就意味着能夠下if或者for語句裏使用JSX，將它複製被變量當作參數傳入，做爲返回值均可以：

function getGreeting(user){
if(user){
    return  <h1>hello,{formatName(user)}</h1>;
}
return  <h1>hello,Stranger</h1>;
}
複製代碼

JSX屬性

可使用引號來定義以字符串爲值的屬性：const element=<div tabIndex='0'></div>;
也可使用大括號來定義以javascript表達式爲值得屬性：const element=<img src={user.avatarUrl}></img>;
使用了大括號包裹的javascript表達式時就不要再到外面套引號了。JSX會將引號當中的內容識別爲字符串而不是表達式。
複製代碼

JSX嵌套

若是Jsx標籤是閉合式的，那麼你須要在結尾處使用/>,就好像XML/HTML同樣：const element = <img src={user.avatatUrl}/>
複製代碼

JSX標籤一樣能夠相互嵌套：

const element = {
 <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
}
注意：JSX的特性更接近javascript而不是HTML，因此ReactDOM使用camelCase小駝峯命名來定義屬性的名稱，而不是使用HTML的屬性名稱。
複製代碼

記錄：

組件名必須以大寫字母開頭/用戶定義組件必須首字母大寫

當元素類型以小寫字母開頭時，它表示一個內置的組件，如 <div> 或 <span>，將致使字符串 'div' 或 'span' 傳遞給 
React.createElement。 以大寫字母開頭的類型，如 <Foo /> 編譯爲 React.createElement(Foo)，
而且它正對應於你在 JavaScript 文件中定義或導入的組件。
複製代碼

全部React組件都必須像純函數同樣保護Props不被改

「純函數」 不會嘗試修改入參，屢次調用結果仍不變。

※（老版本）React頁面只要有參數值爲「html」，如用戶名爲html則掛頁

元素是構成React的最小磚塊->與瀏覽器Dom不一樣，React元素是建立小開銷的對象,React.Dom負責更新Dom與React元素保持一致