理解React组件的生命周期
理解React组件的生命周期本文作者写作的时间较早,所以里面会出现很多的旧版ES5的时代的方法。不过,虽然如此并不影响读者理解组件的生命周期。反而是作者分为几种不同的触发机制来解释生命周期的各个方法,让读者更加容易理解涉及到的概念。以下是正文。 简介
理解组件的生命周期,你才可以在组件创建、销毁的时候执行特定的方法。甚至于,你可以决定是否更新组件,正确的处理 生命周期要弄清楚生命周期,首先就要区分开初次创建和 初始化
在ES6里,initial props在类的 class DemoComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
initialState: 'value',}
this._innerMethod = this._innerMethod.bind(this)
}
}
当 State改变引发的绘制
shouldComponentUpdate(nextProps,nextState) {
return true
}
通过对
componentWillUpdate(nextProps,nextState) {
// 为接下来的绘制做准备
}
componentDidUpdate(prevProps,prevState) {
//
}
Props改变引发的绘制任何对props对象的修改也会触发生命周期方法的调用,这个过程和state的修改引发的生命周期方法基本一致,只是多了一个方法。
componentWillReceiveProps(nextProps) {
this.setState({
// 设置state
})
}
其他的生命周期基本上和改变state引起的生命周期方法是一样的。 卸载
我们唯一没有触及的方法就是 原文地址:http://busypeoples.github.io/post/react-component-lifecycle/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |