SOLID 是一套原則。它們主要是關(guān)心代碼質(zhì)量和可維護(hù)性的軟件專(zhuān)業(yè)人員的指導(dǎo)方針。

React 不是面向?qū)ο螅@些原則背后的主要思想可能是有幫助的。在本文中，我將嘗試演示如何應(yīng)用這些原則來(lái)編寫(xiě)更好的代碼。

在前一篇文章中，我們討論了單一責(zé)任原則。今天，我們將討論 SOLID 的第二個(gè)原則: 開(kāi)閉原則。

本系列其他文章

如何應(yīng)用 SOLID 原則在 React 中整理代碼之單一原則

什么是開(kāi)閉原則？

Robert c. Martin 認(rèn)為這個(gè)原則是面向?qū)ο笤O(shè)計(jì)最重要的原則。但他不是第一個(gè)定義這個(gè)概念的人。Bertrand Meyer 于 1988 年在他的《面向?qū)ο筌浖?gòu)造》一書(shū)中寫(xiě)到了這一點(diǎn)。他解釋了開(kāi)放/封閉原則:

軟件實(shí)體(類(lèi)、模塊、功能等)應(yīng)該對(duì)擴(kuò)展開(kāi)放，但對(duì)修改關(guān)閉。

這個(gè)原則告訴您以這樣一種方式來(lái)編寫(xiě)代碼，即您能夠在不更改現(xiàn)有代碼的情況下添加其他功能。

讓我們看看我們?cè)谀睦锟梢詰?yīng)用這個(gè)原則。

讓我們從一個(gè)例子開(kāi)始

假設(shè)我們有一個(gè) User 組件，其中我們傳遞用戶(hù)的詳細(xì)信息，這個(gè)類(lèi)的主要目的是顯示該特定用戶(hù)的詳細(xì)信息。

這是一個(gè)很簡(jiǎn)單的開(kāi)始。但是我們的生活并不是那么簡(jiǎn)單。幾天后，我們的經(jīng)理告訴我們系統(tǒng)中有三種類(lèi)型的用戶(hù): SuperAdmin、 Admin 等等。

它們每個(gè)都有不同的信息和功能。

一個(gè)糟糕的解決方案

第一個(gè)也是顯而易見(jiàn)的解決方案：在組件中包含一個(gè)條件，并根據(jù)不同的用戶(hù)類(lèi)型呈現(xiàn)不同的信息。

import React from 'react';
export const User = ({user}) => {
    return <>
        <div> Name: {user.name}</div>
        <div> Email: {user.email}</div>
        {
            user.type === 'SUPER_ADMIN' &&
            <div> Details about super admin</div>
        }
        {
            user.type === 'ADMIN' &&
            <div> Details about admin</div>
        }
    </>
}

你知道這里出了什么問(wèn)題嗎？

首先，我們的代碼現(xiàn)在是凌亂的。

其次，如果我們需要其他類(lèi)型的用戶(hù)怎么辦？

然后，我們需要進(jìn)入 User.js，為特定類(lèi)型的用戶(hù)添加另一個(gè)條件。

這明顯違反了開(kāi)閉原則，因?yàn)槲覀儾辉试S更改 User 組件內(nèi)部的代碼。

解決方案是什么？

在這個(gè)場(chǎng)景中我們可以應(yīng)用兩種主要的技術(shù):

• 高階組件(HOC)
• 組件組合(Component composition)

在可能的情況下，最好采用第二種方法，但是在某些情況下，有必要使用 HOC。

現(xiàn)在，我們將使用 Facebook 推薦的一種技術(shù)，稱(chēng)為組件組合。

讓我們創(chuàng)建單獨(dú)的用戶(hù)組件

現(xiàn)在，我們需要以這樣一種方式設(shè)計(jì)代碼，即不需要在 User.js 組件中添加條件。讓我們?yōu)?SuperAdmin 創(chuàng)建一個(gè)單獨(dú)的組件:

import React from 'react';
import {User} from "./User";
 
export const SuperAdmin = ({user}) => {
 
    return <>
        <User user={user} />
        <div> This is super admin user details</div>
    </>
}

類(lèi)似地，另一個(gè)是針對(duì) Admin 用戶(hù)的:

import React from 'react';
import {User} from "./User";
export const Admin = ({user}) => {
    return <>
        <User user={user} />
        <div> This is admin user details</div>
    </>
}

現(xiàn)在我們的 App.js 文件變成了:

import React from 'react';
import Admin from './Admin'
import SuperAdmin from './SuperAdmin'
export default function App = () =>{
  const user = {}
  const userByTypes = {
    'admin' : <Admin /> ,
    'superadmin' : <SuperAdmin />
  }
  return <div>
    {userByTypes[`${user.type}`]}
  <div/>
}

現(xiàn)在我們可以根據(jù)需要?jiǎng)?chuàng)建盡可能多的用戶(hù)類(lèi)型。我們針對(duì)特定用戶(hù)的邏輯是封裝的，因此我們不需要為了任何額外的修改而重新檢查代碼。

有些人可能會(huì)說(shuō)，我們正在不必要地增加文件數(shù)量。當(dāng)然，您可以暫時(shí)保持原樣，但是隨著應(yīng)用程序的復(fù)雜性增加，您肯定會(huì)感到痛苦。

注意

SOLID 是一套原則。它們并不是強(qiáng)制性的，您必須應(yīng)用于每個(gè)場(chǎng)景。作為一個(gè)經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員，您應(yīng)該在代碼長(zhǎng)度和可讀性之間找到一個(gè)很好的平衡。

要過(guò)分執(zhí)著于這些原則。事實(shí)上，有一句名言可以解釋這些情況:

Too Much SOLID

所以知道這些原則是好的，但是你必須保持平衡。對(duì)于一個(gè)或兩個(gè)額外的字段，您可能不需要這些組合，但是將它們分開(kāi)肯定會(huì)有長(zhǎng)遠(yuǎn)的幫助。

總結(jié)

了解這些原則會(huì)讓你走很長(zhǎng)的路，因?yàn)樵谝惶旖Y(jié)束的時(shí)候，一段好的代碼才是最重要的，而且沒(méi)有單一的方法來(lái)做事情。