在學習 React 之前，請先養成這個 JavaScript 習慣

當我第一次開始學習 React 時，每個人都一直在談論 元件。

談這個。

談那個。

一開始，我以為元件是 React 獨有的東西。

但在花更多時間使用原生 JavaScript 之後，我發現了一些事情。

React 元件背後的思維早已存在於 JavaScript 之中。

React 並沒有發明可重用性 — 它只是給了它更好的結構。

如果你打算在學完 JavaScript 後學習 React，那麼有一個習慣值得現在就開始培養：

撰寫可重用的程式碼。

為什麼可重用性很重要

想像你正在建立一個儀表板。

它有五個按鈕。

每個按鈕共享相同的樣式和幾乎相同的行為。

一種做法是將相同的程式碼複製貼上五次。

這樣可行……

直到你想要變更某些東西。

現在你必須編輯五個不同的地方。

也許你決定變更按鈕的顏色。

或者內邊距。

或者新增圖示。

現在每個複製的程式碼都需要更新。

這就是可重用程式碼發光的地方。

寫一次。

到處使用。

除了節省時間，可重用程式碼還能讓你的專案：

  • 更容易維護
  • 更容易除錯
  • 更容易擴充
  • 更容易讓其他開發者理解

JavaScript 早已支援這一點

當人們聽到 元件 這個詞時，他們立刻會想到 React。

但 JavaScript 多年來已經透過函式支援可重用的邏輯。

例如：

function createButton(text) {
  const button = document.createElement("button");

  button.textContent = text;
  button.className = "btn";

  return button;
}

Enter fullscreen mode Exit fullscreen mode

而不是重複撰寫這些：

const saveBtn = document.createElement("button");
saveBtn.textContent = "Save";

const deleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete";

const cancelBtn = document.createElement("button");
cancelBtn.textContent = "Cancel";

Enter fullscreen mode Exit fullscreen mode

你只要重用你的函式即可：

document.body.append(
  createButton("Save"),
  createButton("Delete"),
  createButton("Cancel")
);

Enter fullscreen mode Exit fullscreen mode

一個函式。

多個按鈕。

相同的邏輯。

這就是 React 建立的思維

現在來看看 React。

<Button text="Save" />
<Button text="Delete" />
<Button text="Cancel" />

Enter fullscreen mode Exit fullscreen mode

不同的語法。

相同的原則。

React 元件只是可重用的 UI 片段。

React 元件不是直接回傳 DOM 元素，而是回傳 JSX。

然而，概念完全相同：

建立一次。

需要時重複使用。

React 不是魔法

當我學習 React 時，有一件事讓我進展緩慢，那就是認為它引入了一種全新的程式設計方式。

事實並非如此。

React 仍然是 JavaScript。

它只是鼓勵你將 UI 組織成可重用、獨立的片段，稱為元件。

當我不再將元件視為某種神奇的東西時，React 變得更容易理解。

在學習 React 之前應該練習什麼

如果你正在學習原生 JavaScript，我認為在轉移到 React 之前，有一些習慣值得培養。

  • 撰寫可重用的函式。
  • 將大問題拆解成小問題。
  • 避免複製貼上程式碼。
  • 將相關邏輯放在一起。
  • 思考可維護性，而不僅是讓事情運作。

這些習慣可以直接轉移到 React 開發中。

結論

許多初學者因為 React 很流行而急著學習它。

這樣做並沒有錯。

但如果你先花時間在原生 JavaScript 中掌握可重用函式，React 就會開始變得更熟悉。

你會減少思考 「什麼是元件？」

而花更多時間理解 為什麼元件存在。

React 並沒有發明可重用性。

它只是圍繞 JavaScript 早已鼓勵的思維，建立了一整個函式庫。

你怎麼看？

如果你已經學過 React，理解 JavaScript 函式是否讓你更容易理解元件？

我很想聽聽你的想法。