我自认不比写 React 的人更懂 React ,因此相关的哲学理念层面上的思考、相比传统方式的优劣的讨论我就不献丑了,请大家自行阅读这篇 官方文档 ,这篇文章只介绍 react-cache
的使用方式和原理。
Suspense
相信做过 React 代码分割的同学基本上对 Suspense
都比较了解,但是 Suspense
其实并不是局限于加载异步组件,而是有着一种更通用的范围。为了更好的理解 react-cache
的原理,我们事先需要了解 Suspense
的运作流程。
错误边界(Error Boundaries)
Suspense
的底层实现依赖于 错误边界(Error Boundaries)
组件,从描述中我们知道, 错误边界
是一种组件,生成一个 错误边界
组件也很容易,任何实现了 static getDerivedStateFromError()
静态方法的 class 组件 就是一个 错误边界
组件。
错误边界
组件的主要作用在于, **错误边界
组件能够捕获子组件(不包括自身) throw
出的 Error
** ,如以下示例
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染能够显示降级后的 UI
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// 你同样可以将错误日志上报给服务器
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
// 你可以自定义降级后的 UI 并渲染
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
错误边界
使我们在子组件树崩溃时,可以渲染 备用UI 而非 错误UI,那么这又和 Suspense
有什么关系呢?
刚才我们说了 错误边界
组件能够捕获子组件(不包括自身) throw
出的 Error
****,这句话其实并不是完全正确,应该是 错误边界
组件能够捕获子组件(不包括自身) throw
出的 任何东西 。可以将 Suspense
当做一种特殊 错误边界
组件,当 Suspense
捕获到子组件抛出的时 Promise
时会暂时挂起 Promise
渲染 fallback
UI ,