組件的生命周期分為三個(gè)狀態(tài)

1. Mounting:已插入真實(shí)DOM
2. Updating:正在被重新渲染
3. Unmounting:已移出真實(shí)DOM

Mounting (裝載)

1. getInitialState()在組件掛載之前調(diào)用一次,返回值將作為this.state的初始值.
2. componentWillMount():服務(wù)器和客戶端只調(diào)用一次,在初始化渲染之前調(diào)用.
3. componentDidMount():在初始化渲染執(zhí)行完成后立即調(diào)用一次.僅客戶端調(diào)用,服務(wù)端不調(diào)用.
   和iOS的UIViewController里的viewWillAppear和viewDidAppear方法類似

Updating (更新會多次調(diào)用)

1. componentWillReceiveProps(object nextProps) 在組件接收到新的props的時(shí)候調(diào)用,在初始化時(shí)該方法不調(diào)用.
2. shouldComponentUpdate(object nextProps ,object nextState)在接收新的props或state將要渲染之前調(diào)用.

• 該方法在初始化渲染的時(shí)候不會調(diào)用,在使用forceUpdate方法的時(shí)候也不會.如果確定新的 props 和 state 不會導(dǎo)致組件更新，則此處應(yīng)該 返回 false.

3. componentWillUpdate(object nextProps, object nextState):在接收到新的 props 或者 state之前立刻調(diào)用.

• 在初始化渲染的時(shí)候該方法不會被調(diào)用.使用該方法做一些更新之前的準(zhǔn)備工作.
• 不能在該方法中使用 this.setState().如果需要更新 state 來響應(yīng)某個(gè) prop 的改變，請使用 componentWillReceiveProps

4. componentDidUpdate(object prevProps, object prevState): 在組件的更新已經(jīng)同步到 DOM中之后立刻被調(diào)用.

• 該方法不會在初始化渲染的時(shí)候調(diào)用。使用該方法可以在組件更新之后操作 DOM 元素。

Unmounting(移除)

1. componentWillUnmount在組件從 DOM 中移除的時(shí)候立刻被調(diào)用

• 在該方法中執(zhí)行任何必要的清理，比如無效的定時(shí)器，或者清除在 componentDidMount 中創(chuàng)建的 DOM 元素.

export default class LifeCycleComponent extends Component{
    constructor(props){ //完成組件的初始化
        super(props);
        console.log('----controuctor----');
    }

    componentWillMount(){
        console.log('----componentWillMount ----');

}
    componentDidMount(){
        console.log('----componentDidMount----');
    }

    componentWillReceiveProps(props){
        console.log('----componentWillReceiveProps----');
    }
    shouldComponentUpdate(nextProps,nextState){
        console.log('----shoudComponentUpdate----');
        return true;
    }
    componentWillUpdate(nextProps,nextState){
        console.log('----componentWillUpdate----');
    }
    componentDidUpdate(nextProps,nextState){
        console.log('----componentDidUpdate----');
    }
    componentWillUnmount(){
        console.log('----componentWillUnmount----');
    }
    render(){
        console.log('----render----');
        return <Text style={{fontSize:20}}>hello.{this.props.name}</Text>
    }
}

image.png

由運(yùn)行結(jié)果可以知道先調(diào)用裝載的componentWillMount和componentDidMount

修改state值

 constructor(props){ //完成組件的初始化
        super(props);
        this.state={
            count : 0,
        }
        console.log('----controuctor----');
    }
  render(){
        console.log('----render----');
        return <View>
            <Text style={{fontSize:20}}
            onPress={()=>{
                this.setState({
                     count:this.state.count+1,
                })
             }}
             >hello</Text>
            <Text style={{fontSize:20}}>點(diǎn)擊了{(lán)this.state.count}次</Text>
        </View>
    }

當(dāng)點(diǎn)擊hello時(shí)修改state會先觸發(fā)shouldComponentUpdate然后在componentWillUpdate最后在componentDidUpdate
如下圖打印結(jié)果

image.png

在App.js文件里修改來模擬移除組件

export default class App extends Component<Props> {
  constructor(props){
    super(props);
    this.state={
      remove:false,
    }
  }
  
  render() {

    var myView = this.state.remove?null:<LifeCycleComponent />;
    var myText = this.state.remove?"添加myView":"移除myView";

    return (
      <View style={styles.container}>
        <Text
            style={{fontSize:20}}
            onPress={()=>{
                this.setState({
                  remove : !this.state.remove
                  })
              }}>{myText}
        </Text>
        {myView}
      </View>
    );
  }
}

點(diǎn)擊移除時(shí)會觸發(fā)componentWillUnmount

image.png