在 React 16 中使用高阶组件来捕获异常

可能你已经知道, 在 React 16 中, 将会引进一个全新的架构 - React Fiber, 它彻底重写了 React 的协调算法, 并引入了一些新的特性. 这篇文章就是跟大家分享 React 16 中新的生命周期方法 - componentDidCatch, 它能捕获在子组件树中任何地方的 JavaScript 异常,并打印这些错误和展示备用UI, 就像将 children 包裹在一个大的 try/catch 语句块中. 你可以阅读 Dan Abramov 的 Error Handling in React 16 获取更多关于 componentDidCatch 的内容.

绝大多数的开发人员使用 React 16 都应该是由 15 升级上来的, 然而, 为了使用错误处理而去重写整个组件肯定是不明智的, 那么, 该怎么办呢, 当然有更好的处理方式, 那就是想办法封装组件, 像修改组件定义那是逼上梁上的行为.

那么, 错误处理究竟可以干些什么

  • 当有错误发生时, 我们可以友好地展示 fallback 组件
  • 避免 normalfallback 组件耦合
  • 我们可以清楚地发现某些服务的一些报错
  • 我们可以复用报错fallback

接下来, 我们看一个最森破的的实例

class ErrorHandler extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
      logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

// Then you can use it as a regular component
const MyPage = props => (
  <Container>
    <ErrorHandler>
      <MyComponent />

      <MyOtherComponent />
    </ErrorHandler>
  </Container>
)

其实, 我们还可以将其优化一下, 比如将 ErrorHandler 参数化, 将 reportErrorToService 作为 props 传递, 用 component 替代 上面返回的几行视图代码. 所以, 我们还是要更新我们的组件定义, 以便将 UI 的一部分添加 ErrorHandler 中. 但正如我们之前所讨论的, 我们并不想修改组件的定义, 我们只 decorate 它们

对此, 我们可以使用高阶组件

const MyFallbackComponent = props => (
  <h1>Something Went Wrong</h1>
)

// we'll talk about `withErrorHandler` later
const MyErrorHandler = withErrorHandler(
  reportErrorToService,
  MyFallbackComponent
)

const MyComponent = MyErrorHandler(props => (
  /* ... */
))

const MyOthercomponent = MyErrorHandler(props => (
  /* ... */
))

const MyPage = props => (
  <Container>
    <MyComponent />

    <MyOtherComponent />
  </Container>
)

我们可以使用 withErrorHandler HOC 来封装组件, 使组件获得错误处理, 即当错误发生时, 调用 reportErrorToService 并展示 fallback 组件, 从而, 我们帅气地避免了大量组件的定义修改

然而, 我们还可以更帅气. 当服务报错跟 fallback 组件的视图都基本相同时, 我们可以像下样一样 export withErrorHandler HOC

import withErrorHandler from 'error-handler-hoc'

import reportErrorToService from '../services/errorReporter'
import FallbackView from '../components/Fallback/'

export default withErrorHandler(
  reportErrorToService,
  FallbackView
)

然后, 我们 export 封装过后的组件就可以了

// MyComponent.jsx
import ErrorHandler from '../HOCs/ErrorHandler.js'

const MyComponent = props => (
  /* ... */
)

export default ErrorHandler(MyComponent)

// ====================
// MyOtherComponent.jsx
import ErrorHandler from '../HOCs/ErrorHandler.js'
import ...

const MyOtherComponent = props => (
  /* ... */
)

// you might already be using HOCs
export default compose(
  SomeOtherHOC,
  ErrorHandler
)(MyOtherComponent)

// ====================
// MyPage.jsx
import { MyComponent, MyOtherComponent } from './components'

const MyPage = () => (
  <Container>
    <MyComponent />
    <MyOtherComponent />
  </Container>
)

这样, 我们就可以轻松地给组价添加错误处理, 同样, 我们也可以轻松地移除

那么, withErrorHandler 究竟是如何工作的呢, 其实, 实现它还是挺简单的

function withErrorHandler (errorCallback, FallbackComponent, Component) {
  class WithErrorHandler extends React.Component {
    constructor () {
      super()

      // Construct the initial state
      this.state = {
        hasError: false,
        error: null,
        errorInfo: null
      }
    }

    componentDidCatch (error, info) {
      // Update state if error happens
      this.setState({ hasError: true, error, errorInfo: info })

      // Report errors
      errorCallback(error, info, this.props)
    }

    render () {
      // if state contains error we render fallback component
      if (this.state.hasError) {
        const { error, errorInfo } = this.state
        return (
          <FallbackComponent
            {...this.props}
            error={error}
            errorInfo={errorInfo}
          />
        )
      }

      return <Component {...this.props} />
    }
  }
  WithErrorHandler.displayName = `withErrorHandler(${Component.displayName})`
  return WithErrorHandler
}

总结

这个高阶组件可以用来封装任何组件, 捕获所有异常, 你可以用其封装整个 page, 也可以用其封装个别组件.

点击该 repository 可以查看更多源码

原文链接: Catching exceptions using Higher Order Components in React 16

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容