react 生命周期

  • A+
所属分类:React

react 生命周期

getInitialState
⒈用React.createClass创建


const Foo = React.createClass({
	getInitialState(){
		return { name: "LXY" }
	},
	.....
})
export default Foo;

⒉继承自React.Component 在constructor里直接初始化


export default class Test extends Component<TestProps, any>{
	constructor( props: TestProps ){
                 super( props );
                 this.state = { num: 0 };
        }
        .....
}

getDefaultProps
⒈用React.createClass创建


const Foo = React.createClass({
	getDefaultProps(){
		return { name: "LXY" }
	},
	.....
})

⒉继承自React.Component 在组件类里直接静态初始化


export default class Test extends Component<TestProps, any>{
	static defaultProps = {
		  num: 0
  	};
        .....
}

componentWillMount 该钩子函数在组件挂载前执行一次


export default class Test extends Component<TestProps, any>{
	componentWillMount(){
                 console.log( "component will mount!" )
        }
        .....
}

componentDidMount 该钩子函数在组件挂载后执行一次


export default class Test extends Component<TestProps, any>{
	componentDidMount(){
                 console.log( "component mounted!" )
        }
        .....
}

componentWillReceiveProps(props, context) 在shouldComponentUpdate之前执行 组件接受的props改变时触发


export default class Test extends Component<TestProps, any>{
	componentWillReceiveProps(props, context){
                 console.log( "props change!" )
        }
        .....
}

shouldComponentUpdate(nextProps, nextState, context) 在componentWillReceiveProps之后执行 组件props, state改变时触发 可以通过与this.props, this.state比较来决定是否更新状态


export default class Test extends Component<TestProps, any>{
	shouldComponentUpdate(nextProps, nextState, context){
                 if( this.props !== nextProps ) return true;
                 return false;
        }
        .....
}

componentWillUpdate(nextProps, nextState, context) 在shouldComponentUpdate返回TRUE之后 组件render之前执行


export default class Test extends Component<TestProps, any>{
	componentWillUpdate(nextProps, nextState, context){
                 console.log( "component will update!" );
        }
        .....
}

componentDidUpdate 在组件render之后执行


export default class Test extends Component<TestProps, any>{
	componentDidUpdate(){
                 console.log( "component updated!" );
        }
        .....
}

componentWillUnmount 在组件卸载之前执行 可以处理一些回收工作


export default class Test extends Component<TestProps, any>{
	componentWillUnmount(){
                 console.log( "component will unmount!" );
        }
        .....
}
weinxin
我的微信
欢迎来撩!!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: