1.元件的生命週期
接著(2)中的元件生命週期
1.執行階段
執行階段有5個步驟：
- componentWillReceiveProps: 父元件修改屬性觸發，可以修改新屬性，修改狀態。
- shouldComponentUpdate: 元件是否更新，返回布林值，預設值為true，表示更新；返回false會阻止render呼叫，render後面的函式都不會執行。
- componentWillUpdate: 不能修改屬性與狀態，用於日誌列印與資料獲取。
- render：只能訪問this.props與this.state，只有一個頂層標籤，不允許修改狀態和DOM輸出。
- componentDidUpdate：可以修改DOM。
componentWillReceiveProps有一個引數：newProps
其餘四個有兩個引數：newProps,newState
//demo1
<div id="demo1"></div>
<script type="text/babel">
var HelloReact = React.createClass({
// 元件將要接收新的屬性
componentWillReceiveProps:function(newProps){
console.log('componnetWillReceiveProps',1);
console.log(newProps);
},
// 是否允許元件更新，返回true或者false，一般不會改變它的預設值：true
shouldComponentUpdate:function(newProps,newState){
console.log('shouldComponentUpdate',2);
console.log(newProps,newState);
return true;
},
// 元件將要更新
componentWillUpdate:function(){
console.log('componentWillUpdate',3);
},
render:function(){
console.log('render',4);
return <p>Hello {this.props.name?this.props.name:'React'}</p>;
},
// 元件更新完畢
componentDidUpdate:function(){
console.log('componentDidUpdate',5);
}
})
var Demo = React.createClass({
getInitialState:function(){
return {
name:''
};
},
handleChange:function(e){
this.setState({
name:e.target.value
});
},
render:function(){
return(
<div>
<HelloReact name={this.state.name}/>
{/*傳的是狀態，到子元件變成了屬性*/}
<input type="text" onChange={this.handleChange} />
</div>
)
}
})
ReactDOM.render(<Demo/>,document.getElementById("demo1"));
</script>
複製程式碼效果圖： 初始:
shouldComponentUpdate(newProps,newState){
return false;
複製程式碼結果：
2.銷燬階段
- componentWillUnmount: 元件將要解除安裝
銷燬階段有兩種方式- 利用input的輸入內容來解除安裝元件，ReactDOM中提供一個方法unmountComponentAtNode()，引數是節點物件。
- 通過判斷state的狀態來解除安裝元件
在原來的例子中擴充套件
//demo1
<div id="demo2"></div>
<script type="text/babel">
var HelloReact = React.createClass({
componentWillReceiveProps:function(newProps){
console.log('componnetWillReceiveProps',1);
},
shouldComponentUpdate:function(newProps,newState){
console.log('shouldComponentUpdate',2);
return true;
},
componentWillUpdate:function(){
console.log('componentWillUpdate',3);
},
render:function(){
console.log('render',4);
return <p>Hello {this.props.name?this.props.name:'React'}</p>;
},
componentDidUpdate:function(){
console.log('componentDidUpdate',5);
},
//銷燬階段
componentWillUnmount:function(){
console.log('BOOOOOOOOOOOOOOOOOM');
}
})
var Demo = React.createClass({
getInitialState:function(){
return {
name:''
};
},
handleChange:function(e){
//方法1：
if(e.target.value =="1234"){
ReactDOM.unmountComponentAtNode(document.getElementById("demo2"));
return;
};
this.setState({
name:e.target.value
});
},
render:function(){
//方法2：
if(this.state.name="1234"){
return <div>1234</div>
};
return(
<div>
<HelloReact name={this.state.name}/>
<input type="text" onChange={this.handleChange} />
</div>
)
}
})
ReactDOM.render(<Demo />, document.getElementById("demo2"));
</script>
複製程式碼使用方法一，輸入"1234"的效果圖：
2.事件處理
1.編寫事件處理函式
自定義元件：駝峰命名
在函式體中進行一些操作，常見的有：更新頁面內容，更新元件狀態，與後臺互動。
書寫方式：
var Demo = React.createClass({
getInitialState:function(){ },
handleClick: function(event){ },
handleChange: function(){ },
render:function(){ },
})
複製程式碼2.繫結事件處理函式
onClick={this,handleClick}
需要注意的是：不要在事件後面新增上一個() 其他的事件： 觸控事件：onTouchCancel，onTouchEnd，onTouchMove，onTouchStart
鍵盤事件：onKeyDown，onKeyUp， onKeyPress（前兩者的組合）
表單時間：onChange，onInput，onSubmit
焦點事件：onFocus，onBlur
UI元素事件：onScroll
滾動事件：onWhell（滑鼠滾動）
滑鼠事件：onClick，onContextMenu，onDoubleClick…...
3.事件物件
1.通用：所有的事件都有的事件屬性，例如：
a：target 獲取節點
b: timeStame 獲取時間戳
c: type 獲取事件型別
d：nativeEvent 瀏覽器的預設事件
e: preventDefault 阻止預設行為
f: stopPropagation 組織冒泡
g: bubbles 事件是否可以冒泡
h: cancelable 事件可否可以取消
......
複製程式碼<div id="demo3"></div>
<script type="text/babel">
var Demo = React.createClass({
handleClick:function(e){
console.log(e);
console.log(e.target);
console.log(e.nativeEvent);
console.log(e.cancelable);
console.log(e.type);
console.log(e.bubbles);
console.log(e.stopPropagation);
},
render:function(){
return <div onClick={this.handleClick}>Hello World</div>;
}
})
ReactDOM.render(<Demo/>,document.getElementById('demo3'))
</script>
複製程式碼點選後的效果圖：
事件與狀態關聯：
inputChange(event){
this.setState({
inputText:event.target.value
});
}
複製程式碼事件處理函式例子
<div id="demo4"></div>
<script type="text/babel">
var Demo = React.createClass({
getInitialState(){
return {
width: 200,
height: 200,
backgroundColor: '#ff6666'
};
},
randomColor(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return 'rgb('+r+','+g+','+b+')';
},
handleWheel(){
this.setState({
backgroundColor:this.randomColor()
});
},
render(){
return <div onWheel={this.handleWheel} style={this.state}>這是一個案例，滑鼠滾動實現背景顏色的變化</div>;
}
});
ReactDOM.render(<Demo/>,document.getElementById('demo4'))
</script>
複製程式碼效果圖:
滾動滑輪時，顏色隨機改變