ReactNative的视图刷新机制和React一脉相承，ReactNative通过this.state来访问state，通过this.setState()方法来更新state。当this.setState()方法被调用的时候，ReactNative会重新调用render方法来重新渲染UI。
同步更新可能会失败
这段时间在做项目的时候发现了通过this.setState()更新state延迟的问题，就是当state的值还没更新完毕的时候，这时render方法已经渲染完毕，通过this.state计算的UI状态就会出现错误，特别是当你的视图层级结构非常深的时候这种情况更明显。举个例子，我们希望在从服务端抓取数据并且渲染到界面之后，再隐藏加载进度条或者外部加载提示。
componentDidMount() {
fetch('https://test.com')
.then((res) => res.json())
.then(
(data) => {
this.setState({ data:data });
StatusBar.setNetworkActivityIndicatorVisible(false);
}
);
}
因为 setState 函数并不会阻塞等待状态更新完毕，因此 setNetworkActivityIndicatorVisible 有可能先于数据渲染完毕就执行。
解决方案
我们来看一下React文档中对setState的说明
void setState(
function|object nextState,
[function callback]
)
The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.
翻译一下，第二个参数是一个回调函数，在setState的异步操作结束并且组件已经重新渲染的时候执行。也就是说，我们可以通过这个回调来拿到更新的state的值。
所以上面的代码我们可以这样写，可以实现同步更新。
componentDidMount() {
fetch('https://test.com')
.then((res) => res.json())
.then(
(data) => {
this.setState({ data:data },()=>{
StatusBar.setNetworkActivityIndicatorVisible(false);
});
}
);
}
