狀態(tài)提升
??即：組件之間共享的狀態(tài)交給最近的公共父結(jié)點(diǎn)保管壹店，組件通過props獲取到狀態(tài)
?
組件生命周期
掛載階段
- 組件自身初始化工作在
construct中實(shí)現(xiàn) - 組件掛載開始之前即在組件render之前調(diào)用
componentWillMount，實(shí)現(xiàn)組件的啟動 - 組件掛載完成以后即在DOM元素塞入頁面以后調(diào)用
componentDidMount蒋畜，實(shí)現(xiàn)對于依賴DOM的組件啟動 - 組件對應(yīng)的DOM元素從頁面中刪除之前調(diào)用
componentWillUnmount，實(shí)現(xiàn)頁面銷毀之后的數(shù)據(jù)清理
更新階段
-
shouldComponentUpdate(nextProps,nextState)控制組件是否重新渲染（false則不會重新渲染） - componentWillReceiverProps(nextProps),組件接受到父節(jié)點(diǎn)的props之前調(diào)用
- componentWillUpdate(),組件開始重新渲染
- componentDidUpdate()，組件重新渲染完成之后再調(diào)用
?
ref屬性
??獲取已經(jīng)掛載的DOM節(jié)點(diǎn)
render(){
return (
<input ref = {(input)=>this.input = input} />
)
}
???再掛載完成之后調(diào)用ref屬性中的函數(shù)（將DOM元素設(shè)置為組件實(shí)例的一個(gè)屬性）嗅辣，通過this.input獲取到DOM元素
組件也可以設(shè)置ref屬性
?
props.children使用
- 組件可以像普通HTML編寫內(nèi)嵌結(jié)構(gòu)
ReactDOM.render (
<Title>
<h1>大家好</h1>
</Title>
……
)
??在組件內(nèi)部通過props.children獲取到
render(){
return(
<div>{this.props.children}<div>
)
}
?
dangerouslySetHTML
- 設(shè)置動態(tài)HTML
constructor(){
super();
this.state= {
content:'<div>我最可愛</div>'
}
}
render(){
return(
<div dangerouslySetInnerHTML = {{__html:this.state.content}}></div>
)
}
?
style屬性
- 組件內(nèi)部設(shè)置style時(shí)應(yīng)將css屬性變成對象再傳給元素
style = {{fontSize:10px}}
css樣式名應(yīng)轉(zhuǎn)換成駝峰式
?
組件參數(shù)驗(yàn)證
- PropTypes
static propTypes = {
comment:PropsType.object
}
//規(guī)定傳入的comment類型為object
