理想情況下，項(xiàng)目擁有無(wú)限資源和時(shí)間。團(tuán)隊(duì)將使用經(jīng)過(guò)深思熟慮且高度優(yōu)化的 UX 設(shè)計(jì)開(kāi)始編碼。開(kāi)發(fā)人員之間將就最佳樣式方法達(dá)成共識(shí)。團(tuán)隊(duì)中將有一位或多位 CSS 專(zhuān)家，他們可以確保功能和樣式可以同時(shí)推出，而不會(huì)變成一團(tuán)糟。

我確實(shí)在大型企業(yè)環(huán)境中見(jiàn)過(guò)這種情況。這是一件美好的事情。本文不適用于這些人。

另一方面，小型初創(chuàng)公司資金為零，只有一到兩位前端開(kāi)發(fā)人員，而且展示某些功能的時(shí)間非常短。它不必看起來(lái)完美，但至少應(yīng)該在臺(tái)式機(jī)、平板電腦和移動(dòng)設(shè)備上合理地呈現(xiàn)。這使他們能夠?qū)⑵湔故窘o顧問(wèn)和早期用戶(hù)；甚至可能是對(duì)該概念表示感興趣的潛在投資者。一旦他們從銷(xiāo)售和/或投資中獲得一些現(xiàn)金流，他們就可以獲得專(zhuān)門(mén)的 UX 設(shè)計(jì)師并改進(jìn)界面。

以下內(nèi)容適用于后一組人員。

項(xiàng)目啟動(dòng)會(huì)議

讓我們發(fā)明一家公司來(lái)啟動(dòng)項(xiàng)目。

Solar Excursions 是一家小型旅行社，旨在服務(wù)于近未來(lái)蓬勃發(fā)展的太空旅游業(yè)。

我們的小型開(kāi)發(fā)團(tuán)隊(duì)已同意將 React 用于 UI。我們的一位前端開(kāi)發(fā)人員非常喜歡 Sass，而另一位則迷戀于 JavaScript 中的 CSS。但是他們很難完成最初的沖刺目標(biāo)；當(dāng)然沒(méi)有時(shí)間爭(zhēng)論最佳的樣式方法。兩位編碼員都同意，從長(zhǎng)遠(yuǎn)來(lái)看，選擇并不重要，只要它得到一致執(zhí)行即可。他們確信，現(xiàn)在在壓力下從頭開(kāi)始實(shí)現(xiàn)樣式將導(dǎo)致技術(shù)債務(wù)，以后必須清理。

經(jīng)過(guò)一番討論，團(tuán)隊(duì)選擇規(guī)劃一個(gè)或多個(gè)“樣式重構(gòu)”沖刺?，F(xiàn)在，我們將專(zhuān)注于使用 React-Bootstrap 在屏幕上顯示一些內(nèi)容。這樣，我們就可以快速構(gòu)建有效的桌面和移動(dòng)布局，而無(wú)需大費(fèi)周章。

在前端樣式上花費(fèi)的時(shí)間越少越好，因?yàn)槲覀冞€需要將 UI 連接到我們的后端開(kāi)發(fā)人員將要推出的服務(wù)。而且，隨著我們的應(yīng)用程序架構(gòu)開(kāi)始成形，兩位前端開(kāi)發(fā)人員都同意對(duì)其進(jìn)行單元測(cè)試非常重要。他們有很多事情要做。

根據(jù)我與當(dāng)權(quán)者的討論，作為一名專(zhuān)門(mén)的項(xiàng)目經(jīng)理，我至少在 Balsamiq 上辛苦工作了十分鐘，為團(tuán)隊(duì)提供了臺(tái)式機(jī)和移動(dòng)設(shè)備上預(yù)訂頁(yè)面的模型。我認(rèn)為他們將在中間滿(mǎn)足平板電腦的要求，并且看起來(lái)很合理。

第零次沖刺：審查會(huì)議

