在前端开发的世界里变化是唯一的不变。Ru果你还在用几年前的老套路写 React 代码，那你可Neng真的要掉队了。特别是随着 React 19 的到来JSX 语法和函数组件的Neng力dou迎来了质的飞跃。今天咱们不聊枯燥的理论，而是像老朋友聊天一样，好好扒一扒这些新特性，kankan它们到底Neng怎么提升我们的开发幸福感。

hen多刚入门的朋友容易把 JSX 简单理解为“在 JS 里写 HTML”。这话虽然没错，但只说对了一半。实际上，JSX 是一种语法 ，它geng像是 JavaScript 和 HTML 之间的一座桥梁。它让我们Neng够利用 HTML 的直观性来描述 UI 结构，同时又不失 JavaScript 强大的逻辑处理Neng力。

你可Neng会好奇，浏览器并不认识 JSX 啊？没错，这就是为什么我们需要 Babel 或者 Vite 这样的工具链。它们在幕后默默工作，把这些kan起来像 XML 的标签编译成浏览器Neng懂的 `React.createElement` 调用。不过作为开发者，我们大可不必操心这些底层细节，只管享受“所见即所得”的编码体验就好。

写代码是给别人kan的，也是给未来的自己kan的。React 也对 HTML 风格的 `` Zuo了兼容。

function CommentDemo {
  return (
    

      {/* 这种写法Zui安全，React 推荐的注释方式 */}
      JSX 注释示例
      {/* 虽然支持 HTML 风格，但在复杂逻辑中还是慎用 */}
      
注释不会被渲染到页面上，但Neng帮你的队友理清思路
    
  );
}

回想 React 早期，类组件满天飞，`this` 指向搞得人头大。但现在函数组件才是绝对的主角。为什么？因为它简单、纯粹。一个函数组件，本质上就是一个返回 JSX 的普通 JavaScript 函数。没有 `constructor`，没有 `this`，没有繁重的样板代码。

这种组件形式不仅易于阅读，geng易于维护。React 团队现在的所有新特性——比如 Actions API、新的 Hooks——dou是优先适配函数组件的。Ke以说拥抱函数组件，就是拥抱 React 的未来。

咱们来kan一个Zui基础的例子。这不仅仅是一个“Hello World”，它是理解 React 组件渲染逻辑的第一步。

// 定义函数组件：接收 props 参数，返回 JSX
function HelloReact19 {
  // 组件内部Ke以写任何 JavaScript 逻辑
  const message = "Hello React 19! 我是函数组件";
  // 返回 JSX：描述 UI 结构
  return (
    

      
这是我写的第一个 React 19 函数组件～
    
  );
}
// 使用组件：像用 HTML 标签一样使用
function App {
  return (
    

       {/* 组件使用时必须闭合标签 */}
    
  );
}
export default App;

Ru果组件只Neng写死内容，那它就没什么用了。我们需要让组件“活”起来这就得靠 `props`。Props 就像是组件的“配置项”，父组件把数据传进来子组件根据数据渲染不同的界面。

现在的Zui佳实践是直接在函数参数里进行解构赋值，这样代码kan起来清爽多了不用满篇dou是 `props.xxx`。

// 接收 props 参数，使用解构赋值简化写法
function Greeting {
  return (
    

      你好，我是 {name}
      
今年 {age} 岁，正在学习 React 19
    
  );
}
// 父组件传递 props
function App {
  return (
    

      {/* 传递 name 和 age 两个参数 */}
      
      
    
  );
}

React 19 真的hen懂开发者。它针对 JSX 语法的一些痛点Zuo了非常实用的增强。这些改动虽然kan起来不大，但在实际开发中Neng极大地减少代码量，让逻辑geng清晰。

以前写 React，Zui烦的一点就是：JSX 必须有一个唯一的根节点。Ru果你想返回两个并列的 `div`，对不起，你得在外面套一层 `Fragment` 或者一个没用的 `div`。这不仅增加了 DOM 层级，kan着也不爽。

React 19 终于把这个限制给去掉了。现在你Ke以直接返回多个同级节点，编译器会自动帮你处理。

// React 19：直接返回多根节点，无需手动写 Fragment
function Navbar {
  return (
    
React 19 - logo
    

      
首页
      
文档
    

  );
}

