【React Native学习笔记三】组件的声明周期与通信

一、组件的生命周期

1、生命周期函数介绍：

（1）初始化

【1】constructor

【2】componentWillMount（只执行一次 ）

【3】render

【4】componentDidMount（只执行一次）

（2）运行期

【1】state改变

【2】props变化

（3）结束期

【1】componentWillUnmount

2、定时器程序举例：

class App extends Component {

state = {

count:10

};

//声明周期一

render() {

const {count} = this.state;

return (

{this.state.count}

)

}

//生命周期二

componentDidMount(){

this.timer = setInterval(()=>{

const {count} = this.state;

if(count === 0) {

return clearInterval(this.timer);

}

this.setState({

count:count-1

});

}, 1000);

}

//声明周期三

componentWillUnmount(){

clearInterval(this.timer);

}

}

3、生命周期函数总结

（1）render中只做渲染相关的操作

（2）随组件加载只执行一次的操作，放在WillMount或DidMount中

（3）声明周期函数不能是阻塞的！

（4）记得在willUnmount中销毁定时器和一些订阅事件

（5）props发生变化，使用willReceiveProps来处理

4、注意点：

（1）定时器函数

【1】setTimeout只执行一次

【2】setInterval循环执行

（2）生命周期函数和自定义函数区别

【1】生命周期函数写法：

renderResult=()=>{ }

【2】自定义函数写法：

render() { }

5、如何在render中根据不同条件渲染不同结果？

6、何时用props，何时用state？

（1）子控件中，props可以作为state的初始值

如

在render中，state = {

count: this.props.time

}

此时，传参只是第一次有效。

（2）子控件如何获得变化后的props？

componentWillReceiveProps(nextProps) {

this.setState({

});

}

二、组件间通信

1、父组件向子组件通信、子组件之间通信

（1）注意事项：

【1】父组件以自身的state作为子组件的props；父组件调用setState，于是子组件的props相应变化。

【2】Component中若使用state而不是props渲染，则使用componentWillReceiveProps生命周期函数