React： Component Lifecycle

Creation Lifecycle

contructor时需要调用 super()；

Creation lifecycle：Can’t cause side effect

Constructor(props)getDerivedStateFromProps(props,state)render()Render Child Components

life cycle finished： Can cause side effect

componentDidMount()

Constructor

constructor(props){ super(props); //继承component的步骤 console.log('constructor'); this.state={ persons:[ {id:'asfa1', name:'Max' , age:28}, {id:'asfa2', name:'manu' , age:24}, {id:'asfa3', name:'Snie' , age:26} ], isshow:false } }

新版本react：state可以不在contructor中

constructor(props){ super(props); //继承component的步骤 console.log('constructor'); } state={ persons:[ {id:'asfa1', name:'Max' , age:28}, {id:'asfa2', name:'manu' , age:24}, {id:'asfa3', name:'Snie' , age:26} ], isshow:false };

contructor-> getDerivedStateFromProps->render->willmount->didmount

constructor(props){ super(props); //继承component的步骤 console.log('constructor'); }; state={ persons:[ {id:'asfa1', name:'Max' , age:28}, {id:'asfa2', name:'manu' , age:24}, {id:'asfa3', name:'Snie' , age:26} ], isshow:false }; static getDerivedStateFromProps(props,state) //要加static { console.log('getDerivedstateFromProps',props); return state; }; componentWillMount(){ console.log(123); }; componentDidMount(){ console.log('Compnent did mount '); };

---

Update Lifecycle

不可调用side effect

getDerivedStateFromProps(props,state)shouldComponentUpdate(nextProps,nextSteps)render()update child component propsgetSnapshowBeforeUpdate(prevProps,prevStates)

可调用side effect 6. componentDidUpdate()

class Persons extends Component{ // static getDerivedStateFromProps(props,state){ // console.log('[Persons.js] getDerivedStateFromProps run'); // return state; // } //不建议使用 // componentWillReceiveProps(props){ // }; // componentWillUpdate(props){ // }; shouldComponentUpdate(nextProps,nextState){ console.log('[Persons.js] shouldComponentUpdate'); return true; } getSnapshotBeforeUpdate(prevProps,prevState){ console.log('[Persons.js] getSnapshowBeforeUpdate'); return {message:'snapshot!'}; } //然后render componentDidUpdate(prevProps,prevStates,snapshot){ console.log('[Persons.js] componentDidUpdate'); console.log(snapshot); } render(){ console.log('persons rendering...'); return this.props.persons.map((person,index)=>{ return ( <Person name={person.name} age={person.age} click={()=>this.props.clicked(index)} key={person.id} changed={(event)=>this.props.changed(event,person.id)} /> ) }) }} ;

update可用于props的变化和state的变化

constructor(props){ super(props); //继承component的步骤 console.log('constructor'); }; state={ persons:[ {id:'asfa1', name:'Max' , age:28}, {id:'asfa2', name:'manu' , age:24}, {id:'asfa3', name:'Snie' , age:26} ], isshow:false }; static getDerivedStateFromProps(props,state) //要加static { console.log('getDerivedstateFromProps',props); return state; }; // componentWillMount(){ // console.log(123); // }; componentDidMount(){ console.log('[App].js Compnent did mount '); }; shouldComponentUpdate(nextProps,nextStates){ console.log('[App].js shouldComponentUpdate'); return true; } componentDidUpdate(){ console.log('[App].js component did update'); }