React：像搭积木一样构建你的应用

晴栀ay
66 阅读8分钟

React：像搭积木一样构建你的应用

今天，我们来聊聊一个让前端开发者"上头"的框架——React。它不仅改变了我们构建用户界面的方式，更让我们像搭积木一样轻松构建复杂应用。

一、React是什么？为什么它这么火？

React诞生于2013年的Facebook，当时Facebook的前端应用变得越来越复杂，传统的jQuery式开发已经难以应对。React的核心思想是"组件化"——将UI拆分成可复用的组件，就像乐高积木一样，可以自由组合。

为什么组件化如此重要？

想象一下：如果你要为Facebook设计一个"点赞按钮"，你会怎么做？如果直接写在HTML里，那么每当你需要修改点赞功能时，都要在每个地方修改。但如果把点赞按钮做成一个组件，那么只需要修改这个组件，所有地方都会自动更新。

🤔 有趣的是，React的诞生时间（2013年）比ES6的class关键字（2015年）早，所以React早期只能用函数来实现组件。

二、JSX：在JS中写HTML的魔法

JSX到底是什么？为什么需要它？

JSX是JavaScript XML的缩写，它是一种语法扩展，允许我们在JavaScript中编写类似HTML的结构。这看起来像是HTML，但它其实是JavaScript的语法糖。

请记住：JSX不是HTML，它最终会被编译成JavaScript。

// JSX
const element = <h1>Hello, React!</h1>;

// 编译后的JavaScript
const element = React.createElement('h1', null, 'Hello, React!');

这看起来像是HTML，但它其实是JavaScript的语法糖。最终，JSX会被编译成纯JavaScript。

为什么需要JSX？

  1. 代码可读性：JSX让UI描述更直观、更接近HTML，而不需要写一堆React.createElement。
  2. 编译器检查：JSX编译器会在编译时检查语法错误，避免运行时错误。
  3. 组件化支持：JSX让组件的嵌套结构一目了然，方便我们理解组件之间的关系。

💡 为什么说JSX是"语法糖"？因为它的本质是让代码更易读、更简洁，但最终还是会被编译成JavaScript。就像糖衣炮弹，外表甜蜜，内里是JavaScript。

JSX的规则：最外层只能有一个元素

在JSX中，最外层只能有一个元素，这是React的强制要求。为什么？

原因详解：
1. JSX 编译机制

当你写这样的 JSX：

<div>Hello</div>
<span>World</span>

它试图返回两个顶级元素。但 React 要求每个组件的 render 方法（或函数组件的返回值）只能返回一个 React 元素。因为 JSX 最终会被转译为：

React.createElement("div", null, "Hello")
React.createElement("span", null, "World")

这实际上是两个独立的表达式，而不是一个单一的返回值 —— JavaScript 函数无法直接返回多个值（除非用数组或对象包装）。

2. 虚拟 DOM 的结构要求

React 使用虚拟 DOM 来高效地更新真实 DOM。每个组件实例对应一个“节点”树，而树必须有一个单一的根节点。如果允许多个根，就破坏了树形结构的一致性，使得 diff 算法、状态管理、生命周期等机制难以实现。

// 错误：最外层有多个元素
<div>First</div>
<div>Second</div>

// 正确：包裹在一个父元素中
<div>
  <div>First</div>
  <div>Second</div>
</div>

// 也可以使用React.Fragment（简写为<>）
<>
  <div>First</div>
  <div>Second</div>
</>

🤦‍♂️ 为什么JSX不能像HTML一样有多个根元素？

HTML 是标记语言，浏览器解析 HTML 时并不强制要求整个文档只有一个根（虽然标准 HTML 文档确实有 <html> 作为根）。但在 React 的组件模型中，每个组件是一个独立的 UI 单元，必须有明确的结构边界，因此强制单根。

三、组件：React的基石

在React中，组件是构建应用的基本单位。就像乐高积木，每个组件都是一个独立的"积木块"，我们可以轻松地将它们组合起来，构建出复杂的界面。

什么是组件？

组件是由JS、CSS和HTML（在JSX中）组合起来，完成一个相对独立的功能。

例如，一个"按钮"组件可以包含：

  • HTML结构（JSX）：按钮的UI
  • CSS样式：按钮的外观
  • JavaScript逻辑：按钮的点击事件

而一个组件应该具有以下特点：

  • 单一职责：一个组件只做一件事
  • 可复用：可以在多个地方使用
  • 可测试：可以独立测试

为什么组件是函数？

在JavaScript早期，没有class关键字，所以React选择用函数作为组件。函数将JSX + 逻辑封装成了一个组件。

// 一个简单的组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

哪怕随着ES6的普及，React引入了类组件，但类组件需要把逻辑分散在不同的方法中，而函数组件的逻辑更集中，这使得代码更易读、更易维护

//函数组件
function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

相比之下，类组件需要把逻辑分散在不同的方法中：

