最近正在學(xué)習(xí)react检痰，在看《深入淺出react和redux》這本書，感覺還不錯痢艺，內(nèi)容淺顯易懂。就打算做一下學(xué)習(xí)筆記介陶，免得到時候七忘八忘
一堤舒、組件數(shù)據(jù)
（1）props和state
子組件訪問外部的父組件，需要通過props才能獲取父組件傳遞的內(nèi)容哺呜，他是組件的對外接口舌缤。可以傳函數(shù)某残，也可以是屬性国撵，但是不可以修改props；而state用于內(nèi)部狀態(tài)數(shù)據(jù)的使用玻墅。
（2）接口規(guī)范
組件對外聲明了介牙，我支持哪些prop，又需要什么樣的格式澳厢。雖然這是一種限制环础，但是對于propTypes的檢查囚似，可以很容易發(fā)現(xiàn)錯誤的引用方式，可盡早發(fā)現(xiàn)代碼錯誤喳整，舉個栗子：
ChildrenComponent.propTypes = {
initValue : propTypes.number.isRequired,
str: propTypes.string
modify: propTypes.func
}
以上代碼指定了，initValue是數(shù)值類型裸扶，且當(dāng)使用isRequired時則表示這個屬性是必須的框都，同理str指定字符串類型，modify指定函數(shù)類型呵晨。
需要注意的是魏保，如果不使用聲明，對組件沒有影響摸屠，就算是錯誤引用也不會報錯的谓罗。
這些聲明必定是要占用內(nèi)存資源的，目的只是為了輔助開發(fā)季二。在生產(chǎn)環(huán)境中檩咱，這些并沒有意義，在正式發(fā)布的時候胯舷，可以npm安裝babel-react-optimize抹除propTypes刻蚯。
（3）props默認聲明
在子組件中，對父組件傳遞過來的屬性桑嘶，存放到state中炊汹，但是如果像str，則不一定有傳遞這個屬性逃顶，所以要加上邏輯判斷讨便。
constructor(props) {
this.state = {
title: props.str || ""
}
}
但是如果屬性很多，就會造成邏輯充斥代碼以政，我們可以再子組件中提前聲明默認props值霸褒。
ChildrenComponent.defaultProps = {
str: ""
}
// 父組件
this.state = {
title: props.str
}
（4）setState
在開發(fā)中，我們可以發(fā)現(xiàn)盈蛮，對state屬性賦值的時候傲霸，如果使用this.state.屬性 = xxx，則發(fā)現(xiàn)頁面上的數(shù)據(jù)沒有發(fā)生變化眉反，而正確的做法是使用this.setState({屬性： xxx})昙啄。
this.state賦值的方式只是暴力地修改了組件內(nèi)部的狀態(tài)，并沒有驅(qū)動組件進行重新渲染寸五，而setState可以做到這一點梳凛。
二、組件生命周期
（1）裝載過程
當(dāng)組件第一次被渲染時候梳杏。函數(shù)的調(diào)用次序：
-
constructor當(dāng)創(chuàng)造一個組件的實例時韧拒，必定會執(zhí)行構(gòu)造函數(shù)淹接，在這里可以初始化state，綁定成員的this環(huán)境叛溢。
constructor(props) { super(props); this.incrementBtn = this.incrementBtn.bind(this); this.state = { count: props.initValue } } -
getInitialState使用
React.createClass創(chuàng)造組件時使用的塑悼，返回值用來初始this.state。 -
getDefaultProps使用
React.createClass創(chuàng)造組件時使用的楷掉，返回值用來設(shè)置默認的props厢蒜。 -
componentWillMount在render渲染之前執(zhí)行，此時沒有渲染任何東西烹植，在這邊做的事都可以挪到constructor中去做斑鸦。
-
render一個組件的靈魂（必不可少的部分），渲染界面草雕。
-
componentDidMountrender函數(shù)被調(diào)用之后巷屿，這個函數(shù)并不會立馬被調(diào)用，而是會等到引用該組件的父組件中的render函數(shù)全部渲染之后墩虹，最后依次調(diào)用各個子組件的
componentDidMount嘱巾，并且只會在瀏覽器端執(zhí)行。
（2）更新過程
注意：并不是所有的更新都會執(zhí)行下面的函數(shù)
-
componentWillReceiveProps當(dāng)父組件的render被調(diào)用時诫钓，子組件也會相應(yīng)地跟新浓冒，此時不管傳給子組件的props是否發(fā)生變化，都會觸發(fā)尖坤。所以props變化是觸發(fā)這個函數(shù)的充分不必要條件稳懒。
-
shouldComponentUpdate根據(jù)state前后數(shù)據(jù)和props前后數(shù)據(jù)來決定一個組件需不需要被重新渲染，返回結(jié)果為boolean值慢味，如果為true先嬉，則會調(diào)用
componentWillUpdate莉钙、render袱瓮、 componentDidUpdate函數(shù)逊拍，否則都不會執(zhí)行。主要作用：減少不必要的重新渲染驰唬，提高性能顶岸。
shouldComponentUpdate(nextProps, nextState) { return (nextProps.title !== this.props.title} || (nextState.sum !==this.state.sum); } componentWillUpdaterendercomponentDidUpdate
這三個函數(shù)執(zhí)行過程與裝載過程最后三個類似
（3）卸載過程
-
componentWillUnmount當(dāng)組件從DOM樹上刪除后，就會被調(diào)用叫编，用于做清理工作
三辖佣、向外傳遞數(shù)據(jù)
當(dāng)父組件想要獲取子組件的prop時，可以傳遞給子組件一個提前定義好的函數(shù)搓逾，而子組件只需要通過prop調(diào)用函數(shù)卷谈，并傳遞參數(shù)，父組件就能獲取霞篡。但是通過propTypes不能限制函數(shù)的參數(shù)格式世蔗，還是要需要自己多注意端逼。
state和prop的局限性
- 當(dāng)組件和父組件中的數(shù)據(jù)有了重復(fù)，如果由于某種原因?qū)е聰?shù)據(jù)不一致污淋，比如回調(diào)沒有執(zhí)行顶滩，那么就會出現(xiàn)問題，這時候應(yīng)該要有一個全局的狀態(tài)來保持一致寸爆，來作為唯一可靠的數(shù)據(jù)來源礁鲁。
- 如果祖父組件想要傳遞數(shù)據(jù)給孫子組件，那么還要經(jīng)過父組件而昨，可能這個數(shù)據(jù)對父組件根本沒啥用救氯，但也得乖乖中轉(zhuǎn)
要解決這些問題就要靠flux和redux的Store了找田。
