《深刻react技術棧》學習筆記（一）初入React世界

前言

以《深刻學習react技術棧》爲線索，記錄下學習React的重要知識內容。本系列文章沒有涵蓋所有的react知識內容，只是記錄下了學習之路上的重要知識點，一方面是本身的總結，同時拿出來和在學習react的人們一塊分享，共同進步。

正文

一：react簡介

網上能搜出來一大片，想要了解的自行谷歌，咱們仍是直奔學習的主題。

二：JSX語法

JSX基本語法總結：

1.XML基本語法

標籤可任意嵌套

const List =()=>(
<div>
    <Title>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </Title>
</div>
);

注意事項總結：
（1）定義標籤時，只容許被一個標籤包裹
（2）標籤必定要閉合

2.元素類型

兩種不一樣的元素：DOM元素和組件元素
注意事項（在JSX的對應原則）總結：
（1）HTML標籤首字母爲小寫，組件元素首字母爲大寫
（2）JSX在一個在一個組件的子元素位置使用註釋要用{}包裹起來

const App =()=>(
<Nav>
{/*節點註釋*/}
<Person
/*
多行註釋
*/
user={firstName:'hello',lastName:'world'}
>
</Nav>
);

(3)DOCTYPE是沒有閉合的，咱們沒法渲染它。常見的作法是：構造一個保存HTML的變量，將DOCTYPE與整個HTML標籤渲染後的結果串聯起來

3.元素屬性
注意事項：
（1）在JSX中從DOM屬性到JSX中的屬性，有兩個例外的轉換:
class屬性改成className
for屬性改成htmlFor
（2）組件的屬性是徹底自定義的屬性，也能夠理解爲實現組件所須要的參數

const Header = ()=>(
<h3 title={title}>{childern}></h3>
);
//調用：
<Header title="hello,world">Hello,world</Header>

(3)Boolean屬性：省略的默認的JSX設爲 true。要傳入false時，必須使用屬性表達式。這經常使用於表單元素

<checkbox checked/>等價爲<checkbox checked={true}/>
//若是想設置成false,必須:
<checkbox checked={false}/>

(4)展開屬性:若是你不知道要設置哪些 props,那麼如今最好不要設置它。由於React不能幫你你檢查屬性類型(propTypes)。這樣即便組建的屬性類型有錯誤，也不能獲得清晰地錯誤提示。

（5）自定義HTML屬性：在JSX中傳入自定義屬性，React是不會渲染的。若是要使用HTML自定義屬性，要使用data-前綴（這與HTML標準是一致的）。

<div data-attr="xxx"/></div>

然而在自定義標籤中，任意的屬性都是支持的:

<x-my-component custom-attr="foo"/>

4.javaScript屬性表達式
注意事項：
（1）屬性值要用表達式，使用{}替換便可

const person = <Person name={window.isLoggedIn ? window.name : ""}>;

（2）子組件也能夠用做表達式

const person = <Person name={window.isLoggedIn ? <Nav/> : <Login>};

5.HTML轉義
注意事項：
（1）HTML會將全部要顯示到DOmain的字符串轉義，防止XSS
（2）React提供了dangerouslySetInnerHTML屬性避免React轉義字符

下一篇內容咱們講React組件，歡迎關注。