到處都是比薩餅！團(tuán)隊(duì)非常努力地實(shí)現(xiàn)了其目標(biāo)，我們現(xiàn)在有一個(gè)布局近似于模型的預(yù)訂頁(yè)面。服務(wù)的架構(gòu)正在形成，但在我們可以將其連接到 UI 之前還有很長(zhǎng)的路要走。在此期間，前端開(kāi)發(fā)人員正在使用硬編碼的模擬數(shù)據(jù)結(jié)構(gòu)。

以下是我們迄今為止的 UI 代碼：

這都是簡(jiǎn)單的 React。我們正在使用一些 Hooks 熱門(mén)技術(shù)，但對(duì)你們大多數(shù)人來(lái)說(shuō)，這可能已經(jīng)過(guò)時(shí)了。

需要注意的關(guān)鍵要點(diǎn)是，我們的五個(gè)應(yīng)用程序組件中有四個(gè)導(dǎo)入并使用了來(lái)自 react-bootstrap 的組件。只有主要的 App 組件不受影響。這是因?yàn)樗皇鞘褂梦覀兊淖远x組件組合頂級(jí)視圖。

<code>// App.js imports
import React, { useState } from "react";
import Navigation from "./Navigation";
import Page from "./Page";

// Navigation.js imports
import React from "react";
import { Navbar, Dropdown, Nav } from "react-bootstrap";

// Page.js imports
import React from "react";
import PosterCarousel from "./PosterCarousel";
import DestinationLayout from "./DestinationLayout";
import { Container, Row, Col } from "react-bootstrap";

// PosterCarousel.js imports
import React from "react";
import { Alert, Carousel, Image } from "react-bootstrap";

// DestinationLayout.js imports
import React, { useState, useEffect } from "react";
import {
  Button,
  Card,
  Col,
  Container,
  Dropdown,
  Jumbotron,
  ListGroup,
  Row,
  ToggleButtonGroup,
  ToggleButton
} from "react-bootstrap";</code>

使用 Bootstrap 快速行動(dòng)的決定使我們能夠?qū)崿F(xiàn)沖刺目標(biāo)，但我們已經(jīng)在積累技術(shù)債務(wù)。這只是四個(gè)受影響的組件，但隨著應(yīng)用程序的增長(zhǎng)，很明顯，我們計(jì)劃的“樣式重構(gòu)”沖刺將變得越來(lái)越困難。我們甚至沒(méi)有對(duì)這些組件進(jìn)行太多自定義。一旦我們擁有數(shù)十個(gè)組件，所有組件都使用 Bootstrap 并使用大量?jī)?nèi)聯(lián)樣式來(lái)美化它們，將它們重構(gòu)以刪除 react-bootstrap 依賴(lài)項(xiàng)將是一個(gè)非?？膳碌闹鲝?。

與其構(gòu)建更多預(yù)訂管道頁(yè)面，團(tuán)隊(duì)決定我們將花費(fèi)下一個(gè)沖刺來(lái)隔離自定義組件工具包中的 react-bootstrap 使用情況，因?yàn)槲覀兊姆?wù)仍在構(gòu)建中。應(yīng)用程序組件將僅使用此工具包中的組件。這樣，當(dāng)我們從 react-bootstrap 中分離出來(lái)時(shí)，這個(gè)過(guò)程就會(huì)容易得多。我們不必在整個(gè)應(yīng)用程序中重構(gòu)三十個(gè) react-bootstrap Button 的用法，我們只需重寫(xiě) KitButton 組件的內(nèi)部即可。

第一次沖刺：審查會(huì)議

好吧，這很容易。擊掌。UI 的視覺(jué)外觀(guān)沒(méi)有變化，但我們現(xiàn)在有一個(gè)“kit”文件夾，它是我們 React 源代碼中“components”的同級(jí)文件夾。它有很多文件，例如 KitButton.js，它基本上導(dǎo)出重命名的 react-bootstrap 組件。

