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，对于引...
