React 筆記
一得问、JSX 語(yǔ)法 疑難點(diǎn)
class => className
for => htmlFor
組件 大寫(xiě)開(kāi)頭
js表達(dá)式 {} 子組件可以作為表達(dá)式
注釋 {/注釋/} or <Nav /注釋/ >
自定義屬性 data-
<Component {...props} />
style 屬性: { CSS 屬性構(gòu)成的 JS 對(duì)象}
onChange 事件: 不需要 onBlur 去觸發(fā)
表單的表現(xiàn)差異大
dangerouslySetInnerHTML 傳入一個(gè)對(duì)象:{ __html: 相當(dāng)于元素的 innerHTML}
style 接受一個(gè)對(duì)象，這個(gè)對(duì)象里面是這個(gè)元素的 CSS 屬性鍵值對(duì)
<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小書(shū)</h1>
二软免、組件
基本概念：
props 組件屬性
state 組件可看成一個(gè)“狀態(tài)機(jī)”宫纬，state組件當(dāng)前狀態(tài)，通過(guò)this.setState()方法更新設(shè)置state膏萧，將調(diào)用render重新渲染UI
劃分狀態(tài)數(shù)據(jù)（什么數(shù)據(jù)屬性可以當(dāng)做狀態(tài)：）
無(wú)狀態(tài)組件
this.setState({}) 不會(huì)馬上更新漓骚，將參數(shù){}放入一個(gè)更新隊(duì)列，
this.setState(fn) 異步回調(diào)寫(xiě)法榛泛，參數(shù)為一個(gè)函數(shù)
一個(gè)事件循環(huán)只會(huì)渲染一次蝌蹂，一個(gè)事件循環(huán)中多個(gè)setState會(huì)合并后再渲染
配置組建 props
默認(rèn)配置 defaultProps
static defaultProps = {
likedText: '取消',
unlikedText: '點(diǎn)贊'
}
總結(jié)
為了使得組件的可定制性更強(qiáng)，在使用組件的時(shí)候曹锨，可以在標(biāo)簽上加屬性來(lái)傳入配置參數(shù)孤个。
組件可以在內(nèi)部通過(guò) this.props 獲取到配置參數(shù)，組件可以根據(jù) props 的不同來(lái)確定自己的顯示形態(tài)沛简，達(dá)到可配置的效果齐鲤。
可以通過(guò)給組件添加類(lèi)屬性 defaultProps 來(lái)配置默認(rèn)參數(shù)斥废。
props 一旦傳入，你就不可以在組件內(nèi)部對(duì)它進(jìn)行修改给郊。但是你可以通過(guò)父組件主動(dòng)重新渲染的方式來(lái)傳入新的 props牡肉，從而達(dá)到更新的效果
受控組件的概念，React.js 中的 <input /> 丑罪、<textarea />荚板、<select /> 等元素的 value 值如果是受到 React.js 的控制凤壁，那么就是受控組件吩屹。
組件之間使用 props 通過(guò)父元素傳遞數(shù)據(jù)的技巧
將組件渲染，并且構(gòu)造 DOM 元素然后塞入頁(yè)面的過(guò)程稱(chēng)為組件的掛載
（這個(gè)定義請(qǐng)好好記着《丁）煤搜。其實(shí) React.js 內(nèi)部對(duì)待每個(gè)組件都有這么一個(gè)過(guò)程，也就是初始化組件 -> 掛載到頁(yè)面上的過(guò)程唧席。所以你可以理解一個(gè)組件的方法調(diào)用是這么一個(gè)過(guò)程：
-> constructor()
-> render()
// 然后構(gòu)造 DOM 元素插入頁(yè)面
這當(dāng)然是很好理解的擦盾。React.js 為了讓我們能夠更好的掌控組件的掛載過(guò)程，往上面插入了兩個(gè)方法：
-> constructor()
-> componentWillMount()
-> render()
// 然后構(gòu)造 DOM 元素插入頁(yè)面
-> componentDidMount()
一個(gè)組件可以插入頁(yè)面淌哟，當(dāng)然也可以從頁(yè)面中刪除迹卢。
-> constructor()
-> componentWillMount()
-> render()
// 然后構(gòu)造 DOM 元素插入頁(yè)面
-> componentDidMount()
// ...
// 從頁(yè)面中刪除
React.js 也控制了這個(gè)組件的刪除過(guò)程。在組件刪除之前 React.js 會(huì)調(diào)用組件定義的 componentWillUnmount：
-> constructor()
-> componentWillMount()
-> render()
// 然后構(gòu)造 DOM 元素插入頁(yè)面
-> componentDidMount()
// ...
// 即將從頁(yè)面中刪除
-> componentWillUnmount()
// 從頁(yè)面中刪除
state vs props
一個(gè)組件的 state 中的數(shù)據(jù)可以通過(guò) props 傳給子組件徒仓，一個(gè)組件可以使用外部傳入的 props 來(lái)初始化自己的 state
state 是讓組件控制自己的狀態(tài)腐碱，props 是讓外部對(duì)組件自己進(jìn)行配置。
生命周期：
有7個(gè)方法根據(jù)執(zhí)行時(shí)機(jī)掉弛，可分為3類(lèi)：（組件掛載症见、組件更新、組件移除）
執(zhí)行時(shí)機(jī)：
Mount：已插入真實(shí) DOM殃饿；Update：正在被重新渲染谋作；Unmount：已移出真實(shí) DOM
兩種類(lèi)型處理函數(shù)：
will 函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did 函數(shù)在進(jìn)入狀態(tài)之后調(diào)用
兩個(gè)特殊狀態(tài)處理函數(shù)
componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用
組件掛載：
componentWillMount 渲染前調(diào)用一次乎芳，這個(gè)時(shí)候DOM結(jié)構(gòu)還沒(méi)有渲染
componentDidMount 渲染完成后調(diào)用一次遵蚜，這個(gè)時(shí)候DOM結(jié)構(gòu)已經(jīng)渲染了
組件更新：
*componentWillReceiveProps 初始化渲染不會(huì)調(diào)用，在接收到新的props時(shí)奈惑，會(huì)調(diào)用這個(gè)方法
*shouldComponentUpdate 初始化渲染不會(huì)調(diào)用吭净，接收到新的props或state時(shí)調(diào)用
componentWillUpdate 初始化渲染不會(huì)調(diào)用，更新前調(diào)用
componentDidUpdate 初始化渲染不會(huì)調(diào)用携取，更新后調(diào)用
組件卸載：
componentWillUnmount 組件移除前調(diào)用（例如清除內(nèi)存攒钳，解除事件的監(jiān)聽(tīng)）
通俗講，React 將組件在web中的形成雷滋、修改和渲染等劃分為若干個(gè)階段不撑，組成組件的生命周期文兢。在一個(gè)完整的生命周期內(nèi)，一個(gè)組件會(huì)經(jīng)過(guò)若干個(gè)階段焕檬，在特殊的階段組件會(huì)調(diào)用一個(gè)特別的生命周期方法姆坚。如下：
- constructor(props)
- componentWillMount()
- render()
- componentDidMount()
- componentWillReceiveProps(nextProps)
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate(nextProps, nextState)
- render( )
- componentDidUpdate(prevProps, prevState )
- componentWillUnmount( )
事件
DOM操作
組合組件
組件通信
Mixing
三、表單
四实愚、動(dòng)畫(huà)
五兼呵、測(cè)試、調(diào)試
六腊敲、數(shù)據(jù)源
七击喂、服務(wù)端渲染