我們工具包中的一個(gè)示例組件如下所示：

<code>// KitButton.js
import { Button, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
export const KitButton = Button;
export const KitToggleButton = ToggleButton;
export const KitToggleButtonGroup = ToggleButtonGroup;</code>

我們將所有工具包組件打包到這樣的模塊中：

<code>// kit/index.js
import { KitCard } from "./KitCard";
import { KitHero } from "./KitHero";
import { KitList } from "./KitList";
import { KitImage } from "./KitImage";
import { KitCarousel } from "./KitCarousel";
import { KitDropdown } from "./KitDropdown";
import { KitAttribution } from "./KitAttribution";
import { KitNavbar, KitNav } from "./KitNavbar";
import { KitContainer, KitRow, KitCol } from "./KitContainer";
import { KitButton, KitToggleButton, KitToggleButtonGroup } from "./KitButton";
export {
  KitCard,
  KitHero,
  KitList,
  KitImage,
  KitCarousel,
  KitDropdown,
  KitAttribution,
  KitButton,
  KitToggleButton,
  KitToggleButtonGroup,
  KitContainer,
  KitRow,
  KitCol,
  KitNavbar,
  KitNav
};</code>

現(xiàn)在我們的應(yīng)用程序組件完全沒(méi)有 react-bootstrap。以下是受影響組件的導(dǎo)入：

<code>// Navigation.js imports
import React from "react";
import { KitNavbar, KitNav, KitDropdown } from "../kit";


// Page.js imports 
import React from "react";
import PosterCarousel from "./PosterCarousel";
import DestinationLayout from "./DestinationLayout";
import { KitContainer, KitRow, KitCol } from "../kit";


// PosterCarousel.js imports
import React from "react";
import { KitAttribution, KitImage, KitCarousel } from "../kit";


// DestinationLayout.js imports
import React, { useState, useEffect } from "react";
import {
  KitCard,
  KitHero,
  KitList,
  KitButton,
  KitToggleButton,
  KitToggleButtonGroup,
  KitDropdown,
  KitContainer,
  KitRow,
  KitCol
} from "../kit";</code>

以下是我們現(xiàn)在的前端代碼庫(kù)：

盡管我們將所有 react 導(dǎo)入都包含在我們的工具包組件中，但我們的應(yīng)用程序組件仍然依賴(lài)于 react-bootstrap 實(shí)現(xiàn)，因?yàn)槲覀兎胖迷诠ぞ甙M件實(shí)例上的屬性與 react-bootstrap 的屬性相同。這在重新實(shí)現(xiàn)工具包組件時(shí)會(huì)限制我們，因?yàn)槲覀冃枰袷叵嗤?API。例如：

<code>// 來(lái)自 Navigation.js
<kitnavbar bg="dark" fixed="top" variant="dark"></kitnavbar></code>

理想情況下，當(dāng)我們實(shí)例化 KitNavbar 時(shí)，我們不必添加那些 react-bootstrap 特定的屬性。

前端開(kāi)發(fā)人員承諾在繼續(xù)進(jìn)行時(shí)將這些屬性重構(gòu)出來(lái)，因?yàn)槲覀円呀?jīng)將它們識(shí)別為有問(wèn)題的。任何對(duì) react-bootstrap 組件的新引用都將進(jìn)入我們的工具包，而不是直接進(jìn)入應(yīng)用程序組件。

同時(shí)，我們將我們的模擬數(shù)據(jù)與服務(wù)器工程師共享，服務(wù)器工程師正在努力構(gòu)建單獨(dú)的服務(wù)器環(huán)境、實(shí)現(xiàn)數(shù)據(jù)庫(kù)模式并向我們公開(kāi)一些服務(wù)。

