React开发进阶实用知识库分享20231212180302.pdfVIP

React开发进阶

目录

React开发进阶

「React进阶」React优雅的捕获并处理渲染异常方式

「React进阶」React全部Hooks使用大全（包含Reactv18版本）

「React进阶」换个姿势看hooks！灵感来源组合和HOC模式下逻辑视图分离新创意

「React18新特性」深入浅出用户体验大师—transition

「React18新特性」深度解读之useMutableSource

「React进阶」一场升级React-Router带来的‘血案’

「React进阶」我在函数组件中可以随便写——最通俗异步组件原理

「React进阶」推荐8个很棒的React工具库，强烈建议收藏～

「React进阶」学好这些React设计模式，能让你的React项目飞起来

React系统复习如何做最高效（8.24直播总结+百道高频面试题整理）

「React进阶」只用两个自定义Hooks就能替代React-Redux?

「React进阶」漫谈React异步组件前世与今生

「React进阶」探案揭秘六种React‘灵异’现象

「react进阶」一文吃透react事件系统原理

「React进阶」React全部api解读+基础实践大全(夯实基础2万字总结)

我在react里写vue3,还写了自定义hooks和Hoc构建了响应式

「react进阶」一文吃透react-hooks原理

「react进阶」一文吃透React高阶组件(HOC)

「源码解析」一文吃透react-redux源码（useMemo经典源码级案例）

「React进阶」React优雅的捕获并处理渲染异常方式

「React进阶」React优雅的捕获并处理渲染异常方式

「React进阶」React优雅的捕获并处理渲染异常方

式

一前言

哈喽，大家好，我是alien,今天来聊一聊在React应用中，如何发现异常并处理异常的。

JSX是优势也是劣势？

在React中，出现一次渲染异常的后果是很严重的。比如如下的场景:

functionComp({data}){

returndiv{data.value}/div

}

/**/

exportdefaultfunctionApp(){

returndiv

divhello/div

Compdata={{value:helloworld}}/

Compdata={{value:}}/

Compdata={null}/

/div

}

如上，在第三个Comp组件渲染的时候，因为data传入的值是null，而在渲染阶段读取了

data下面的属性，这个时候就会报空指针的错误：Cannotreadpropertiesofnull,结果就是

整个页面都白屏。

这样后果是严重的，所以React中要特别注意渲染数据的规范与严谨。

这个问题本质上和React采用JSX语法而并非渲染模版有一定的关系。JSX给React带来很便

利的开发体验，开发者可以借助JSX灵活使用组合模式，renderprops模式，Hoc等各种设计

模式，JSX给开发者带来了很大的发挥空间，但是凡事都有两面性。JSX的灵活性也带来一定的

潜在风险。

Reactjsx在编译阶段，会被babel变成React.Element的形式，它的执行是在React整个渲

染的render阶段执行的，如果React.Element出现了空指针等异常，那么就会中断render阶

段的执行，当然也不会执行渲染真实DOM的commit阶段。所以如果是初次渲染，任何渲染动作

也就不会执行，最终呈现给我们的视图就是白屏。

那么如何处理这个问题呢？

二渲染异常处理

componentDidCatch

第1页/共286页

「React进阶」React优雅的捕获并处理渲染异常方式

还好React中提供了c