//类组件
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

💡 函数组件的逻辑更集中，这使得代码更易读、更易维护。

为什么React选择函数而非类？
  1. 简洁性：函数组件的代码量通常比类组件少30%~50%。
  2. 可测试性：函数组件是纯函数，更容易进行单元测试。
  3. 可维护性：函数组件的逻辑更集中，避免了类组件中常见的this绑定问题。
  4. 与Hooks的兼容性：Hooks是React 16.8引入的，专门为函数组件设计。

🤓 有趣的是，React团队曾说："函数组件是React的未来。"

为什么React要引入Hooks？

在React 16.8之前，函数组件无法使用状态和生命周期方法。Hooks的引入使得函数组件可以像类组件一样使用状态和生命周期，同时保持了函数组件的简洁性。

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

为什么函数组件是React的首选？

  1. 更少的代码：函数组件的代码量更少，更易读。
  2. 更好的性能：函数组件的内存开销更小。
  3. 更简单的逻辑：函数组件的逻辑更集中，避免了类组件中常见的this绑定问题。
  4. Hooks支持：Hooks是React的未来，而Hooks只支持函数组件。

🌟 在React 18中，React团队甚至表示："未来所有的React代码都应该使用函数组件。"

组件的层次结构：根组件与子组件

在React应用中，有一个根组件（通常是App.js），它包含其他子组件。子组件可以进一步包含更小的组件，形成一个组件树。

// 根组件
function App() {
  return (
    <div className="app">
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

// 子组件
function Header() {
  return <h1>Welcome to My App</h1>;
}

function MainContent() {
  return <p>This is the main content of the app.</p>;
}

function Footer() {
  return <p>&copy; 2023 My App</p>;
}

🌟 为什么说React是"搭积木"？因为每个组件都是一个独立的积木，我们可以自由组合它们，构建出复杂的界面。

四、React vs Vue：两种不同的开发哲学

Vue和React都采用了组件化开发，但它们的实现方式有所不同。

  • Vue：直接通过三部分进行功能分离（模板、脚本、样式）。这就像一个三明治，三层结构清晰明了。
  • React：一上来就是组件，将UI、逻辑和样式组合在一起。这就像一个积木块，每个积木块包含了所有需要的元素。

🌟 Vue的三部分分离：点击查看Vue的组件结构

React的组件化让我们像搭积木一样组合成页面，而Vue则更像是将UI、逻辑和样式"打包"在一起。

五、关键特性详解

1. className：为什么不用class？

在JSX中，class是JavaScript的关键字，不能用作属性。所以React使用className来表示HTML类名。

// 正确
<div className="container">...</div>

// 错误
<div class="container">...</div>

这看起来有点奇怪，但这是为了保持JSX的语法一致性。

2. useState：状态管理的神器

useState本质上是一个数组，第一个元素是状态值，第二个元素是更新状态的函数。

// useState的内部实现（简化版）
function useState(initialValue) {
  let state = initialValue;
  const setState = (newValue) => {
    state = newValue;
    // 触发重新渲染
  };
  return [state, setState];
}
为什么useState是"语法糖"？

useState是React提供的语法糖，它简化了状态管理，使得代码更易读、更易写。

// 使用useState
const [count, setCount] = useState(0);

// 不使用useState
const count = useRef(0);
const setCount = (newValue) => {
  count.current = newValue;
  // 触发重新渲染
};

💡 语法糖让代码更简洁，提升可读性，这正是React的哲学。

六、实战：创建一个完整的React组件

让我们创建一个完整的React组件，展示组件化开发的魔力。

import React, { useState } from 'react';

// 一个简单的按钮组件
function Button({ text, onClick }) {
  return (
    <button className="button" onClick={onClick}>
      {text}
    </button>
  );
}

// 一个计数器组件
function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div className="counter">
      <p>Count: {count}</p>
      <Button text="Increment" onClick={increment} />
    </div>
  );
}

// 根组件
function App() {
  return (
    <div className="app">
      <h1>React Component Example</h1>
      <Counter />
    </div>
  );
}

export default App;

七、总结：React的魔力

React通过组件化开发，让我们像搭积木一样构建应用。它简单、高效，让前端开发变得更有乐趣。

  • 组件：由JS、CSS和HTML组合，完成一个相对独立的功能
  • 根组件与子组件：形成清晰的组件树，便于维护
  • 函数作为组件：简洁明了，将JSX+逻辑封装在一起
  • JSX：让UI描述更直观，最外层只能有一个元素
  • className：避免与JS关键字冲突
  • useState：让状态管理变得简单

💡 React诞生于Facebook，它的核心思想是"组件化"，这改变了前端开发的方式，让我们能够更高效地构建复杂的用户界面。

现在，你已经了解了React的基本概念，是时候动手试试了！安装React，创建你的第一个组件，感受一下"搭积木"的乐趣吧！

avatar
文章
阅读
粉丝