這給了我們時(shí)間在下一個(gè)沖刺中為我們的 UI 添加一些光澤——這很好，因?yàn)楫?dāng)權(quán)者希望看到每個(gè)目的地的單獨(dú)主題。當(dāng)用戶(hù)瀏覽目的地時(shí)，我們需要更改 UI 配色方案以匹配顯示的旅行海報(bào)。此外，我們希望嘗試改進(jìn)這些組件，以開(kāi)始發(fā)展我們自己的外觀(guān)和感覺(jué)。一旦我們有一些收入，我們將請(qǐng)?jiān)O(shè)計(jì)師進(jìn)行全面檢修，但希望我們能夠?yàn)樵缙谟脩?hù)找到一個(gè)合適的方案。

第二次沖刺：審查會(huì)議

哇！團(tuán)隊(duì)在這個(gè)沖刺中確實(shí)竭盡全力。我們獲得了每個(gè)目的地的主題、自定義組件以及從應(yīng)用程序組件中刪除了許多殘留的 react-bootstrap API 實(shí)現(xiàn)。

以下是現(xiàn)在的桌面外觀(guān)：

為了實(shí)現(xiàn)這一點(diǎn)，前端開(kāi)發(fā)人員引入了 Styled Components 庫(kù)。它使為各個(gè)工具包組件設(shè)置樣式以及添加對(duì)多個(gè)主題的支持變得輕而易舉。

讓我們看看他們本沖刺中的一些亮點(diǎn)。

首先，對(duì)于導(dǎo)入字體和設(shè)置頁(yè)面正文樣式之類(lèi)的全局內(nèi)容，我們有一個(gè)名為 KitGlobal 的新工具包組件。

<code>// KitGlobal.js
import { createGlobalStyle } from "styled-components";
export const KitGlobal = createGlobalStyle`
  body {
    @import url('https://fonts.googleapis.com/css?family=Orbitron:500|Nunito:600|Alegreya Sans SC:700');
    background-color: ${props => props.theme.foreground};
    overflow-x: hidden;
  }
`;</code>

它使用 createGlobalStyle 輔助函數(shù)來(lái)定義 body 元素的 CSS。它從 Google 導(dǎo)入我們所需的網(wǎng)絡(luò)字體，將背景顏色設(shè)置為當(dāng)前主題的“前景”值，并關(guān)閉 x 方向上的溢出以消除討厭的水平滾動(dòng)條。我們?cè)?App 組件的 render 方法中使用 KitGlobal 組件。

同樣在 App 組件中，我們從 ../theme 導(dǎo)入 ThemeProvider 來(lái)自 styled-components，以及名為“themes”的內(nèi)容。我們使用 React 的 useState 將初始主題設(shè)置為 themes.luna，并使用 React 的 useEffect 在“destination”更改時(shí)調(diào)用 setTheme。返回的組件現(xiàn)在包裝在 ThemeProvider 中，后者將“theme”作為 prop 傳遞。以下是完整的 App 組件。

<code>// App.js
import React, { useState, useEffect } from "react";
import { ThemeProvider } from "styled-components";
import themes from "../theme/";
import { KitGlobal } from "../kit";
import Navigation from "./Navigation";
import Page from "./Page";
export default function App(props) {
  const [destinationIndex, setDestinationIndex] = useState(0);
  const [theme, setTheme] = useState(themes.luna);
  const destination = props.destinations[destinationIndex];
  useEffect(() => {
    setTheme(themes[destination.theme]);
  }, [destination]);

  return (
    <themeprovider theme="{theme}"><react.fragment><kitglobal></kitglobal><navigation destinationindex="{destinationIndex}" setdestinationindex="{setDestinationIndex}"></navigation><page destinationindex="{destinationIndex}" setdestinationindex="{setDestinationIndex}"></page></react.fragment></themeprovider>
  );
}</code>

KitGlobal 像任何其他組件一樣呈現(xiàn)。那里沒(méi)有什么特別的，只是 body 標(biāo)簽受到影響。ThemeProvider 使用 React Context API 將主題傳遞給任何需要它的組件（所有組件）。為了完全理解這一點(diǎn)，我們還需要看看主題究竟是什么。

