React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React捕获并处理异常

React捕获并处理异常的方式

作者:我不是外星人

这篇文章主要给大家介绍了React优雅的捕获并处理渲染异常方式,文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

一 前言

今天来聊一聊在 React 应用中,如何发现异常并处理异常的。

JSX 是优势也是劣势?

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

function Comp({ data }){
  return <div>{ data.value }</div>
}
/* 页面 */
export default function App(){
  return <div>
     <div>hello</div>
     <Comp  data={{value:'hello world'}} />
     <Comp  data={{value:'前端跨端开发指南'}} />
     <Comp  data={null} />
  </div>
} 

如上,在第三个 Comp 组件渲染的时候,因为 data 传入的值是 null ,而在渲染阶段读取了 data 下面的属性,这个时候就会报空指针的错误:Cannot read properties of null ,结果就是整个页面都白屏。

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

这个问题本质上和 React 采用 JSX 语法而并非渲染模版有一定的关系。JSX 给 React 带来很便利的开发体验,开发者可以借助 JSX 灵活使用组合模式,render props 模式,Hoc 等各种设计模式,JSX 给开发者带来了很大的发挥空间,但是凡事都有两面性。JSX 的灵活性也带来一定的潜在风险。

React jsx 在编译阶段,会被 babel 变成 React.Element 的形式,它的执行是在 React 整个渲染的 render 阶段执行的,如果 React.Element 出现了空指针等异常,那么就会中断 render 阶段的执行,当然也不会执行渲染真实 DOM 的 commit 阶段。所以如果是初次渲染,任何渲染动作也就不会执行,最终呈现给我们的视图就是白屏。

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

二 渲染异常处理

componentDidCatch

还好 React 中提供了 componentDidCatch 或者 getDerivedStateFromError 生命周期,去挽救由于渲染阶段出现问题造成 UI 界面无法显示的情况。 我们以 componentDidCatch 为例子,看一下它是如何处理的异常。

componentDidCatch 是 React 类组件的生命周期,它接受两个参数:

1 error —— 抛出的错误。 2 info —— 带有 componentStack key 的对象,其中包含有关组件引发错误的栈信息。 先来打印一下,生命周期 componentDidCatch 参数长什么样子。

那么 componentDidCatch 中可以再次触发 setState,来降级 UI 渲染,componentDidCatch 会在 commit 阶段被调用,因此允许执行副作用。我们给上面的例子用类组件和 componentDidCatch 改造,如下:

function Comp({ data }){
  return <div>{ data.value }</div>
}

class CompSafe extends React.Component{
  state = {
    isError:false
  }
  componentDidCatch(){
    this.setState({ isError:true })
  }
  render(){
    const { isError } = this.state
    return isError ? null : <Comp {...this.props} />
  }
}

export default function App(){
  return <div>
     <div>hello</div>
     <CompSafe  data={{value:'hello world'}} />
     <CompSafe  data={{value:'前端跨端开发指南'}} />
     <CompSafe  data={null} />
  </div>
} 

如上,我们将 Comp 组件包装一层,通过 CompSafe 包裹,然后 CompSafe 内容通过 componentDidCatch 来捕获异常,这样就可以将渲染异常产生的影响,由页面维护,降低到了组件维度。其他部分的视图也能够正常渲染了。

但是这样同样暴露出一个问题。就是我们把所有的组件,都像 Comp 一样,在配套一个渲染异常的组件 CompSafe, 那样是不切实际的,所以我们需要一个通用能力,这样就需要一个渲染异常的高级组件来解决。

hoc 高阶组件模式也是 React 比较常用的一种包装强化模式之一,高阶函数是接收一个函数,返回一个函数,而所谓高阶组件,就是接收一个组件,返回一个组件,返回的组件是根据需要对原始组件的强化。

HOC 助力渲染异常组件

我们接下来编写一个通用高阶组件,解决渲染异常。

function SafeCompHoc(Comp) {
  return class CompSafe extends React.Component{
    state = {
      isError:false
    }
    componentDidCatch(){
      this.setState({ isError:true })
    }
    render(){
      const { isError } = this.state
      return isError ? <div>渲染异常</div> : <Comp {...this.props} />
    }
  }
}

const CompSafe = SafeCompHoc(Comp)
export default function App(){
  return <div>
     <div>hello</div>
     <CompSafe  data={{value:'hello world'}} />
     <CompSafe  data={{value:'前端跨端开发指南'}} />
     <CompSafe  data={null} />
  </div>
} 

