前端数据获取(data fetching)
数据管理类库；GraphQL；Suspence；useEffect瀑布流；fetch-on-render,fetch-then-render,render-as-you-fetch模式;
数据获取分类
- 初始数据获取(initial data fetching)
- 按需数据获取(data fetching on demand)
React中，对于初始数据获取，通常在useEffect(或componentDidMount)中来发起这类数据请求
const component = () => {
const [data, setData] = useState()
useEffect(async () => {
// fetch data
const data = await(await fetch('...').json())
// set state when the data received
setState(data)
}, [])
return <>...<>
}
当场景变复杂时，面临的棘手问题：错误处理如何实现？如何处理多个组件从同一个接口获取数据？这些数据是否要缓存？缓存时间是多久？竞态问题(race conditions)如何处理？如果从屏幕上删除组件，该怎么半：取消请求？内存泄露如何解决？
方式1：造轮子
方式2：依靠成熟类库，axios将一些功能进行了抽象和封装，swr能处理几乎所有的事情包括缓存。
应用的性能
如何测量性能？只需测量渲染的耗时，数字越小，性能越好。
数据数据属于典型的异步操作。
React生命周期与数据获取
设计数据请求方案时，要特别注意React生命周期被触发的时机。
const child = () => {
useEffect(() => {
// do something here, like fetching data for the child
}, [])
return <div>Some child</div>
}
const Parent = () => {
// set loading to true initially
const [isLoading, setIseLoading] = useState(true)
if (isLoading) return 'loading'
return <Child />
}
浏览器限制和数据获取
浏览器对相同的host可以处理的并行请求数是有限制的。假设服务器是HTTP1（仍占互联网的70%），在Chrome中，最多只能有6个并行请求。
如果同时发起更多请求，剩下的都必须排队。
经典的请求瀑布流，fetch sidebar -> fetch issue -> fetch components。但这个并不算好方案，效率太低。
解决请求瀑布流的方案
Promise.all
将请求尽可能放在组件树的最顶层。不要使用以下：
// 串行请求
useEffect(async () => {
const sidebar = await fetch('/get-sidebar')
const issue = await fetch('/get-issue')
const comments = await fetch('/get-comments')
}, [])
使用 Promise.all:
// 并发请求
useEffect(async () => {
const [sidebar, issue, comments] = await Promise.all([
fetch('/get-sidebar'),
fetch('/get-issue'),
fetch('/get-comments')
])
}, [])
并发后独立渲染
fetch('/get-sidebar').then(data => data.json()).then(data => setSidebar(data))
fetch('/get-issue').then(data => data.json()).then(data => setIssue(data))
fetch('/get-comments').then(data => data.json()).then(data => setComments(data))
这里要注意，值触发了三次state变化，会引起父组件的三次重新渲染，考虑到这些重新渲染发生在顶层组件，像这样的不必要的重新渲染会引起App中较多的不必要的重新渲染。
抽象封装数据获取（Data providers）
data providers是对数据请求的一种抽象，能让我们在app中的某个地方请求数据，然后在其他地方访问数据，可以绕过中间的所有组件。
本质是为每个请求做一层迷你的缓存。（在原生React中，它是一个context）
const Context = React.createContext()
export const CommentsDataProvider = ({ children }) => {
const [comments, setComments] = useState()
useEffect(async () => {
fetch('/get-comments').then(data => data.json()).then(data => setComments(data));
}, [])
return (
<Context.Provider value={comments}>
{children}
</Context.Provider>
)
}
export const comments = () => useContext(commentsConext)
进一步改造 App:
const App = () => {
const sidebar = useSidebar();
const issue = useIssue();
// show loading state while waiting for sidebar
if (!sidebar) return 'loading'
// no more props drilling for any of those
return (
<>
<Sidebar />
${issue ? <Issue /> : 'loading'}
</>
)
}
用这三个Provider来包裹App组件，只要它们被挂载，就会立即并发请求数据：
export const veryRootApp = () => {
return (
<SidebarDataProvider>
<IssueDataProvider>
<CommentsDataProvider>
<App />
</CommentsDataProvider>
</IssueDataProvider>
</SidebarDataProvider>
)
}
访问 Comments 这种层级较深的组件时，通过 data provider 来访问数据：
const Comments = () => {
// Look! No props drilling!
const comments = useComments();
}
将请求数据独立出来
const commentsPromise = fetch('/get-comments')
const Comments = () => {
...
const data = await (await commentsPromise).json()
...
}
但这种逃离于组件的请求，容易不可控，还存在请求阻塞的风险。
这种方式的适用场景：
- 在路由层预加载一些关键资源
- 在lazy-loaded组件中预请求数据
使用第三方库进行一些简化
const Comments = () => {
const { data } = useSWR('/get-comments', fetcher)
...
}
