React study(二)

目錄

react 組件生命週期概要

組件本質上是狀態機，輸入確定，輸出一定確定。
狀態發生轉換時會觸發不同鉤子函數，從而讓開發者有機會作出響應。可以用事件的思路來理解狀態。

react整個生命週期：

不同階段的自定義函數

初始化：

注意：getDefaultProps(在第一個示例被初始化的時候被調用)
運行中：

銷燬：

react 組件生命週期

生命週期的初始化階段

getDefaultProps：只調用一次，實例之間共享引用
getInitialState：初始化每個實例特有的狀態
componentWillMount：render之前最後一次修改狀態的機會
render：只能訪問this.pros和this.state,只有一個頂層組件，不允許需要改狀態和DOM輸出
componentDidMount：成功render並渲染完成真實DOM之後觸發，可以修改DOM

生命週期的運行中階段

componentWillReceiveProps：父組件修改屬性觸發，可以修改新屬性、修改狀態
shouldComponentUpdate：返回false會阻止render調用
componentWillUpdate：不能修改屬性和狀態
render：只能訪問this.props和this.state，只有一個頂層組件，不允許修改狀態和DOM輸出
componentDidUpdate：可以修改DOM

生命週期的銷燬階段

componentWillUnmount：在刪除組件之前進行清理操作，比如計時器和事件監聽器

屬性的含義和用法

屬性的含義：
props=properties
屬性：一個事物的性質與關係
屬性往往是與生俱來的、無法自己改變的

屬性三種用法：
①鍵值對 等號右邊可以三種寫法
name= “tim”、{123} 、{“123”}、{[1,2,3]}、{variable}
②父組件與子組件
var props={ one:”123”,two:”321”}
<helloworld {...props} />（調用不方便）
③ var instance=React.renser(<helloworld></helloworld>,document.body);
instance.setProps({name:"Tim"});(不建議使用，違背react原則)
###狀態的含義和用法
state
狀態：是無所出的狀況
狀態時由事物自行處理、不斷變化的
getInitialState：初始化每個實例特有的狀態
setState：更新組件狀態

###屬性和狀態的對比
####相似點
都是純JS對象、都會觸發render更新、都具有確定性

注意：組件在運行時需要修改的數據就是狀態

項目分析

（文章評論項目）
分析構成項目的組件：

demo下載：demo