Vue3 转 React 之路：一日通关 React 基础概念与实战指南

很多前端开发者都经历过从 Vue3 到 React 的技术栈切换。我最近也加入了这个行列。最开始确实有些不适应，毕竟 Vue3 的 Composition API 用习惯了，突然要面对 React 的 JSX 和各种 Hook，确实需要一个适应过程。这篇文章就记录下我 Day 1 的 React 基础概念学习笔记，希望能帮助同样在做技术栈迁移的朋友快速上手。

JSX：React 的声明式 UI 描述语言

JSX 是 React 中用于描述 UI 界面的语法糖。它看起来很像 HTML，但实际上是 JavaScript 的扩展。Vue3 里我们用 template 来编写模板，React 里就靠 JSX 了。

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

// 渲染到 DOM
ReactDOM.render(element, document.getElementById('root'));

在 Vue3 中，我们使用 v-bind 和 v-on 来绑定数据和事件，而在 React 中，我们直接在 JSX 中使用 JavaScript 表达式。

// React 事件绑定
function handleClick() {
  alert('Button clicked!');
}

const button = <button onClick={handleClick}>Click me</button>;

组件（Components）：React 的基石

React 的核心思想是组件化。组件是独立、可复用的 UI 单元。在 Vue3 中，我们使用 .vue 文件来定义组件，而在 React 中，我们可以使用函数或者类来定义组件。

函数组件

// 函数组件示例
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用组件
const element = <Welcome name="Sara" />;

类组件

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

// 使用组件
const element = <Welcome name="Sara" />;

类组件现在已经比较少用了，官方更推荐函数组件配合 Hooks。函数组件简洁明了，更容易理解和测试。并且配合Hooks可以实现类组件的所有功能，甚至更强大。

Props：组件间的通信桥梁

Props 是 React 中组件之间传递数据的机制。类似于 Vue3 中的 props。Props 是只读的，组件不能修改自己的 props。

// Props 示例
function UserGreeting(props) {
  return <h1>Welcome back, {props.username}!</h1>;
}

// 使用组件，传递 username prop
const element = <UserGreeting username="JohnDoe" />;

State：组件的内部数据

State 是 React 组件的内部数据，组件可以修改自己的 state。State 的改变会触发组件的重新渲染。在 Vue3 中，我们使用 ref 和 reactive 来管理状态，而在 React 中，我们使用 useState Hook。

// State 示例
import React, { useState } from 'react';

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

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

useState Hook 返回一个包含状态值和一个更新状态值的函数的数组。我们可以使用解构赋值来获取它们。

深入理解 React 基础概念：Hooks

Hooks 是 React 16.8 引入的新特性，它允许你在函数组件中使用 state 和其他的 React 特性。常用的 Hooks 包括：

• useState：用于管理组件的状态。
• useEffect：用于处理副作用，例如数据获取、订阅事件等。类似于 Vue3 的 onMounted、onUpdated、onUnmounted 等生命周期钩子。
• useContext：用于访问 context，实现跨组件的数据共享。
• useReducer：用于管理复杂的状态逻辑，类似于 Vuex。

// useEffect 示例
import React, { useState, useEffect } from 'react';

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

  // 类似于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用 document API 更新文档标题
    document.title = `You clicked ${count} times`;
  });

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

useEffect 的第二个参数是一个数组，用于指定 effect 依赖的状态。只有当依赖的状态发生改变时，effect 才会执行。如果传递一个空数组 []，则 effect 只会在组件挂载时执行一次，类似于 componentDidMount。

实战避坑：从 Vue3 的思维惯性中跳出来

从 Vue3 迁移到 React，最大的挑战在于思维模式的转变。以下是一些常见的坑：

• 直接修改 state： 在 React 中，必须使用 setState 或者 useState 返回的更新函数来更新 state，直接修改 state 不会触发组件的重新渲染。
• 在 render 函数中执行副作用： React 的 render 函数应该是一个纯函数，不应该包含任何副作用。副作用应该放在 useEffect Hook 中执行。
• 忘记添加 key prop： 在渲染列表时，每个列表项都需要添加一个唯一的 key prop，用于帮助 React 识别列表项，提高渲染性能。类似于 Vue3 的 v-for 里的 :key。
• 过度使用 context： Context 用于跨组件的数据共享，但过度使用 context 会导致组件之间的耦合度增加，不利于组件的复用和测试。类似于 Vuex，需要谨慎设计。
• eslint配置和代码风格统一： 项目初始化时就应该配置好eslint，统一代码风格，保证项目的可维护性，可以使用airbnb、standard等流行的eslint配置，也可以自定义一套。

总结

虽然只是 Day 1 的学习，但我相信已经对 React 的基础概念有了初步的了解。接下来，我会继续深入学习 React 的高级特性，例如 Context、Redux、React Router 等，并将这些知识应用到实际项目中。希望这篇文章能够帮助正在学习 React 的朋友们，一起进步！从 Vue3 到 React 的迁移，是一个不断学习和探索的过程。记住，保持好奇心和学习的热情，你就能克服任何挑战。关于Nginx的反向代理和负载均衡，以及使用宝塔面板简化部署，后续我也会分享更多实战经验，敬请期待！