為了創(chuàng)建一個(gè)主題，我們的一位前端開(kāi)發(fā)人員獲取了所有旅行海報(bào)，并通過(guò)提取突出的顏色為每個(gè)海報(bào)創(chuàng)建調(diào)色板。這相當(dāng)簡(jiǎn)單。

顯然，我們不會(huì)使用所有顏色。該方法主要是將最常用的兩種顏色命名為前景和背景。然后我們又取了三種顏色，通常從最淺到最深排列為 accent1、accent2 和 accent3。最后，我們選擇了兩種對(duì)比色來(lái)命名 text1 和 text2。對(duì)于上述目的地，這看起來(lái)像：

<code>// theme/index.js (部分列表)
const themes = {
  ...
  mars: {
    background: "#a53237",
    foreground: "#f66f40",
    accent1: "#f8986d",
    accent2: "#9c4952",
    accent3: "#f66f40",
    text1: "#f5e5e1",
    text2: "#354f55"
  },
  ...
};
export default themes;</code>

一旦我們?yōu)槊總€(gè)目的地創(chuàng)建了一個(gè)主題，并且它被傳遞到所有組件（包括我們的應(yīng)用程序組件現(xiàn)在從中構(gòu)建的工具包組件），我們就需要使用 styled-components 來(lái)應(yīng)用這些主題顏色以及我們的自定義視覺(jué)樣式，例如面板角和“邊框輝光”。

這是一個(gè)簡(jiǎn)單的示例，我們讓 KitHero 組件將主題和自定義樣式應(yīng)用于 Bootstrap Jumbotron：

<code>// KitHero.js
import styled from "styled-components";
import { Jumbotron } from "react-bootstrap";

export const KitHero = styled(Jumbotron)`
  background-color: ${props => props.theme.accent1};
  color: ${props => props.theme.text2};
  border-radius: 7px 25px;
  border-color: ${props => props.theme.accent3};
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d;
  font-family: "Nunito", sans-serif;
  margin-bottom: 20px;
`;</code>

在這種情況下，我們可以使用 styled-components 返回的內(nèi)容，因此我們只需將其命名為 KitHero 并導(dǎo)出即可。

當(dāng)我們?cè)趹?yīng)用程序中使用它時(shí)，它看起來(lái)像這樣：

<code>// DestinationLayout.js (部分代碼)
const renderHero = () => {
  return (
    <kithero><h2>{destination.header}</h2>
      <p>{destination.blurb}</p>
      <kitbutton>Book Your Trip Now!</kitbutton></kithero>
  );
};</code>

然后還有更復(fù)雜的情況，我們希望預(yù)設(shè) react-bootstrap 組件上的一些屬性。例如，前面我們已經(jīng)確定 KitNavbar 組件具有一堆我們寧愿不從應(yīng)用程序的組件聲明中傳遞的 react-bootstrap 屬性。

現(xiàn)在讓我們看看是如何處理的：

<code>// KitNavbar.js (部分代碼)
import React, { Component } from "react";
import styled from "styled-components";
import { Navbar } from "react-bootstrap";

const StyledBootstrapNavbar = styled(Navbar)`
  background-color: ${props => props.theme.background};
  box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d;
  display: flex;
  flex-direction: horizontal;
  justify-content: space-between;
  font-family: "Nunito", sans-serif;
`;

export class KitNavbar extends Component {
  render() {
    const { ...props } = this.props;
    return ;
  }
}</code>

首先，我們使用 styled-components 創(chuàng)建一個(gè)名為 StyledBootstrapNavbar 的組件。我們可以使用傳遞給 styled-components 的 CSS 來(lái)處理一些屬性。但是，為了繼續(xù)利用（目前）組件對(duì)屏幕頂部的可靠粘性（而其他所有內(nèi)容都被滾動(dòng)），我們的前端開(kāi)發(fā)人員選擇繼續(xù)使用 react-bootstrap 的 fixed 屬性。為了做到這一點(diǎn)，我們必須創(chuàng)建一個(gè) KitNavbar 組件，該組件使用 fixed=top 屬性呈現(xiàn) StyledBootstrapNavbar 的實(shí)例。我們還傳遞了所有 props，其中包括它的子元素。

