react 學習--元件的生命週期(三)銷燬階段
var HelloWorld = React.createClass({
render:function () {
return (
<p>
Hello,{this.props.name?this.props.name:' World'}
<span ref="tip"></span>
</p>
);
},
});
var Test = React.createClass({
getInitialState:function () {
return {
"name":""
};
},
handleChange:function () {
if(this.refs.myInput.value=="#"){
ReactDOM.unmountComponentAtNode(document.getElementById("app"));
}else{
this.setState({
"name":this.refs.myInput.value
});
}
},
render:function () {
return(
<div>
<HelloWorld name={this.state.name}/><br/>
<input ref="myInput" type="text" onChange={this.handleChange} />
</div>
);
},
// 元件將要被銷燬時
componentWillUnmount: function() {
console.log("BOOOOOOOOOOOOOOOOOM!");
},
});
ReactDOM.render(<Test />,document.getElementById("app"));
相關文章
- <react學習筆記(4)>元件的生命週期(執行階段和銷燬階段)以及事件處理函式React筆記元件事件函式
- react 學習--元件的生命週期(二)執行階段React元件
- react 學習--元件的生命週期(一)初始化階段React元件
- React 元件的生命週期可以分為哪些階段React元件
- 051 生命週期銷燬流程
- 深入React的生命週期(上):出生階段(Mount)React
- [React]元件的生命週期React元件
- React 元件生命週期React元件
- React元件生命週期React元件
- <react學習筆記(3)>屬性與狀態以及元件的生命週期(初始化階段)React筆記元件
- 理解React元件的生命週期React元件
- react之元件生命週期React元件
- React生命週期學習筆記React筆記
- Angular學習(二):元件-生命週期Angular元件
- 生命週期就是指物件的建立到銷燬的期間物件
- React 元件生命週期詳解React元件
- 理解React-元件生命週期React元件
- React元件生命週期詳解React元件
- React筆記(元件生命週期)React筆記元件
- 【vue深入學習第1章】探索 Vue 2 的生命週期:從建立到銷燬Vue
- React Native 元件(一)元件的生命週期React Native元件
- 探索 React 元件之間的生命週期React元件
- React 深入系列4:元件的生命週期React元件
- 深入理解 React 元件的生命週期React元件
- ReactJS前端學習-元件生命週期ReactJS前端元件
- 【連載】淺析React生命週期之一:掛載階段React
- React元件和生命週期簡介React元件
- React元件生命週期——精華筆記React元件筆記
- Solidity的生命週期包含哪些階段?Solid
- Vue學習(三)生命週期函式Vue函式
- React原始碼解析(3):元件的生命週期React原始碼元件
- React元件的狀態及生命週期事件React元件事件
- React生命週期React
- React 生命週期React
- vue總結「三」--元件生命週期Vue元件
- React新的生命週期React
- 前端學習(2369):元件的建立使用和元件的生命週期前端元件
- 學習vue生命週期Vue