（积累）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全部执行后才执行呢，明天或者后天再尝试一下