当然Ru果你需要在循环渲染时给这些节点加 `key`，那还是得显式地写 `Fragment`，毕竟简写的 `<>` 是不支持传属性的。

以前 `Fragment`就是个透明人，完全不存在于 DOM 中，也不Neng加 `className`。但在 React 19 中，显式的 `Fragment` 语法得到了增强。现在你Ke以给 Fragment 添加 `className` 等属性了！这在需要给一组同级节点统一样式时简直不要太好用。

// React 19：Fragment 支持添加 className 等属性
function UserInfo {
  return (
    
      
姓名：{user.name}
      
邮箱：{user.email}
    
  );
}

React 的核心思想是“组件化”。这意味着我们应该把复杂的 UI 拆分成一个个小的、可复用的函数组件，然后再把它们像搭积木一样组合起来。这种拆分不仅让代码geng易于管理，也方便了团队协作。

比如我们要实现一个“用户卡片列表”，Ke以拆成 `UserCard`和 `UserList`两个组件。`UserList` 负责数据管理，`UserCard` 负责具体展示，各司其职。

// 单个用户卡片组件
function UserCard {
  const { name, avatar, desc } = user;
  return (
    

      {name}
      
{desc}
    
  );
}
// 用户列表组件
function UserList {
  // 模拟用户数据
  const users = ;
  return (
    

      用户列表
      {/* 循环渲染 UserCard 组件 */}
      {users.map => (
        
      ))}
    
  );
}
// 根组件
function App {
  return (
    

      
    
  );
}

以前在组件里请求数据，我们得写一堆 `useEffect`，还要定义 `loading`、`error`、`data` 状态，代码瞬间变得又臭又长。React 19 引入了一个实验性的 `use` API，专门用来在组件中直接读取 Promise 的结果。

这简直是异步渲染的神器！你不需要再手动监听 Promise 的状态，`use` 会自动处理，并在数据就绪后触发组件重新渲染。

import { use } from 'react';
// 模拟接口请求：返回 Promise
function fetchUser {
  return new Promise => {
    setTimeout => {
      resolve;
    }, 1000);
  });
}
// 组件中直接用 use 处理 Promise
function UserProfile {
  // use 接收 Promise，返回 resolved 后的数据
  const user = use);
  return (
    

      用户信息
      
姓名：{user.name}
      
年龄：{user.age}
    
  );
}

不过要记住一点：`use` 和其他 Hooks 一样，只Neng在函数组件的顶层或者自定义 Hook 里调用。千万别把它扔到 `if` 语句或者 `for` 循环里否则 React 会报错。

掌握了基本用法，咱们还得聊聊几个容易踩坑的地方，防患于未然。

是关于状态。React 是由状态驱动的，页面的变化本质上就是状态的变化。在函数组件里我们没法像类组件那样直接用 `this.state`，必须得靠 Hooks，比如Zui常用的 `useState`。这需要一点思维转换，但一旦习惯了你会发现这种逻辑分离的方式非常清晰。

虽然 React 19 增强了 JSX，但有些核心原则依然没变。比如所有的自定义组件名必须大写开头，这是 React 区分原生 HTML 标签和自定义组件的依据。Ru果你写成小写，React 会以为你想渲染一个不存在的 HTML 标签，然后报错。

今天我们从 React 19 的基础语法入手，深入探讨了 JSX 的增强特性和函数组件的核心用法。函数组件作为 React 的核心载体，配合 JSX 的直观描述，让我们构建复杂应用变得前所未有的轻松。

React 19 带来的多根节点支持、Fragment 属性增强以及 `use` API，dou体现了 React 团队致力于提升开发者体验的决心。这些kan似细微的改进，在实际工程中累积起来就是效率的巨大飞跃。

当然React 的世界远不止于此。下一步，建议大家继续深入挖掘 React 的内置 Hooks，这是实现复杂状态管理和副作用处理的关键。前端技术日新月异，保持好奇心和学习热情，我们才Neng在这条路上走得geng远。

Ru果这篇文章对你有所帮助，欢迎点赞、收藏、转发～ 有任何问题或者想法，也欢迎在评论区留言，咱们一起交流进步！