react页面数据过多怎么办_react异步处理多次渲染的解决方案

react的组件有一个非常烦的操作，就是异步数据渲染。页面第一次打开的时候，会去mount所有的组件，但是，这个时候往往都是没有数据的，特别是通过数据驱动的SPA。大部分的方案都是在componentDidMount中请求数据，得到数据后调用this.setState更新数据。这个方案对于单个组件是没有问题的，但是，当数据来源不同，有一部分来自父组件，有一部分来自自身，就比较麻烦。有这么一个场景，父组件请求完数据之后，调用自己的setState，导致子组件界面重新渲染了，子组件此时请求数据后也setState，导致自己的界面重新渲染，这时没有父组件任何事。但是麻烦的事情接着来了，子组件自己请求数据重新渲染之后，父组件再次请求数据，虽然父组件并没有修改子组件的props，但还是导致子组件重新渲染，这时，子组件上一次请求的数据导致的渲染结果会被清空，整个子组件全部重绘了。实际上，我们希望保持子组件自己更新后的状态，并和父组件传来的props有一个merge的过程。

这种情况的大部分解决方案，是禁止子组件自己请求数据，请求数据由父组件全权代理，通过父组件的setState更新子组件的props，在子组件的componentWillReceiveProps中去更新子组件的state来达到更新子组件的视图的目的。

但是，如果我不打算采用这个方案，那么该怎么办？

还是有办法的，关键在于子组件的componentWillReceiveProps和shouldComponentUpdate。

第一个想法是只通过shouldComponentUpdate进行控制：