React 思考

第一步：将 UI 拆解成数个 component

单一功能原则:在物件导向程式领域中，单一功能原则规定每个类都应该有一个单一的功能，并且该功能应该完全封装起来。所有服务都应该严密的和该功能平行（意味着没有依赖），简单来说就是一个 component应该只负责做一件事情。如果这个 component 最后变大了，就需要再将它分成数个更小的 subcomponent 。

练习範例

FilterableProductTable（橘色）： 包含整个範例SearchBar（蓝色）： 使用者的输入ProductTable（绿色）： 展示并过滤使用者输入的资料ProductCategoryRow（蓝色）： 为每个列别展示标题ProductRow（红色）： 为每个产品展示

Component中表示:

FilterableProductTableSearchBarProductTableProductCategoryRowProductRow

FilterableProductTable:

import React from "react";import SearchBar from "../Components/SearchBar"; //import Componentimport ProductTable from "../Components/ProductTable"; //import Componentclass 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 Componentimport ProductRow from "./Sub_Components/ProductRow"; //import Sub Componentclass 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;