react 官網筆記 01

之所以從react官網學習react,1是因為英語不好, 希望能有所改進,內容不保證對錯,只是自己的理解

更好的請參見

在react中使用jsx語法,可以把它理解為一種融合html與js的新語言,整個react都是由他構成

react的唯一渲染出口應該就是

reactdom.render(
, document.getelementbyid('root')
);

react是從js的角度來看待程式的組成的, 通過js把一切資源組織起來執行. 為了在js中更方便的呼叫html渲染頁面,react使用jsx語法,來融合html和js

const element =( ;)   //當jsx語法多行時,最好用()包裹

jsx 在經過babel編譯後, 會變成乙個普通的 js函式,也就是乙個js的物件了, babel編譯jsx成乙個react.createelement()呼叫,

const element = (
);這兩種寫法相等
const element = react.createelement(
'h1',
, 'hello, world!'
)

瀏覽器上dom的修改的成本是很大的,因為js是單執行緒迴圈,與**邏輯共有同一執行緒,因此頻繁修改會造成ui執行緒的卡頓感以及

js**執行的延遲,如果每次修改乙個dom樹上的乙個子元素而要全部新建替換整個dom就太低效了,理想的情況是只修改那個

子dom元素,這份工作實際上react幫我們通過演算法自動完成了,所以每次我們reder時候,從**邏輯上看好像是從新渲染整個

dom,而實際上內部演算法只是更新了改變的那部分.

上面提到的 elements被叫做react elements, 可以這麼理解, 對於react直譯器來說, 這種型別的變數相當於一種描述(用來告訴直譯器應該如何渲染dom的外觀),這種變數生成成本特別低,只是一種描述,不是真正的dom元素(介面)

一般情況下,react都是渲染在乙個根dom元素上的

reactdom.render(
, document.getelementbyid('root')//根dom
);

react dom更新 dom是很有效率的,他的邏輯是比較這次新react elements與上次react element的差別,然後只更新對應dom,盡量最小代價的更新介面,這個虛擬在記憶體裡的react element實際上就是大名鼎鼎的虛擬dom,所以我們應該換一種角度來思考問題,想要什麼樣的介面取決於對應的model結構對映,而不是思考如何手動獲得dom引用然後修改這個dom元素的屬性來修改介面.

元件是react的一種組織形式,他像乙個函式,接受引數(prop)然後返回乙個react element,用來渲染介面

元件有兩種形式:

1 函式形式

function
welcome
(props)
h1>
;}

2 es6 class形式(有一些額外的功能,比如生命週期鉤子,state)

class
welcome
extends
react.component
h1>;}
}

const element =
name
="sara"
/>
;

當react 渲染這個react element時, 會解析attributes成為乙個物件prop傳入元件.

有幾個注意事項:1 react應該抽象成元件去思考所有要完成的功能,而且元件應該盡可能的細分成只實現乙個功能的模組,元件只完成它自己的職責,有關元件對外提供的prop中的屬性再設計的時候應該從元件本身角度考慮如何命名,而不是從使用場景上決定.

2 react應該遵循純函式設計思想,相同輸入,相同輸出,而不應該更改輸入值.同樣react中如果在子元件中修改props.a這種基本型別,父元件的實參是不會被更改的,但是因為js的限制,對於props.b(乙個物件).a被修改上層也會被修改,所以應該極力避免.

react 官網筆記 01

react 官網筆記 06 狀態提公升

React 官網列子學習

React官網學習實踐列表 Keys

react 官網筆記 01

react 官網筆記 06 狀態提公升

React 官網列子學習

React官網學習實踐 列表 Keys

相關推薦

React官網學習實踐列表 Keys