一、實(shí)現(xiàn)組件的方法:
組件名稱首字母必須大寫
1.通過JS函數(shù)方式實(shí)現(xiàn)組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div id="app"></div><script type="text/babel"> var ReactDiv = document.getElementById('app'); function GetReactComp(){ return <p>我是react組件</p> } const hellocomp = < GetReactComp /> //首字母大寫 const reactSpan = ( <span> { hellocomp } </span> ) ReactDOM.render(reactSpan,ReactDiv)</script> |
2.通過ES6 class實(shí)現(xiàn)組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div id="class"></div><script type="text/babel"> var reactDiv1=document.getElementById('class'); //定義類組件 class MyReactComp extends React.Component{ render(){ return ( <h2>類組件</h2> ) } } //使用類組件 const testDiv = ( <div>{<MyReactComp/>}</div> ) //掛載 ReactDOM.render(testDiv,reactDiv1)</script> |
二、props組件傳值
React對(duì)props有嚴(yán)格的保護(hù)機(jī)制，一旦給定值，在組件中不允許被改變。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div id="app"></div><script type="text/babel"> var reactDiv = document.getElementById('app'); class ReactClassComp extends React.Component { render(){ return ( <div> <p>用戶名：<input type="text" value={ this.props.name }/></p> <p>性別：<input type="text" value={ this.props.gender }/></p> </div> ) } } ReactClassComp.defaultProps={ name:'劉備', gender:'男' } const reactp=( <span> {<ReactClassComp />} </span> ) ReactDOM.render(reactp,reactDiv)</script> |
注意： 在很多場(chǎng)合中，組件的內(nèi)容需要根據(jù)數(shù)據(jù)的刷新而刷新，這個(gè)時(shí)候就需要用到React提供的State
三、State狀態(tài)
-
React將組件看作是
狀態(tài)機(jī)，通過內(nèi)部定義的狀態(tài)與生命周期實(shí)現(xiàn)與用戶的交互，維持組建的不同狀態(tài)，然后通過渲染UI保證用戶界面和數(shù)據(jù)一致性。 -
創(chuàng)建方式：利用ES6的class繼承方法
super，可以將props傳遞到React.Component的構(gòu)造函數(shù)中。
1.React生命周期 掛載（mount）：
當(dāng)組件實(shí)例被創(chuàng)建并插入DOM中時(shí)
（1）constructor(props) -->在組件掛載之前，會(huì)調(diào)用它的構(gòu)造函數(shù)。如果不需要初始化state或不進(jìn)行方法綁定，則不需要?jiǎng)?chuàng)建構(gòu)造函數(shù)。
構(gòu)造函數(shù)僅用于以下兩種情況：
- 通過給this.state賦值對(duì)象來初始化內(nèi)部state
- 為事件處理函數(shù)綁定實(shí)例
注意： 在constructor()函數(shù)中不要調(diào)用setState()方法。如果需要使用內(nèi)部state，可直接在構(gòu)造函數(shù)中為this.state賦值初始化state.
|
1
2
3
4
5
6
7
8
|
constructor(props){ super(props)； this.state = { date:new Date() } this.handleShow = this.handleShow.bind(this) } |
（2） render() -->必須要實(shí)現(xiàn)的
會(huì)檢查this.props和this.state的變化并返回以下類型之一：
- React元素：通常通過JSX創(chuàng)建
- 數(shù)組或fragments：返回多個(gè)
- Portals：可以渲染節(jié)點(diǎn)到不同的DOM子樹中
- 字符串或數(shù)值類型：被渲染為文本節(jié)點(diǎn)
- 布爾類型或null：什么都不渲染
純函數(shù)：在不修改組件state的情況下，每次調(diào)用都返回相同的結(jié)果，并且它不會(huì)直接與瀏覽器交互。
如果需與瀏覽器進(jìn)行交互，在ComponmentDidMount()或其他生命周期中進(jìn)行定義
（3） ComponmentDidMount() -->在組件掛載后立即調(diào)用。
- 依賴DOM節(jié)點(diǎn)的初始化
- 實(shí)例化網(wǎng)絡(luò)請(qǐng)求獲取數(shù)據(jù)
- 添加訂閱，需要在componentWillUnmount()中取消訂閱
注意： 可以在ComponmentDidMount()中直接調(diào)用setState()。它將觸發(fā)額外渲染，但此渲染會(huì)發(fā)生在瀏覽器更新屏幕之前。保證了即使在render()兩次調(diào)用的情況下，用戶不會(huì)看到中間狀態(tài)。
更新：
compomentDidUpdate(prevProps,prevProps,snapshot)：更新后立即調(diào)用，首次渲染不會(huì)執(zhí)行此方法，當(dāng)組件更新后，可以在此處對(duì)DOM進(jìn)行操作。
|
1
2
3
4
5
|
compomentDidUpdate(prevProps){ if(this.props.userID !== prevProps.userID){ this.fetchData(this.props.userID) }} |
注意： 若在compomentDidUpdate() 調(diào)用setState()，需要包裹在一個(gè)條件語(yǔ)句中，否則會(huì)導(dǎo)致死循環(huán)。還會(huì)導(dǎo)致額外的重新渲染，雖然用戶不可見，但會(huì)影響組件性能。
卸載:
componentWillUnmount() -->在組件卸載及銷毀之前直接調(diào)用。
注意： componentWillUnmount()中不應(yīng)調(diào)用setState()方法，因?yàn)榻M件將永遠(yuǎn)不會(huì)重新渲染。組件實(shí)例卸載后，將永遠(yuǎn)不會(huì)再掛載它。
2.生命周期實(shí)例-->時(shí)鐘：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<div id="app"></div><script type="text/babel"> var reactDiv = document.getElementById('app') //定義類組件 MyStateComp class MyStateComp extends React.Component { //構(gòu)造函數(shù) constructor(props) { super(props); //通過this.state初始化state內(nèi)部 this.state = { date:new Date(), show:false, text:'顯示' } //為事件處理函數(shù)綁定實(shí)例 this.handleShow = this.handleShow.bind(this) } //添加訂閱 componentDidMount() { this.timerID = setInterval(()=>this.tick(),1000) } //時(shí)間函數(shù) tick() { this.setState({ //setState更新組件的state date:new Date() }) } //實(shí)例顯示、隱藏 handleShow() { this.setState(state=>({ show: !state.show, text: !state.show?'隱藏':'顯示' })) } //組件卸載：清空定時(shí)器 componentWillUnmont() { clearInterval(this.timerID) } render() { let isShow=this.state.show; let element; if(isShow){ element = <h2 >{this.state.date.toLocaleTimeString()}</h2> }else{ element = null } return ( <div> <button onClick={this.handleShow}>{this.state.text}時(shí)間</button> {element} </div> ) } } const reactSpan = ( <span> {<MyStateComp/> } </span> ) ReactDOM.render(reactSpan,reactDiv)</script> |
到此這篇關(guān)于React State狀態(tài)與生命周期的文章就介紹到這了,更多相關(guān)React State生命周期內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/isfor_you/article/details/115026703