如果我們想通過(guò)默認(rèn)值在工具包組件中顯式設(shè)置某些屬性，我們只需要?jiǎng)?chuàng)建一個(gè)單獨(dú)的類(lèi)來(lái)呈現(xiàn) styled-component 的工作并將 props 傳遞給它即可。在大多數(shù)情況下，我們只需命名和返回 styled-component 的輸出并像上面對(duì) KitHero 所做的那樣使用它即可。

現(xiàn)在，當(dāng)我們?cè)趹?yīng)用程序的 Navigation 組件中呈現(xiàn) KitNavbar 時(shí)，它看起來(lái)像這樣：

<code>// Navigation.js (部分代碼)
return (
  <kitnavbar><kitnavbarbrand><kitlogo></kitlogo>
      Solar Excursions
    </kitnavbarbrand>
    {renderDestinationMenu()}
  </kitnavbar>
);</code>

最后，我們第一次嘗試將工具包組件從 react-bootstrap 中重構(gòu)出來(lái)。KitAttribution 組件是一個(gè) Bootstrap Alert，就我們的目的而言，它只不過(guò)是一個(gè)普通的 div。我們能夠輕松地重構(gòu)以刪除其對(duì) react-bootstrap 的依賴(lài)性。

這是從上一個(gè)沖刺中出現(xiàn)的組件：

<code>// KitAttribution.js (使用 react-bootstrap)
import { Alert } from "react-bootstrap";
export const KitAttribution = Alert;</code>

這就是它現(xiàn)在的樣子：

<code>// KitAttribution.js
import styled from "styled-components";
export const KitAttribution = styled.div`
  text-align: center;
  background-color: ${props => props.theme.accent1};
  color: ${props => props.theme.text2};
  border-radius: 7px 25px;
  border-color: ${props => props.theme.accent3};
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d;
  font-family: "Alegreya Sans SC", sans-serif;
  > a {
    color: ${props => props.theme.text2};
    font-family: "Nunito", sans-serif;
  }
  > a:hover {
    color: ${props => props.theme.background};
    text-decoration-color: ${props => props.theme.accent3};
  }
`;</code>

請(qǐng)注意，我們不再導(dǎo)入 react-bootstrap，而是使用 styled.div 作為組件基礎(chǔ)。它們不會(huì)都那么容易，但這是一個(gè)過(guò)程。

以下是我們的團(tuán)隊(duì)在本沖刺中進(jìn)行的樣式和主題設(shè)計(jì)工作的結(jié)果：

在此處查看主題頁(yè)面本身。

結(jié)論

經(jīng)過(guò)三個(gè)沖刺后，我們的團(tuán)隊(duì)正在順利構(gòu)建 UI 的可擴(kuò)展組件架構(gòu)。

• 由于 react-bootstrap，我們正在快速前進(jìn)，但不再因此積累大量的技術(shù)債務(wù)。
• 由于 styled-components，我們能夠?qū)崿F(xiàn)多個(gè)主題（就像如今互聯(lián)網(wǎng)上的幾乎每個(gè)應(yīng)用程序都具有深色和淺色模式一樣）。我們也不再像一個(gè)現(xiàn)成的 Bootstrap 應(yīng)用程序了。
• 通過(guò)實(shí)現(xiàn)一個(gè)包含所有對(duì) react-bootstrap 的引用的自定義組件工具包，我們可以根據(jù)需要進(jìn)行重構(gòu)。

在 GitHub 上分叉最終代碼庫(kù)。

以上是迭代使用樣式組件的React設(shè)計(jì)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！