想知道如何寫出漂亮的React組件嗎？
在Walmart Labs的產品開發中，我們進行了大量的Code Review工作，這也保證了我有機會從很多優秀的工程師的代碼中學習他們的代碼風格與樣式。在這篇博文里我會分享出我最欣賞的五種組件模式與代碼片。不過我首先還是要談談為什么我們需要執著于提高代碼的閱讀體驗。就好像你有很多種方式去裝扮一只貓，如果你把你的愛貓裝扮成了如下這樣子:
你或許可以認為蘿卜青菜各有所愛，但是代碼本身是應當保證其可讀性，特別是在一個團隊中，你的代碼是注定要被其他人閱讀的。電腦是不會在意這些的，不管你朝它們扔過去什么，它們都會老老實實的解釋，但是你的隊友們可不會這樣，他們會把丑陋的代碼扔回到你的臉上。而所謂的Pretty Components，應該包含如下的特性:
- 即使沒有任何注釋的情況下也易于理解
- 比亂麻般的代碼有更好的性能表現
- 更易于進行Bug追溯
- 簡潔明了，一句頂一萬句
SFC:Stateless Functional Component
我覺得我們在開發中經常忽略掉的一個模式就是所謂的Stateless Functional Component，不過這是我個人***的React組件優化模式，沒有之一。我喜愛這種模式不僅僅因為它們能夠減少大量的模板代碼，而且因為它們能夠有效地提高組件的性能表現。總而言之，SFC能夠讓你的應用跑的更快，長的更帥。
直觀來看，SFC就是指那些僅有一個渲染函數的組件，不過這簡單的改變就可以避免很多的無意義的檢測與內存分配。下面我們來看一個實踐的例子來看下SFC的具體作用，譬如:
如果我們用正統的React組件的寫法，可以得出如下代碼:
- export default class RelatedSearch extends React.Component {
- constructor(props) {
- super(props);
- this._handleClick = this._handleClick.bind(this);
- }
- _handleClick(suggestedUrl, event) {
- event.preventDefault();
- this.props.onClick(suggestedUrl);
- }
- render() {
- return (
- <section className="related-search-container">
- <h1 className="related-search-title">Related Searches:</h1>
- <Layout x-small={2} small={3} medium={4} padded={true}>
- {this.props.relatedQueries.map((query, index) =>
- <Link
- className="related-search-link"
- onClick={(event) =>
- this._handleClick(query.searchQuery, event)}
- key={index}>
- {query.searchText}
- </Link>
- )}
- </Layout>
- </section>
- );
- }
- }
而使用SFC模式的話，大概可以省下29%的代碼:
- const _handleClick(suggestedUrl, onClick, event) => {
- event.preventDefault();
- onClick(suggestedUrl);
- };
- const RelatedSearch = ({ relatedQueries, onClick }) =>
- <section className="related-search-container">
- <h1 className="related-search-title">Related Searches:</h1>
- <Layout x-small={2} small={3} medium={4} padded={true}>
- {relatedQueries.map((query, index) =>
- <Link
- className="related-search-link"
- onClick={(event) =>
- _handleClick(query.searchQuery, onClick, event)}
- key={index}>
- {query.searchText}
- </Link>
- )}
- </Layout>
- </section>
- export default RelatedSearch;
代碼量的減少主要來源兩個方面:
- 沒有構造函數(5行)
- 以Arrow Function的方式替代Render語句(4行)
實際上，SFC最迷人的地方不僅僅是其代碼量的減少，還有就是對于可讀性的提高。SFC模式本身就是所謂純組件的一種***實踐范式，而移除了構造函數并且將_handleClick()這個點擊事件回調函數提取出組件外，可以使JSX代碼變得更加純粹。另一個不錯的地方就是SFC以Arrow Function的方式來定義了輸入的Props變量，即以Object Destructring語法來聲明組件所依賴的Props:
- const RelatedSearch = ({ relatedQueries, onClick }) =>
這樣不僅能夠使組件的Props更加清晰明確，還能夠避免冗余的this.props表達式，從而使代碼的可讀性更好。
***，我還想要強調下雖然我很推崇SFC，不過也不能濫用它。最合適使用SFC的地方就是之前你用純組件的地方。在Walmart Labs中，我們使用Redux來管理應用的狀態，也就意味著我們絕大部分的組件都是純組件，也就給了SFC廣闊的應用空間。一般來說，有以下特征的組件式絕對不適合使用SFC的:
- 需要自定義整個組件的生命周期管理
- 需要使用到refs
Conditional Components
JSX本身不支持if表達式，不過我們可以使用邏輯表達式的方式來避免將代碼切分到不同的子模塊中，大概是如下樣子:
- render() {
- <div class="search-results-container">
- {this.props.isGrid
- ? <SearchResultsGrid />
- : <SearchResultsList />}
- </div>
- }
這種表達式在二選一渲染的時候很有效果，不過對于選擇性渲染一個的情況很不友好，譬如如下的情況:
- render() {
- <div class="search-results-list">
- {this.props.isSoftSort
- ? <SoftSortBanner />
- : null
- }
- </div>
- }
這樣子確實能起作用，不過看上去感覺怪怪的。我們可以選用另一種更加語義化與友好的方式來實現這個功能，即使用邏輯與表達式然后返回組件:
- render() {
- <div class="search-results-list">
- {!!this.props.isSoftSort && <SoftSortBanner />}
- </div>
- }
不過這一點也是見仁見智，每個人按照自己的喜好來就行了。
Arrow Syntax In React And Redux
ES2015里包含了不少可口的語法糖，我***的就是那個Arrow Notation。這個特性在編寫組件時很有作用：
- const SoftSort = ({ hardSortUrl, sortByName, onClick }) => {
- return (
- <div className="SearchInfoMessage">
- Showing results sorted by both Relevance and {sortByName}.
- <Link
- href={`?${hardSortUrl}`}
- onClick={(ev) => onClick(ev, hardSortUrl)}>
- Sort results by {sortByName} only
- </Link>
- </div>
- );
- };
該函數的功能就是返回JSX對象，我們也可以忽略return語句:
- const SoftSort = ({ hardSortUrl, sortByName, onClick }) =>
- <div className="SearchInfoMessage">
- Showing results sorted by both Relevance and {sortByName}.
- <Link
- href={`?${hardSortUrl}`}
- onClick={(ev) => onClick(ev, hardSortUrl)}>
- Sort results by {sortByName} only
- </Link>
- </div>
代碼行數又少了不少咯!
另一塊我覺得非常適用Arrow Function的地方就是Redux的mapStateToProps函數:
- const mapStateToProps = ({isLoading}) => {
- return ({
- loading: isLoading,
- });
- };
需要注意的是，如果你返回的是Object，你需要包裹在大括號內:
- const mapStateToProps = ({isLoading}) => ({
- loading: isLoading
- });
使用Arrow Function優化的核心點在于其能夠通過專注于函數的重要部分而提升代碼的整體可讀性，并且避免過多的模板代碼帶來的噪音。
合理使用Object Destructing與Spread Attributes
大的組件往往受困于this.props過長的窘境，典型的如下所示:
- render() {
- return (
- <ProductPrice
- hidePriceFulfillmentDisplay=
- {this.props.hidePriceFulfillmentDisplay}
- primaryOffer={this.props.primaryOffer}
- productType={this.props.productType}
- productPageUrl={this.props.productPageUrl}
- inventory={this.props.inventory}
- submapType={this.props.submapType}
- ppu={this.props.ppu}
- isLoggedIn={this.props.isLoggedIn}
- gridView={this.props.isGridView}
- />
- );
- }
這么多的Props估計看著都頭疼，如果我們要將這些Props繼續傳入下一層，大概就要變成下面這個樣子了:
- render() {
- const {
- hidePriceFulfillmentDisplay,
- primaryOffer,
- productType,
- productPageUrl,
- inventory,
- submapType,
- ppu,
- isLoggedIn,
- gridView
- } = this.props;
- return (
- <ProductPrice
- hidePriceFulfillmentDisplay={hidePriceFulfillmentDisplay}
- primaryOffer={primaryOffer}
- productType={productType}
- productPageUrl={productPageUrl}
- inventory={inventory}
- submapType={submapType}
- ppu={ppu}
- isLoggedIn={isLoggedIn}
- gridView={isGridView}
- />
- );
- }
暫時不考慮unKnown Props，我們可以使用解構賦值來實現這個功能:
- render() {
- const props = this.props;
- return <ProductPrice {...props} />
- }
Method Definition Shorthand
***這個方法不一定多有用，不過還是能讓你的代碼變得更加漂亮。如果你希望在Object中添加函數，你可以使用ES2015 Method Definition Shorthand來代替傳統的ES5的表達式，譬如:
如果你想設置一個默認的空方法，也可以利用這種方式:
- ProductRating.defaultProps = {
- onStarsClick() {}
- };
