在学习 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;
}

进入全屏模式 退出全屏模式

而不是反复编写以下代码：

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

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

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

进入全屏模式 退出全屏模式

你只需复用你的函数：

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

进入全屏模式 退出全屏模式

一个函数。

多个按钮。

相同的逻辑。

这是 React 建立在上面的思维模式

现在看看 React。

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

进入全屏模式 退出全屏模式

语法不同。

原理相同。

React 组件只是可复用的 UI 片段。

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

然而，理念完全相同：

创建一次。

在需要时随时复用。

React 并非魔法

当我学习 React 时，让我放慢脚步的一件事是，我以为它引入了一种全新的编程方式。

事实并非如此。

React 依然是 JavaScript。

它只是鼓励你将 UI 组织成称为组件的可复用、独立的片段。

当我不再把组件看作某种神奇的东西时，React 就变得容易理解多了。

在学习 React 之前你应该练习什么

如果你目前正在学习原生 JavaScript，我认为在转向 React 之前值得培养一些习惯。

  • 编写可复用的函数。
  • 将大问题拆分为小问题。
  • 避免复制粘贴代码。
  • 将相关逻辑放在一起。
  • 考虑可维护性，而不仅仅是让功能正常工作。

这些习惯可以直接迁移到 React 开发中。

结语

许多初学者因为 React 很流行而急于学习它。

这样做没有错。

但如果你先花时间掌握原生 JavaScript 中的可复用函数，React 就会变得更熟悉。

你会花更少的时间去思考 “组件是什么？”

而会花更多的时间去理解 为什么要有组件。

React 并没有发明可复用性。

它只是围绕 JavaScript 早已鼓励的思维模式构建了整个库。

你怎么看？

如果你已经学过 React，理解 JavaScript 函数是否让你更容易理解组件？

我很想听听你的想法。