處理 React 組件的載入、空白、錯誤狀態渲染

更好的組件狀態指示 = 更快樂的用戶

整體概況

在 React 開發中，我們經常面臨處理數據驅動組件不同狀態的問題。在大多數情況下，這些狀態包括：

• 理想狀態。 組件的正常路徑，一切都很順利。
• 載入狀態。組件顯示一些內容來表示它正在載入。
• 錯誤狀態。組件顯示出現了問題。
• 空白狀態。組件顯示一些內容來表示它是空的。

對於這些組件，你希望根據組件的狀態向用戶顯示適當的提示。代碼可能看起來像以下這樣：

container.js

import MyComponent from 'path/to/my/component'
import ErrorHint from 'path/to/error/hint'
import LoadingSpinner from 'path/to/loading/spinner'
import EmptyHint from 'path/to/empty/hint'

class Container extends React.Component {
  render() {
    return (
      // ...
      {
        isComponentError
        ? <ErrorHint />
        : isLoading
          ? <LoadingSpinner />
          : data.length > 0
            ? <MyComponent data={ data } />
            : <EmptyHint />
      }
      // ...
    )
  }
}

問題所在

上面的代碼並不理想，因為

1. 嵌套三元運算符。如果有幾個組件都實現了這種邏輯，就不容易一眼就理解。
2. 分散的邏輯。這種類似的邏輯可以泛化並在單一地方處理，而不是分散在整個代碼庫中。
3. 冗長的導入。如果 <ErrorHint />、<LoadingSpinner />、<EmptyHint /> 在整個專案中都是相同的，你仍然必須將它們全部導入到使用它們的地方。這使得代碼更加冗長。
4. 較低的內聚性。如果 <ErrorHint />、<LoadingSpinner />、<EmptyHint /> 是組件特定的，那麼為了更高的內聚性，它們應該位於 component.js 中而不是在 container.js 中。

為了解決這些問題，我認為 Provider Pattern 會是一個好的解決方案。Provider 提供全域的載入、空白、錯誤組件，並使用 Higher-Order-Component 來包裝你想要實現渲染邏輯的組件。如下所示：

index.js

<RenderCtrlProvider
  ErrorComponent={() => <div>預設錯誤提示</div>}
  EmptyComponent={() => <div>預設空白提示</div>}
  LoadingComponent={() => <div>預設載入提示</div>}
>
  <YourApp />
</RenderCtrlProvider>

YourComponent.js

class YourComponent extends Component {
  //...
}

export default withRenderCtrl(YourComponent, {
  // 此組件的自訂載入
  LoadingComponent: () => <div>我正在載入</div>,
})

container.js

class Container extends Component {
  // ...
  render() {
    return (
      // ...
      <YourComponent
        isError={isComponentError}
        isLoading={isLoading}
        isDataReady={data.length > 0} // 或其他表示數據已準備好的邏輯
        // "YourComponent" 的其他 props...
      />
      // ...
    )
  }
}

一個 npm 套件

react-render-ctrl 緩解了我們上面提到的問題。它基於以下渲染邏輯實現了模式：

灰色背景的方框是組件

實現細節可以在專案的 src 資料夾中找到。

如果你必須在整個專案中處理組件的不同狀態，你可以試試看 :)

結論

Provider Pattern 和 Higher-Order-Component 提供了一個關於組件渲染邏輯應該是什麼樣子的介面，以簡化我們處理不同 UI 狀態的方式。如果你對讓渲染流程邏輯更靈活或更通用有不同的想法，請與我分享，謝謝！