小編精選 - 技術文章翻譯 · 08月22日

給初學者的 7 個基本 React 技巧

你剛開始你的 React 之旅嗎？您即將踏上令人興奮的旅程！ React 徹底改變了我們建立使用者介面的方式，但與任何強大的工具一樣，它也有自己的一套最佳實踐。今天，我們將探索 7 個簡單但改變遊戲規則的技巧，這些技巧將提高您的 React 技能，並使您的程式碼更乾淨、更有效率、更專業。

1.擁抱自動關閉標籤的力量

讓我們從一個簡單但有效的技巧開始：使用自閉合標籤。這是一個很小的變化，可以使您的程式碼更加清晰且更易於閱讀。

// Instead of this:
<MyComponent></MyComponent>

// Do this:
<MyComponent />

為什麼這很重要？好吧，當您處理數十個甚至數百個元件時，每一行程式碼都很重要。自閉合標籤可以減少混亂並使您的 JSX 更易於瀏覽。

愛上 fragment

您是否曾經發現自己將元件包裝在不必要的<div>標籤中只是為了滿足 React 對單一父元素的要求？向碎片問好！

// Instead of this:
<div>
  <Header />
  <Main />
</div>

// Do this:
<Fragment key={id}>
  <Header />
  <Main />
</Fragment>

片段可以保持 DOM 的整潔和程式碼的語意。它們就像不可見的包裝器，可以將元素分組，而無需向 DOM 加入額外的節點。

Fragment 簡寫：你最好的新朋友

一旦您熟悉了 Fragment，您就可以使用簡寫語法更進一步：

// Instead of this:
<Fragment>
  <Header />
  <Main />
</Fragment>

// Do this:
<>
  <Header />
  <Main />
</>

這種語法更簡潔，輸入速度也更快。請記住，您無法將屬性傳遞給速記版本，因此當您需要包含key時，請使用完整的<Fragment> 。

prop spread

Prop spread 是一個漂亮的 ES6 功能，可以讓你的元件更具可讀性和靈活性：

// Instead of this:
function TodoList(props) {
  return <p>{props.item}</p>;
}

// Do this:
function TodoList({ item }) {
  return <p>{item}</p>;
}

透過解構 props，您可以立即清楚您的元件需要什麼資料。在元件中使用 props 也更容易。

default props：設定後就不用管它

在函數參數中定義 props 的預設值：

// Instead of this:
function Card({ text, small }) {
  let btnText = text || "Click here";
  let isSmall = small || false;
  // ...
}

// Do this:
function Card({ text = "Click here", small = false }) {
  // ...
}

這種方法更乾淨，並確保您的元件始終具有合理的預設值，即使沒有傳遞任何 props。

簡化 string props

傳遞字串道具時，您可以放棄花括號以獲得更乾淨的外觀：

// Instead of this:
<Button text={"Submit"} />

// Do this:
<Button text="Submit" />

這是一個很小的變化，但它使您的 JSX 更具可讀性並且更接近純 HTML。

讓靜態資料遠離你的元件

最後但並非最不重要的一點是，將靜態資料移出元件：

// Instead of this:
function LevelSelector() {
  const LEVELS = ["Easy", "Medium", "Hard"];
  return (/* ... */);
}

// Do this:
const LEVELS = ["Easy", "Medium", "Hard"];
function LevelSelector() {
  return (/* ... */);
}

這種方法可讓您的元件保持精簡並專注於渲染，同時還可以透過避免不必要的靜態資料重新建立來提高效能。