React生命周期
发布时间:2020-12-15 20:37:20 所属栏目:百科 来源:网络整理
导读:react生命周期 class Counter extends React.Component { static defaultProps = { name:‘plus‘ } constructor(props){ super(props) this.state = { number:0 } console.log(‘构造函数‘) } componentWillMount(){ console.log(‘组件将要加载‘) } comp
react生命周期class Counter extends React.Component { static defaultProps = { name:‘plus‘ } constructor(props){ super(props) this.state = { number:0 } console.log(‘构造函数‘) } componentWillMount(){ console.log(‘组件将要加载‘) } componentDidMount(){ console.log(‘组件挂载完成‘) } handleClick = () => { this.setState({ number:this.state.number+1 }) } shouldComponentUpdate(nextProps,nextState){ console.log(‘组件是否更新‘) return nextState.number % 2 ///如果此函数种返回了false 就不会调用render方法了 } componentWillUpdate(){ console.log(‘组件将要更新‘) } componentDidUpdate(){ console.log(‘组件更新完成‘) } render(){ console.log(‘render‘) return ( <div> <p>{this.state.number}</p> {this.state.number > 3 ? null :<ChildCounter n={this.state.number}/>} <button onClick={this.handleClick}>+</button> </div> ) } } class ChildCounter extends React.Component{ componentWillUnMount(){ console.log(‘组件将要卸载componentWillUnmount‘) } componentWillMount(){ console.log(‘child componentWillMount‘) } render(){ console.log(‘child-render‘) return (<div> {this.props.n} </div>) } componentDidMount(){ console.log(‘child componentDidMount‘) } componentWillReceiveProps(newProps){ // 第一次不会执行,之后属性更新时才会执行 console.log(‘child componentWillReceiveProps‘) } shouldComponentUpdate(nextProps,nextState){ return nextProps.n % 3; //子组件判断接收的属性 是否满足更新条件 为true则更新 } } ReactDOM.render(<Counter/>,document.getElementById(‘root‘)) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |