数据获取

React 课程的一部分

真实的应用几乎没有哪个能只靠用户屏幕上已有的数据活下去。总有那么一刻，某个组件需要向服务器要点东西：一份用户列表、某个商品的详情、一页搜索结果。在答案回来之前，有一段时间组件手里什么都没有，而且答案完全有可能因为网络出问题而永远回不来。一个只会渲染“数据”的组件，碰上这两种再平常不过的情况中的任何一种都会垮掉。在 React 里把数据获取做对，意味着诚实地面对一个请求可能处在的全部三种状态，而不只是顺利的那一种，同时还要为那些没能跑完的请求认真收尾。

调用服务器是一次副作用，它伸到了“根据当前的属性和状态算出这个组件的 JSX”这件事之外，和启动定时器、打开一个连接属于同一类。如果你直接在组件主体里调用 fetch，那么每一次渲染它都会触发一遍，包括那些起因跟“需要新数据”毫不相干的渲染；而每一次这样的调用最后又都会去更新状态，于是又引发一次渲染，再引发一次获取。useEffect 正是打断这个循环的东西：它让你可以说“这个调用只做一次，就在组件第一次出现之后”，或者“只有某个特定的值变了才再做一次”，用法和你拿它启动一个时钟、订阅一个窗口事件时一模一样。