import React, { Component } from 'react';
export default class Main extends Component {
//構造函數
constructor(props) {
super(props);
console.log("constructor");
//初始化狀態值
this.state = {message: "helloworld"}
}
//準備加載組件
componentWillMount() {
console.log("componentWillMount");
}
//渲染界面
render() {
console.log("render");
return (
<div style={styles.container}>
<p style={styles.info}>
{this.state.message}
</p>
</div>
);
}
//組件加載成功并渲染出來
componentDidMount() {
console.log("componentDidMount");
}
//組件接收到新的 props 時觸發
componentWillReceiveProps(nextProps) {
console.log("componentWillReceiveProps");
}
//決定是否需要更新組件
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate");
}
//組件重新渲染前會調用
componentWillUpdate(nextProps, nextState) {
console.log("componentWillUpdate");
}
//組件重新渲染后會調用
componentDidUpdate(prevProps, prevState) {
console.log("componentDidUpdate");
}
//組件被卸載前會調用
componentWillUnmount() {
console.log("componentWillUnmount");
}
}
const styles = StyleSheet.create({
container:{
flex:1,
marginTop:40,
alignItems:'center',
},
info:{
fontSize:20,
},
});
AppRegistry.registerComponent('HelloWorld', () => Main);
react 組件的生命周期樣例
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
推薦閱讀更多精彩內容
- 這一節，我們將會根據上一節的React輪播圖這個組件，大概說一下React組件的生命周期。我跟大家說的生命周期可能...
- getDefaultProps(獲取默認屬性) 作用于組件類，只調用一次，返回對象用于設置默認的props，對于引...
