### 什么是生命周期?
組件本子上是狀態機,輸入確定,輸出一定確定。?
狀態發生轉換時會觸發不同的鉤子函數,從而讓開發者有機會做出響應?
可以用事件的思路來理解狀態。組件可以處于不同的狀態中。?
初始化階段————運行中階段————銷毀階段?
初始化階段能夠使用的鉤子函數(按照觸發順序):?
getDefaultProps(獲取實例的默認屬性)————只有第一次實例的時候調用?
getInitialState(獲取實例的初始狀態)?
componentWillMount(組件即將被渲染到頁面)?
render(組件在render中生成虛擬的DOM節點,即JSX,最后由React生成真實的DOM節點)?
componentDidMount(組件被渲染到頁面之后)?
運行中階段能夠使用的鉤子函數(按照觸發順序):?
componentWillReceiveProps(組件快要接收到屬性時觸發)?
shouldComponentUpdate(組件接收到新狀態時,是否需要更新,返回false,React就不會更新,可以提高性能)?
componentWillUpdate()?
render?
componentDidUpdate(在組件被渲染到頁面之后調用)?
銷毀中階段能夠使用的鉤子函數(按照觸發順序):?
componentWillUnmount(在銷毀操作執行之前觸發)
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞一,關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="劉艷">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var HelloMessage = React.createClass({
getDefaultProps: function () {
},
getInitialState: function(){
return {liked: false}
},
componentWillMount: function(){
console.log("Component will mount");
},
render: function(){
return <p ref = "one">Hello, {
(function(obj){
if(obj.props.name){
return obj.props.name;
}else{
return "Message"
}
})(this)}</p>
},
compontentDidMount: function(){}
});
ReactDOM.render(<HelloMessage></HelloMessage>, document.querySelector("#example"));
</script>
~~~
### 初始化階段介紹
getDefaultProps——只調用一次,實例之間共享引用(屬性)?
即使沒有生成實例,也會調用,在createClass時,就會被調用?
getInitialState——初始化每個實例特有的狀態?
必須返回一個Object或者是Null?
componentWillMount——render之前最后一次修改狀態的機會?
render——只能訪問this.props和this.state,不應再訪問其它信息,只有一個頂層組件,但是可以有子組件,不允許修改狀態和DOM輸出。?
如果render需要修改狀態和DOM輸出,那么render就不能在服務端使用。并且,如果在render中修改狀態和DOM輸出,會使得代碼邏輯變得復雜。所以,要盡可能避免這樣做。?
componentDidMount——成功render并渲染完成真實DOM之后觸發,可以修改DOM
操作真正的DOM節點:this.refs.XXX
~~~
var Zoo = React.createClass({
render: function() {
return <div>Giraffe name: <input ref="giraffe" /></div>;
},
showName: function() {
// 之前:
var input = this.refs.giraffe.getDOMNode();
// v0.14 版:
var input = this.refs.giraffe;
alert(input.value);
}
});
~~~
需要注意的是,如果你給自定義的 React 組件(除了 DOM 自帶的標簽,如 div、p 等)添加 refs,表現和行為與之前一致。
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞一,關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="劉艷">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/jquery-1.11.2.min.js"></script>
<script src = "build/react.js"></script>
<script src = "build/react-dom.js"></script>
<script src = "build/browser.min.js"></script>
<script type = "text/babel">
var count = 0;
var HelloMessage = React.createClass({
getDefaultProps: function () {
return {name: "Yvette"};
},
getInitialState: function(){
return {myCount: count++,
ready: false}
},
componentWillMount: function(){
this.setState({ready: true})
},
render: function(){
return <p ref = "one">Hello, {this.props.name ? this.props.name : "Message"} <br/>
{+ this.state.ready} {this.state.myCount}</p>
},
componentDidMount: function(){
$(this.refs.one).append("<span>future</span>");
}
});
ReactDOM.render(<div><HelloMessage></HelloMessage><HelloMessage></HelloMessage></div>, document.querySelector("#example"));
</script>
~~~

### 運行中階段介紹
componentWillReceiveProps:父組件修改屬性觸發,可以修改新屬性、修改狀態。?
在修改發生之前出發。在屬性真正比傳送到組件之前,對其進行處理。?
shouldComponentUpdate:返回false會阻止render調用,后面的函數都不會執行。?
componentWillUpdate:不能修改屬性和狀態?
render:只能訪問this.props和this.state,不應再訪問其它信息,只有一個頂層組件,但是可以有子組件,不允許修改狀態和DOM輸出。?
componentDidUpdate:可以修改DOM
### 銷毀階段介紹
componentWillUnmount:在組件真正被銷毀前調用,在刪除組件之前進行清理操作,如計時器和事件監聽器。
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞一,關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="劉艷">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var style = {
color: "red",
border: "1px solid #000"
};
var HelloWorld = React.createClass({
render: function(){
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
componentWillUnmount: function(){
console.log("I will unmount");
}
});
var HelloUniverse = React.createClass({
getInitialState: function(){
return {name: "Yvette"};
},
handleChange: function (event) {
if(event.target.value == "123"){
React.unmountComponentAtNode(document.querySelector("#example"))
return;
}
this.setState({name: event.target.value});
},
render: function(){
return(
<div>
<HelloWorld name = {this.state.name}></HelloWorld>
<br/>
<input type = "text" onChange = {this.handleChange} />
</div>
);
}
});
ReactDOM.render(<div style = {style}><HelloUniverse></HelloUniverse></div>,document.querySelector("#example"));
</script>
~~~
在input中輸入123,可以觸發componentWillUnmount事件。?
使用React.unmountComponentAtNode(para);//傳入的參數必須是裝載時的節點,即ReactDOM.render()的第二個參數。?
除了上面的方法外,還可以在render中寫判斷,如下:
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞一,關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="劉艷">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var style = {
color: "red",
border: "1px solid #000"
};
var HelloWorld = React.createClass({
render: function(){
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
componentWillUnmount: function(){
console.log("I will unmount");
}
});
var HelloUniverse = React.createClass({
getInitialState: function(){
return {name: "Yvette"};
},
handleChange: function (event) {
this.setState({name: event.target.value});
},
render: function(){
if(this.state.name == "123"){
return <div>123</div>
}
return(
<div>
<HelloWorld name = {this.state.name}></HelloWorld>
<br/>
<input type = "text" onChange = {this.handleChange} />
</div>
);
}
});
ReactDOM.render(<div style = {style}><HelloUniverse></HelloUniverse></div>,document.querySelector("#example"));
</script>
~~~
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解