React.js小書結合官方文檔第一部分筆記

react.js小書:

http://huziketang.mangojuice.top/books/react/

官方文檔:

https://react-1251415695.cos-website.ap-chengdu.myqcloud.com/docs/hello-world.html

Jsx

所謂的 JSX 其實就是 JavaScript 對象(標籤名,屬性,子元素)
React.js 可以用 JSX 來描述你的組件長什麼樣的。
JSX 在編譯的時候會變成相應的 JavaScript 對象描述。
react-dom 負責把這個用來描述 UI 信息的 JavaScript 對象變成 DOM 元素,並且渲染到頁面上。

React DOM 使用 camelCase(小駝峯命名)來定義屬性的名稱,而不使用 HTML 屬性名稱的命名約定。

JSX可以 防止注入攻擊

Render

一個組件類必須要實現一個 render 方法,這個 render 方法必須要返回一個 JSX 元素。
但這裏要注意的是,必須要用一個外層的 JSX 元素把所有內容包裹起來。返回並列多個 JSX 元素是不合法的

因爲 class 是 JavaScript 的關鍵字,所以 React.js 中定義了一種新的方式:className 來幫助我們給元素添加類名。
還有一個特例就是 for 屬性,例如

因爲 for 也是 JavaScript 的關鍵字,所以在 JSX 用 htmlFor 替代,即
而其他的 HTML 屬性例如 style 、data-* 等就可以像普通的 HTML 屬性那樣直接添加上去。

組件的組合嵌套

自定義的組件都必須要用大寫字母開頭,普通的 HTML 標籤都用小寫字母開頭。

事件監聽

沒有經過特殊處理的話,這些 on* 的事件監聽只能用在普通的 HTML 的標籤上,而不能用在組件標籤上。
與Dom的原生事件區別:
React 事件的命名採用小駝峯式,使用 JSX
不能通過返回 false 的方式阻止默認行爲。你必須顯式的使用 preventDefault
使用 JSX 語法時你需要傳入一個函數作爲事件處理函數,而不是一個字符串。

React.js 會給每個事件監聽傳入一個 event 對象,這個對象提供的功能和瀏覽器提供的功能一致,而且它是兼容所有瀏覽器的。

React.js 的事件監聽方法需要手動 bind 到當前實例,這種模式在 React.js 中非常常用。或者使用箭頭函數來實現

state和setState

當你調用 setState 的時候,React.js 並不會馬上修改 state。
而是把這個對象放到一個更新隊列裏面,稍後纔會從隊列當中把新的狀態提取出來合併到 state 當中,然後再觸發組件更新。

props

props 一旦傳入,你就不可以在組件內部對它進行修改。但是你可以通過父組件主動重新渲染的方式來傳入新的
state 是讓組件控制自己的狀態,props 是讓外部對組件自己進行配置。

列表

對於用表達式套數組羅列到頁面上的元素,都要爲每個元素加上 key 屬性,這個 key 必須是每個元素唯一的標識
一個好的經驗法則是:在 map() 方法中的元素需要設置 key 屬性。

我們不建議使用索引來用作 key 值,因爲這樣做會導致性能變差,還可能引起組件狀態的問題。
標準做法是最好是後臺數據返回的 id 作爲列表元素的 key。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章