（积累）ReactJS一些有趣的地方

生命周期

贴一个简单的代码

var A = React.createClass({
loadFromServer() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
console.log("A loaded getData");
this.setState({data: data});
console.log("A loaded setData");
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount() {
console.log("A DidMount load before");
this.loadFromServer();
console.log("A DidMount load after");
},
componentWillMount() {
console.log("A WillMount");
},
render() {
console.log("A render");
return (
<B />
);
}
)};

var B = React.createClass({
loadFromServer() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
console.log("B loaded getData");
this.setState({data: data});
console.log("B loaded setData");
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount() {
console.log("B DidMount load before");
this.loadFromServer();
console.log("B DidMount load after");
},
componentWillMount() {
console.log("B WillMount");
},
render() {
console.log("B render");
return (
<div></div>
);
}
});

var C = React.createClass({
loadServer() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
console.log("C loaded getData");
this.setState({data: data});
console.log("C loaded setData");
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount() {
console.log("C DidMount load before");
this.loadServer();
console.log("C DidMount load after");
},
componentWillMount() {
console.log("C WillMount");
},
render() {
console.log("C render");
return (
<div></div>
);
}
});

console输出为

A WillMount
A render
B WillMount
B render
C WillMount
C render
C DidMount load before
C DidMount load after
B DidMount load before
B DidMount load after
A DidMount load before
A DidMount load after
C loaded getData
C render
C loaded setData
B loaded getData
B render
C render
B loaded setData
A loaded getData
A render
B render
C render
A loaded setData

componentDidMount很明显的自下向上运行，有趣的一点，setState会立即更新自身及其子类的render然后才执行下一行的console.log，在另一个代码中我尝试26个英文字母的26层嵌套，loaded getData总是在componentDidMount全部执行后才输出，因此可以认为ajax的异步读取（至少success里的）总是要在componentDidMount全部执行后才调用，因此是否所有的服务器数据读取总是要在componentDidMount全部执行后才执行呢，明天或者后天再尝试一下