可能你已經知道, 在
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
避免 normal
和 fallback
組件耦合
算法
咱們能夠清楚地發現某些服務
的一些報錯
架構
咱們能夠複用報錯
和 fallback
app
接下來, 咱們看一個最森破
的的實例優化
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)