Error Boundaries是这么实现的,还挺巧妙
SegmentFault
共 4470字,需浏览 9分钟
·
2021-12-10 14:59
作者:卡颂
简介:《React技术揭秘》作者
来源:SegmentFault 思否社区
触发更新
render阶段:计算更新会造成的副作用
commit阶段:在宿主环境执行副作用
插入DOM节点
执行useEffect回调
什么是Error Boundaries
getDerivedStateFromError:静态方法,当错误发生后提供一个机会渲染fallback UI
componentDidCatch:组件实例方法,当错误发生后提供一个机会记录错误信息
render阶段
commit阶段
class ErrorBoundary extends Component {
componentDidCatch(e) {
console.warn(“发生错误”, e);
}
render() {
return <div>{this.props.children}</div>;
}
}
const App = () => (
<ErrorBoundary>
<A><B/></A>
<C/>
<ErrorBoundary>
)
步骤1:捕获错误
do {
try {
// 对于并发更新则是workLoopConcurrent
workLoopSync();
break;
} catch (thrownValue) {
handleError(root, thrownValue);
}
} while (true);
componentDidMount/Update执行
绑定/解绑ref
useEffect/useLayoutEffect callback与destroy执行
try {
// …执行某项工作
} catch (error) {
captureCommitPhaseError(fiber, fiber.return, error);
}
步骤2:构造callback
如果存在Error Boundaries,执行对应API
抛出React的提示信息
如果不存在Error Boundaries,抛出未捕获的错误
用于执行Error Boundaries API的callback
用于抛出React提示信息的callback
// ...为了可读性,逻辑有删减
function createClassErrorUpdate() {
if (typeof getDerivedStateFromError === 'function') {
// 用于执行getDerivedStateFromError的callback
update.payload = () => {
return getDerivedStateFromError(error);
};
// 用于抛出React提示信息的callback
update.callback = () => {
logCapturedError(fiber, errorInfo);
};
}
if (inst !== null && typeof inst.componentDidCatch === 'function') {
// 用于执行componentDidCatch的callback
update.callback = function callback() {
this.componentDidCatch(error);
};
}
return update;
}
用于抛出未捕获错误的callback 用于抛出React提示信息的callback
// ...为了可读性,逻辑有删减
funffction createRootErrorUpdate() {
// 用于抛出“未捕获的错误”及“React的提示信息”的callback
update.callback = () => {
onUncaughtError(error);
logCapturedError(fiber, errorInfo);
};
return update;
}
执行callback
对于ClassComponent, this.setState(newState, callback)中newState和callback参数都能传递Function作为callback
this.setState(() => {
// 用于执行getDerivedStateFromError的callback
}, () => {
// 用于执行componentDidCatch的callback
// 以及 用于抛出React提示信息的callback
})
对于根节点,执行ReactDOM.render(element, container, callback)中callback参数能传递Function作为callback
ReactDOM.render(element, container, () => {
// 用于抛出“未捕获的错误”及“React的提示信息”的callback
})
总结
评论