React异步渲染组件，如何设置Loading效果？

渲染某个页面（组件），用到的数据需要通过ajax向后台获取，ajax方法一般写在componentDidMount里面，如果不做任何处理，请求数据之后会有一个rerender的过程，导致数据的展现很生硬。

我想在数据加载完成之后再显示这个页面，加载之前，设置个loading效果，代码如下：

class Profile extends Component {

  constructor(props) {

    super(props);

    this.state = {

      loading: true

    };

  }

  componentDidMount() {

    // 数据异步请求，请求成功之后setState

    this.setState({

      loading: false

    })

  }

  render() {

    return (

      <div>

        {

          this.state.loading

          ? <div>加载中。。。</div>

          : <div>页面内容</div>

        }

      </div>

    )

  }

}