React 初級用法

2021-08-20 18:14:43 字數 1617 閱讀 5539

作為乙個開發人員,如今我們大多數都會沉迷於專案的業務開發,很少花時間進行技術或問題梳理。以至於我們每次遇到相同的問題或障礙,都會再次陷入。總結和思考應該是我們每乙個人所要掌握的軟技能。react作為乙個主流的js庫,使我們的開發變得更加簡單。

react是facebook開發的一款js庫。react便於構建隨資料變化的大型應用程式。

元件復用強

傳統diff演算法

==diff演算法(react)==(diff演算法)

節點 狀態state和render生命週期函式

props是乙個從外部傳進元件的引數,主要作為父子元件間資料傳遞,具有唯讀性和不變性,只能通過外部元件主動傳入新的props來重新渲染子元件,否則子元件的props以及展現形式不會改變。

預設值

state的主要用於儲存、控制以及修改元件的狀態,它只能在constructor中初始化this.state=,屬於元件的私有屬性,不可通過外部訪問和修改,只能通過元件內部的this.setstate()來修改

react生命週期是乙個比較重要的知識點。

/**

*-------構造器-------

*1、初始化預設屬性

*2、....

*/constructor(props)

/***-------元件掛載之前-------

*1、更改屬性

*2、....

*/componentwillmount()

/***-------元件掛載之後-------

*1、引用refs

*2、網路請求

*3、.......

*/componentdidmount()

/***-------父元件render時子元件執行-------

*1、引用refs

*2、....

*/componentwillreceiveprops(nextprops)

/***-------元件掛載之後state發生改變-------

*1、需要重新渲染元件,預設返回true,需要重新render

*2、....

*/shouldcomponentupdate(nextprops, nextstate)

/***-------元件渲染之前-------

*1、shouldcomponentupdate返回true或者呼叫forceupdate之後

*2、....

*/componentwillupdate(nextprops, nextstate)

/***-------元件渲染-------

*/render()

/***-------元件渲染之後-------

*/componentdidupdate()

/***-------元件解除安裝之前-------

*1、取消監聽

*2、釋放資源

*3、......

*/componentwillunmount()

合理進行react元件封裝,生命週期函式componentdidmount、componentwillunmount、shouldcomponentupdate的使用,巧用props、state進行ui渲染會使得介面開發更加簡單方便。

Handler初級用法

然後做出響應的處理。handler有三個作用 一 傳送 messageuixiang 訊息 handler.sendmessage message msg 二 接受訊息 並處理訊息 handlermessage message msg 三 清除訊息佇列 handler.remove what mes...

printf初級用法

printf函式是按照我們指定的格式輸出。格式如下 1 printf xx 按照雙引號裡面的內容輸出 xx。例如 printf hello world 2 如果我們需要換行時,應該在雙引號上面輸入相應換行轉義字元 例如 printf a 123,b 124 n 其中 n 是換行 3 printf 還...

React 基本用法

元素 用 classname 來代替 class htmlfor 替換 lable 的 for 屬性 標籤 標籤必須成對出現,如果是單標籤,則必須自閉和 注釋推薦使用 也可也用 這是注釋 這是注釋 這是注釋當編譯引擎,在編譯 jsx 的時候,如果遇到了 那麼會把它當作 html 去編譯,如果遇到了 ...