- 函數式組件肯定是無狀態(tài)組件否副,類組件可以是無狀態(tài)組件也可以是有狀態(tài)組件
生命周期:即react實例從創(chuàng)建到銷毀的執(zhí)行過程
具體生命周期分三個階段:
創(chuàng)建(初始化)階段:
componentWillMount:render渲染前
render:渲染鉤子
componentDidMount:
* 1.渲染完后,DOM加載到頁面上要執(zhí)行的鉤子,相當于vue的mounted鉤子
* 2.推薦與后臺交互獲取數據在componentDidMount中獲取
運行更新階段:
componentWillReceiveProps:接收其他組件傳過來的屬性之前要執(zhí)行的鉤子,第一次組件加載時不會執(zhí)行,有新數據傳遞過來時才執(zhí)行
componentWillUpdate:是在組件間更新前觸發(fā),不管這個值有沒有變化
componentDidUpdate:更新后執(zhí)行的鉤子
shouldComponentUpdate:生命周期鉤子優(yōu)化,可以判斷render是否重新渲染慢睡,如果返回true,則渲染,否則返回false不渲染
銷毀階段:
props和state的區(qū)別:
state:(對內)針對組件內部的狀態(tài)膨疏,組件外外部是訪問不到的
props:(對外)是組件之間訪問時用到的一睁,組件內部可以通過props來訪問到另一個組件的數據
原則:多用props,少用state
ref
this.props.chidren
proptypes
findDOMNode
彈性盒參考資料:
css3手冊關于flex:
http://www.css88.com/book/css/properties/flex/align-self.htm
Flex 布局教程:語法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 布局教程:實例篇
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
ES6 定義class參考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
數據交互:
原生實現(xiàn):XMLHttpRequest,fetch
第三方庫實現(xiàn):jQuery $.ajax,axios等
如果是本地模擬json,json文件應該放在public目錄下,
axios官方 github地址:https://github.com/axios/axios