Vue3 到 React：一日入门，掌握 React 核心概念与基础语法

许多前端开发者都经历过从 Vue3 转到 React 的过程。今天，我们就从一个过来人的角度，一起学习 React 的基础概念，帮助大家快速入门。我将结合 Vue3 的经验，对比着讲解 React 的特性，让大家更容易理解和掌握。

什么是 React？

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。它采用组件化的思想，可以将页面拆分成一个个独立、可复用的组件，最终组合成完整的应用。这与 Vue3 的组件化思想非常相似，如果你熟悉 Vue3，那么学习 React 会轻松很多。

React 的核心特点包括：

• 组件化 (Component-Based)：React 应用程序由独立的、可重用的组件构成。每个组件都有自己的逻辑和渲染方式。
• 虚拟 DOM (Virtual DOM)：React 使用虚拟 DOM 来提高性能。当组件状态发生变化时，React 会先在虚拟 DOM 中进行比较，然后只更新实际 DOM 中发生变化的部分。
• JSX：JSX 是一种 JavaScript 语法扩展，允许你在 JavaScript 代码中编写类似 HTML 的结构。
• 单向数据流 (Unidirectional Data Flow)：数据从父组件流向子组件，使得数据流向更加清晰可控。

JSX 语法初探

JSX 是 React 中编写 UI 的主要方式，它允许你在 JavaScript 代码中混合 HTML 标记。例如：

function MyComponent() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

JSX 最终会被 Babel 转换为 JavaScript 代码，所以你不用担心浏览器兼容性问题。需要注意的是，JSX 必须包含在一个根元素中，如果你要返回多个元素，可以使用 Fragment：

function MyComponent() {
  return (
    <>
      <h1>Hello, React!</h1>
      <p>This is a paragraph.</p>
    </>
  );
}

组件的定义和使用

React 中有两种定义组件的方式：函数组件和类组件。函数组件是 React 16.8 之后推荐使用的方式，因为它们更简洁、易于测试。

// 函数组件
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

// 类组件
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
      </div>
    );
  }
}

// 使用组件
<MyComponent name="World" />

组件之间可以通过 props 传递数据。Props 是只读的，组件不应该修改 props 的值。

状态 (State) 和生命周期

React 组件可以拥有自己的状态 (state)。状态是组件内部的数据，可以随着时间的推移而发生变化。当状态发生变化时，组件会重新渲染。

在函数组件中使用 useState Hook 来管理状态：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count 初始值为 0

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

在类组件中使用 this.state 和 this.setState 来管理状态：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }; // 初始化 state
  }

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

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

类组件还有一些生命周期方法，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount，可以在组件的不同阶段执行一些操作。在使用 useEffect Hook 的函数组件中，也可以模拟这些生命周期。

事件处理

React 使用驼峰命名法来处理事件，例如 onClick、onChange 等。事件处理函数通过 props 传递给组件。

function MyButton(props) {
  return (
    <button onClick={props.onClick}>{props.label}</button>
  );
}

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <MyButton label="Click me" onClick={handleClick} />
  );
}

从 Vue3 到 React 的一些关键差异

• 数据绑定：Vue3 使用双向数据绑定（v-model），而 React 默认是单向数据流。React 中需要手动处理事件来更新状态。
• 模板语法：Vue3 使用模板语法，而 React 使用 JSX。JSX 更灵活，但需要学习一些新的语法。
• 状态管理：Vue3 提供了 Vuex 用于状态管理，而 React 可以使用 Redux、Context API 或 Zustand 等方案。
• 组件通信：Vue3 中可以使用 props 和 emit 进行组件通信，React 中主要使用 props 和回调函数。

实战避坑：常见问题及解决方案

• 忘记在 JSX 中使用 {} 来插入 JavaScript 表达式：这是新手常犯的错误。例如，<div>Hello, name!</div> 是错误的，应该写成 <div>Hello, {name}!</div>。
• 忘记给列表元素添加 key 属性：在渲染列表时，React 需要使用 key 属性来标识每个元素。key 属性应该是一个唯一的字符串或数字，例如数组元素的 id。
• 直接修改 state 的值：在 React 中，应该使用 setState 方法来更新状态，而不是直接修改 this.state 的值。例如，this.state.count = this.state.count + 1 是错误的，应该写成 this.setState({ count: this.state.count + 1 })。
• useEffect 无限循环：useEffect 的依赖项数组非常重要，如果依赖项数组为空，则 useEffect 只会在组件挂载和卸载时执行一次。如果依赖项数组包含一些变量，则 useEffect 会在这些变量发生变化时执行。如果依赖项数组包含组件自身的状态变量，并且在 useEffect 中又修改了这些状态变量，则可能会导致无限循环。解决办法是仔细检查依赖项数组，确保只包含真正需要依赖的变量，并避免在 useEffect 中修改依赖项的值。

总结

通过本文的介绍，相信大家已经对 React 的基础概念有了初步的了解。React 的学习曲线可能比 Vue3 稍陡峭一些，但只要掌握了核心概念，就能快速上手。在后续的文章中，我们将继续深入学习 React 的高级特性，例如 Hook、Context API、Redux 等，以及如何使用 React 构建复杂的应用。例如，在大型项目中，前端工程师通常需要面对 Nginx 反向代理配置、宝塔面板的安装与配置、以及高并发场景下的性能优化问题。 熟练掌握 React 和相关技术栈，才能在实际工作中游刃有余。