一、實現組件的方法:
組件名稱首字母必須大寫
1.通過JS函數方式實現組件
|
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實現組件
|
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對props有嚴格的保護機制，一旦給定值，在組件中不允許被改變。
|
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> |
注意： 在很多場合中，組件的內容需要根據數據的刷新而刷新，這個時候就需要用到React提供的State
三、State狀態
-
React將組件看作是
狀態機，通過內部定義的狀態與生命周期實現與用戶的交互，維持組建的不同狀態，然后通過渲染UI保證用戶界面和數據一致性。 -
創建方式：利用ES6的class繼承方法
super，可以將props傳遞到React.Component的構造函數中。
1.React生命周期 掛載（mount）：
當組件實例被創建并插入DOM中時
（1）constructor(props) -->在組件掛載之前，會調用它的構造函數。如果不需要初始化state或不進行方法綁定，則不需要創建構造函數。
構造函數僅用于以下兩種情況：
- 通過給this.state賦值對象來初始化內部state
- 為事件處理函數綁定實例
注意： 在constructor()函數中不要調用setState()方法。如果需要使用內部state，可直接在構造函數中為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() -->必須要實現的
會檢查this.props和this.state的變化并返回以下類型之一：
- React元素：通常通過JSX創建
- 數組或fragments：返回多個
- Portals：可以渲染節點到不同的DOM子樹中
- 字符串或數值類型：被渲染為文本節點
- 布爾類型或null：什么都不渲染
純函數：在不修改組件state的情況下，每次調用都返回相同的結果，并且它不會直接與瀏覽器交互。
如果需與瀏覽器進行交互，在ComponmentDidMount()或其他生命周期中進行定義
（3） ComponmentDidMount() -->在組件掛載后立即調用。
- 依賴DOM節點的初始化
- 實例化網絡請求獲取數據
- 添加訂閱，需要在componentWillUnmount()中取消訂閱
注意： 可以在ComponmentDidMount()中直接調用setState()。它將觸發額外渲染，但此渲染會發生在瀏覽器更新屏幕之前。保證了即使在render()兩次調用的情況下，用戶不會看到中間狀態。
更新：
compomentDidUpdate(prevProps,prevProps,snapshot)：更新后立即調用，首次渲染不會執行此方法，當組件更新后，可以在此處對DOM進行操作。
|
1
2
3
4
5
|
compomentDidUpdate(prevProps){ if(this.props.userID !== prevProps.userID){ this.fetchData(this.props.userID) }} |
注意： 若在compomentDidUpdate() 調用setState()，需要包裹在一個條件語句中，否則會導致死循環。還會導致額外的重新渲染，雖然用戶不可見，但會影響組件性能。
卸載:
componentWillUnmount() -->在組件卸載及銷毀之前直接調用。
注意： componentWillUnmount()中不應調用setState()方法，因為組件將永遠不會重新渲染。組件實例卸載后，將永遠不會再掛載它。
2.生命周期實例-->時鐘：
|
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 { //構造函數 constructor(props) { super(props); //通過this.state初始化state內部 this.state = { date:new Date(), show:false, text:'顯示' } //為事件處理函數綁定實例 this.handleShow = this.handleShow.bind(this) } //添加訂閱 componentDidMount() { this.timerID = setInterval(()=>this.tick(),1000) } //時間函數 tick() { this.setState({ //setState更新組件的state date:new Date() }) } //實例顯示、隱藏 handleShow() { this.setState(state=>({ show: !state.show, text: !state.show?'隱藏':'顯示' })) } //組件卸載：清空定時器 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}時間</button> {element} </div> ) } } const reactSpan = ( <span> {<MyStateComp/> } </span> ) ReactDOM.render(reactSpan,reactDiv)</script> |
到此這篇關于React State狀態與生命周期的文章就介紹到這了,更多相關React State生命周期內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/isfor_you/article/details/115026703
