在 React 16 中使用高階組件來捕獲異常

可能你已經知道, 在 React 16 中, 將會引進一個全新的架構 - React Fiber, 它完全重寫了 React 的協調算法, 並引入了一些新的特性. 這篇文章就是跟你們分享 React 16 中新的生命週期方法 - componentDidCatch, 它能捕獲在子組件樹中任何地方的 JavaScript 異常,並打印這些錯誤和展現備用UI, 就像將 children 包裹在一個大的 try/catch 語句塊中. 你能夠閱讀 Dan Abramov 的 Error Handling in React 16 獲取更多關於 componentDidCatch 的內容.html

圖片描述

絕大多數的開發人員使用 React 16 都應該是由 15 升級上來的, 然而, 爲了使用錯誤處理而去重寫整個組件確定是不明智的, 那麼, 該怎麼辦呢, 固然有更好的處理方式, 那就是想辦法封裝組件, 像修改組件定義那是逼上樑上的行爲.react

那麼, 錯誤處理究竟能夠幹些什麼git

  • 當有錯誤發生時, 咱們能夠友好地展現 fallback 組件github

  • 避免 normalfallback 組件耦合算法

  • 咱們能夠清楚地發現某些服務的一些報錯架構

  • 咱們能夠複用報錯fallbackapp

接下來, 咱們看一個最森破的的實例優化

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 它們this

對此, 咱們可使用高階組件spa

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 (Giorgi Bagdavadze)

相關文章
相關標籤/搜索