如上,经过 SafeCompHoc 包装之后的,可以批量处理渲染异常的组件,可能出现渲染异常的核心组件,就可以用 SafeCompHoc 统一处理了。

三 渲染异常监控

渲染监控:

如上通过 HOC 的方式做到了渲染降级,但是如果只做到监控级别,那是远远不够的,我们要做的就是,发现问题,去根本解决问题,这种渲染问题大概率可能是渲染数据结构出现了问题,而数据结构大概率又是后端返回的,所以这个异常本质上很可能是服务端出了问题。

这个时候,发现问题也是非常重要的,那么就需要一个渲染的监控方法。 接下来我们将用context 上下文 + 插槽的方案来实现一个渲染模版监控方案。

渲染插槽+context上下文

技术方案: 核心技术实现:context + 插桩组件

原理图:

介绍完原理来看一下代码的实现:

渲染插桩组件:

import React from 'react'
/* 上下文保存渲染异常状态 */
export const RenderErrorContext = React.createContext()
/* 渲染插桩组件 */
export default function RenderErrorComponent({renderKey}){
    const { setRenderKey } = React.useContext(RenderErrorContext)
    React.useLayoutEffect(()=>{
        /* 渲染正常,上报渲染 key */
        setRenderKey && setRenderKey(renderKey)
    },[])
    return <React.Fragment />
}

如上编写的渲染插桩组件 RenderErrorComponent 和渲染状态上下文 RenderErrorContext ,如果渲染插桩组件正常渲染,那么说明当前组件没有出现渲染异常,接下来需要在 useLayoutEffect 钩子函数里面,上传渲染成功状态。

接下来看一下使用渲染上下文的页面组件。

import React, { useEffect } from 'react'
import { RenderErrorContext } from './renderError'
import Comp from './component/comp1'

/* 模拟的渲染数据 */
const renderList = [
  {
    id:1,
    data: {
      value:'我不是外星人'
    },
  },
  {
    id:2,
    data: {
      value:'大前端跨端开发指南'
    },
  },
  { /* 异常数据 */
    id:3,
    data: null
  }

]

function App() {
  const [list,setList] = React.useState([])
  const renderState = React.useRef({
    errorList:[],
    setRenderKey(id){  //如果渲染成功了,那么将当前 key 移除
      const index = renderState.current.errorList.indexOf(id) 
      renderState.current.errorList.splice(index,1)
    },
    getRenderKey(key){ //这里表示渲染了哪些组件
      renderState.current.errorList.push(key)
    }
  })
  useEffect(()=>{
      /* 记录每一个待渲染的模版 */
      renderList.forEach(item => renderState.current.getRenderKey(item.id))
      setList(renderList)
      /*  验证模版是否正常渲染,如果 errorList 不为空,那么有渲染异常的组件,里面的 item 就是渲染异常的 id */
      setTimeout(()=>{
        console.log('errorList',renderState.current.errorList)
      })
  },[])
  return (
    <RenderErrorContext.Provider value={renderState.current}>
        { list.map(item=><Comp data={item.data} id={item.id}  key={item.id} />) }
    </RenderErrorContext.Provider>
  );
}
export default App;

如上就是页面组件的使用,这里重点介绍一下每一个环节:

接下来看一下渲染插桩组件的使用:

import React from 'react'
import RenderErrorComponent from '../renderError'


function Comp({ data, id }){
    return <div>
         <div>{ data.value } </div>
        <RenderErrorComponent renderKey={id} />
    </div>
}

function ErrorHandle (Component){
    return class Wrap extends  React.Component{
        state = {
            isError:false
        }
        componentDidCatch(){
            this.setState({isError : true })
        }
        render(){
           const { isError } = this.state
           return  isError ? null : <Component {...this.props}  />
        }
    }
}

export default ErrorHandle(Comp) 

如上当渲染 Comp 组件的时候,如果 data 为 null, 那么肯定会报出渲染异常,这个时候页面都不会正常显示,为了能够让页面正常展示,我们用一个错误处理组件 ErrorHandle 来防止白屏情况发生。

看一下效果:

如上页面能够正常渲染,从渲染异常列表里,能够查询到渲染异常的组件 id=3,预期达成。

四 总结

以上就是React捕获并处理异常的方式的详细内容,更多关于React捕获并处理异常的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文