RN学习之Component⽣命周期
我们显⽰必然要使⽤到component，React.Component 是⼀个抽象的Class，通常继承该类来构建⾃定义的Component。 Component可以将U分离成独⽴的碎⽚，有点类似于JavaScript的function，它接受⼀个任意的输⼊（props）并返回⼀个React element描述屏幕中的内容。
⽣命周期及⽅法
Component和Android中的activity⼀样，也有⼀定的⽣命周期，官⽹对于其⽣命周期介绍如下：
Component⽣命周期
基本分为三个阶段：
1、挂载阶段
调⽤⽅法：
constructor() //构造函数
componentWillMount()//将要被挂载
render()//渲染
componentDidMount()// 完成挂载
2、更新阶段
调⽤⽅法：
componentWillReceiveProps(nextProps) //作为⼦空间，在props改变时调⽤
shouldComponentUpdate(nextProps,nextState)//是否允许更新，返回boolean
componentWillUpdate(nextProps,nextState)//将要更新
render()//渲染
componentDidUpdate(prevProps,prevState)//完成更新
3、销毁阶段
调⽤⽅法：
componentWillUnmount()//销毁
具体实例
//重新写⼀个index.js，来演⽰component的⽣命周期
react native
//component是从react中来的
importReact, {Component} from 'react';
/
/Text以及View等都是从react-native中来的
import{AppRegistry,Text}from'react-native'
//定义⼀个Component，按照ES6的语法来，就和java语法中定义class⼀样，继承component
class AndroidTestComponent extends Component{
//getDefaultProps() is only supported for classes created ateClass. We can use a static property to define defaultProps instead.
// getDefaultProps(){
//    console.log("AndroidTestComponent=====getDefaultProps")
// }
// 使⽤这个⽅法进⾏定义props
staticdefaultProps= {
color:'red'
//构造函数
constructor(props) {
super(props)
this.state= {
name:'ruibaobao'
}
console.log("AndroidTestComponent=====constructor")
}
//compoment将要挂载的函数
componentWillMount() {
console.log("AndroidTestComponent=====componentWillMount")
}
//render属性对应的函数会返回⼀段JSX来表⽰该组件的结构和布局。该部分是⼀个组件必不可少的地⽅，没有这些内容，就⽆法构成⼀个组件。
//render⽅法必须返回单个根元素
//compoment挂载渲染的函数
render() {
console.log("AndroidTestComponent=====render")
return(
{
this.setState({name:'wwoairuibaobao'})
}}style={{backgroundColor:'red'}}>这是⼀个简单的测试text{this.state.name}
//如何使⽤props
//forceUpdate 会强制更新component，即使shouldComponentUpdate返回false也会更新
//{this.forceUpdate()}} style={{backgroundColor:lor}} >这只是⼀个简单的测试t{this.state.name} {lor}
}
//compoment已经挂载的函数
componentDidMount() {
console.log("AndroidTestComponent=====componentDidMount")
}
//属性改变时调⽤，在封装、引⽤⼦空间时会触发⼦空间的这个⽅法componentWillReceiveProps(nextProps) {
console.log("AndroidTestComponent=====componentWillReceiveProps")
}
//在props 和 state更新之后，根据返回值判断是否需要更新  true 需要  false 不需要shouldComponentUpdate(nextProps, nextState) {
console.log("AndroidTestComponent=====shouldComponentUpdate") console.log(nextProps)
console.log(nextState)
return true;
}
//component将要更新时调⽤
componentWillUpdate(nextProps, nextState) {
console.log("AndroidTestComponent=====componentWillUpdate")
console.log(nextProps)
console.log(nextState)
}
//component更新后调⽤
componentDidUpdate(prevProps, prevState) {
console.log("AndroidTestComponent=====componentDidUpdate")
console.log(prevProps)
console.log(prevState)
}
//component销毁时调⽤
componentWillUnmount() {
console.log("AndroidTestComponent=====componentWillUnmount")
}
}
/
/另⼀种定义props的⽅法，如果static defaultProps也定义了，这个会覆盖上⾯的
// AndroidTestComponent.defaultProps = {
//    name:'xiaoerlang'
// }
//进⾏注册 'RNProject'为项⽬名称 AndroidTestComponent 为启动的component
打印log
1、reload
I/ReactNativeJS(24891): AndroidTestComponent=====constructor
I/ReactNativeJS(24891): AndroidTestComponent=====componentWillMount I/ReactNativeJS(24891): AndroidTestComponent=====render
I/ReactNativeJS(24891): AndroidTestComponent=====componentDidMount 2、点击‘这是⼀个简单的测试text’
I/ReactNativeJS(24891): AndroidTestComponent=====shouldComponentUpdate I/ReactNativeJS(24891): { rootTag: 1, color: 'red' }
I/ReactNativeJS(24891): { name: 'wwoairuibaobao' }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。