一、组件的生命周期
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生命周期函数
网友评论