React 思考

第一步：將 UI 拆解成數個 component

單一功能原則:在物件導向程式領域中，單一功能原則規定每個類都應該有一個單一的功能，並且該功能應該完全封裝起來。所有服務都應該嚴密的和該功能平行（意味著沒有依賴），簡單來說就是一個 component應該只負責做一件事情。如果這個 component 最後變大了，就需要再將它分成數個更小的 subcomponent 。

練習範例

• FilterableProductTable（橘色）： 包含整個範例
• SearchBar（藍色）： 使用者的輸入
• ProductTable（綠色）： 展示並過濾使用者輸入的資料
• ProductCategoryRow（藍色）： 為每個列別展示標題
• ProductRow（紅色）： 為每個產品展示

Component中表示:

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

FilterableProductTable:

import React from "react";
import SearchBar from "../Components/SearchBar"; //import Component
import ProductTable from "../Components/ProductTable"; //import Component

class FilterableProductTable extends React.Component
{
    render()
    {
        return(
            <React.Fragment>
                <SearchBar />
                <ProductTable />
            </React.Fragment>
        )
    }
}

export default FilterableProductTable;

SearchBar :

import React from "react"

class SearchBar extends React.Component
{
    render()
    {
        return (
            <div>SearchBar Component</div>
        )
    }
}

export default SearchBar;

ProductTable :

import React from "react";
import ProductCategoryRow from "./Sub_Components/ProductCategoryRow"; //import Sub Component
import ProductRow from "./Sub_Components/ProductRow"; //import Sub Component

class ProductTable extends React.Component
{
    render()
    {
        return (
            <React.Fragment>
                <ProductCategoryRow />
                <ProductRow />
            </React.Fragment>
        )
    }
}

export default ProductTable;

ProductCategoryRow :

import React from "react"

class ProductCategoryRow extends React.Component
{
    render()
    {
        return (
            <div>ProductCategoryRow Component</div>
        )
    }
}

export default ProductCategoryRow;

ProductRow :

import React from "react"

class ProductRow extends React.Component
{
    render()
    {
        return (
            <div>ProductRow Component</div>
        )
    }
}

export default ProductRow;