javascript - react lifecycle methods understanding -

i newbie react.js , trying hard understand several methods in react lifecycle methods.

so far, still have confuses me:

1)

as far understanding, difference between componentwillupdate , componentwillreceiveprops componentwillreceiveprops called when parent change props , can use setstate (setstate of child inside componentwillreceiveprops).

for example: https://github.com/bgerm/react-table-sorter-demo/blob/master/jsx/app.jsx

var app = react.createclass({   getinitialstate: function() {     return {source: {limit: "200", source: "source1"}};   },   handlesourcechange: function(source) {     this.setstate({source: source});   },   render: function() {     return (       <div>         <datasourceselectors onsourcechange={this.handlesourcechange} source={this.state.source} />         <tablesorter datasource={urlfordatasource(this.state.source)} config={config} headerrepeat="5" />       </div>     );   } }); 

in tablesorter, have

componentwillreceiveprops: function(nextprops) {     // load new data when datasource property changes.     if (nextprops.datasource != this.props.datasource) {       this.loaddata(nextprops.datasource);     }   } 

meaning when change this.state.source, expect componentwillreceiveprops called in tablesorter

however, don't quite understand how use componentwillupdate in case, definition of componentwillupdate

componentwillupdate(object nextprops, object nextstate) 

how can pass nextstate parent child? or maybe wrong, nextstate passed parent element ?

2) method componentwillmount confuses me because in official document, says

invoked once, both on client , server, before initial rendering occurs.

in case, if use setstate in method, overrides getinitialstate since called once on initial. in case, reason set parameters in getinitialstate method. in particular case, have

  getinitialstate: function() {     return {       items: this.props.initialitems || [],       sort: this.props.config.sort || { column: "", order: "" },       columns: this.props.config.columns     };   },   componentwillmount: function() {     this.loaddata(this.props.datasource);   },   loaddata: function(datasource) {     if (!datasource) return;      $.get(datasource).done(function(data) {       console.log("received data");      this.setstate({items: data});      }.bind(this)).fail(function(error, a, b) {       console.log("error loading json");      });   }, 

items overrode , why still need items: this.props.initialitems || [] int getinitialstate method?

hope can understand explanation, , please give me hints if have any. many :)

1) componentwillreceiveprops called before componentwillupdate in react's update lifecycle. right componentwillreceiveprops allows call setstate. on other hand componentwillupdate callback use when need respond state change.

the fundamental difference between props , state state private component. that's why neither parent component or else can manipulate state (e.g. call setstate) of component. default workflow parent-child component relationship following:

• parent passes new props child
• child handles new props in 'componentwillreceiveprops', calls setstate if necessary
• child handles new state in 'componentwillupdate' - if component stateful, handling props in 'componentwillreceiveprops' enough.

2) provided quite code example illustrate difference. default values set in getinitialstate used initial rendering. loaddata call componentwillmount initiate ajax request may or may not succeed - unknown how long take complete. time ajax request completes , setstate called new state, component rendered in dom default values. why makes total sense provide default state in getinitialstate.

note: found understanding react component lifecycle article huge understanding react's lifecycle methods.