React元件化學習總結第二天
- 元件化的思想:分而治之
元件化提供了一種抽象,讓我們可以開發出一個個獨立可以複用的小元件來構造我們的應用。
任何的應用都會被我們抽象成為一顆元件樹。
- 類元件以及render函式的返回值:
a. 元件的名稱必須是大寫字母開頭(無論是類元件還是函式元件)
b. 類元件必須繼承自React.Component
c. 類元件必須實現render函式
export default class App extends React.Component {
render() {
return
<div>Hello React</div>
)
}
}
注意:所有的jsx語法本質上都是會被React.createElement呼叫
- 函式元件:
a. 函式元件是使用function 來進行定義的函式,只是這個函式會返回和類元件中render函式返回一樣的內容。
b. 函式元件有自己的特點:
沒有生命週期,沒有this(元件例項), 沒有內部狀態(state);
export default function App() {
return (
<div>Hello World</div>
)
}
- 認識生命週期
React官網生命週期圖譜:
Constructorn如果不初始化state 或不進行方法繫結,則不需要為React 元件實現建構函式。nconstructor中通常只做兩件事情:p通過給this.state賦值物件來初始化內部的state;p為事件繫結例項(this);ncomponentDidMountncomponentDidMount()會在元件掛載後(插入DOM樹中)立即呼叫。ncomponentDidMount中通常進行哪裡操作呢?p依賴於DOM的操作可以在這裡進行;p在此處傳送網路請求就最好的地方;(官方建議)p可以在此處新增一些訂閱(會在componentWillUnmount取消訂閱)
componentDidMount() {
console.log("呼叫componentDidMount方法");
}
componentDidUpdatencomponentDidUpdate()會在更新後會被立即呼叫,首次渲染不會執行此方法。p當元件更新後,可以在此處對DOM進行操作;p如果你對更新前後的props 進行了比較,也可以選擇在此處進行網路請求;(例如,當props 未發生變化時,則不會執行網路請求)。ncomponentWillUnmountncomponentWillUnmount()會在元件解除安裝及銷燬之前直接呼叫。p在此方法中執行必要的清理操作;p例如,清除timer,取消網路請求或清除在componentDidMount()中建立的訂閱等;
componentDidUpdate(prevProps, prevState, snapShot) {
console.log("呼叫componentDidMount方法");
}
componentWillUnmount() {
console.log("呼叫componentWillUnMount方法");
}
- 元件化的核心思想是對元件進行拆分,拆分成為一個個小的元件,然後再將這些元件組合巢狀在一起,最終形成我們的應用程式。
- 元件之間的通訊:
父元件在展示子元件,可能會傳遞一些資料給子元件:
父元件通過(屬性=值)的形式來傳遞給子元件資料,子元件通過props引數獲取父元件傳遞過來的資料。
a. 類元件:
b. 函式元件:
10.引數propTypes:
引數propTypesn對於傳遞給子元件的資料,有時候我們可能希望進行驗證,特別是對於大型專案來說:p當然,如果你專案中預設繼承了Flow或者TypeScript,那麼直接就可以進行型別驗證;p但是,即使我們沒有使用Flow或者TypeScript,也可以通過prop-types庫來進行引數驗證;n從React v15.5 開始,React.PropTypes已移入另一個包中:prop-types庫n更多的驗證方式,可以參考官網:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.htmlp比如驗證陣列,並且陣列中包含哪些元素;p比如驗證物件,並且物件中包含哪些key以及value是什麼型別;p比如某個原生是必須的,使用requiredFunc: PropTypes.func.isRequiredn如果沒有傳遞,我們希望有預設值呢?p我們使用defaultProps就可以了。
相關文章
- React 元件模式學習總結React元件模式
- React中的受控元件和非受控元件學習總結React元件
- React高階元件總結React元件
- React學習筆記-元件React筆記元件
- 總結Vue第二天:自定義子元件、父子元件通訊、插槽Vue元件
- React 效能優化總結React優化
- React效能優化總結React優化
- 複習第二天總結筆記3.19筆記
- IOS元件化方案總結iOS元件化
- React元件設計實踐總結02 - 元件的組織React元件
- React 原始碼學習(八):元件更新React原始碼元件
- 學習總結
- React學習資源彙總React
- 深度學習優化演算法總結深度學習優化演算法
- C# DevExpress控制元件Gridview和GridControl學習總結C#devExpress控制元件View
- React Native元件學習 StatusBar(ES6)React Native元件
- 會vue,學習react元件父子通訊VueReact元件
- 實訓第二天總結
- React總結React
- ConstraintLayout 學習總結AI
- BOM學習總結
- tkinter學習總結
- vue學習總結Vue
- HSF學習總結
- ElasticSearch 學習總結Elasticsearch
- Storm學習總結ORM
- vue 學習總結Vue
- lua 學習總結
- Angularjs 學習總結AngularJS
- WebRTC學習總結Web
- GCD 學習總結GC
- CompletableFuture學習總結
- awk 學習總結
- MyBatis 學習總結MyBatis
- Maven學習總結Maven
- Ajax學習總結
- JVM學習總結JVM
- mysqlimport學習總結MySqlImport