react学习1：基本概念

什么是JSX？

JSX 是 React 中用于描述 UI 界面的一种语法扩展，它看起来很像 HTML，但本质上是 JavaScript 的语法糖，最终会被编译成普通的 JavaScript 代码（通过 Babel 等工具转换）。

为什么需要 JSX？

React 认为 UI 和逻辑不应该严格分离（比如传统的 HTML、CSS、JS 分离模式），而应该将相关的逻辑和 UI 封装到组件中。JSX 就是为了让开发者能更直观地编写 "包含逻辑的 UI" 而设计的，它既保留了 JavaScript 的灵活性，又具备 HTML 的可读性。

js 复制代码

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

JSX 最终会被编译为 React.createElement() 函数调用，例如下面的代码会被转换为：

ini 复制代码

const element = React.createElement('h1', null, 'Hello, JSX!');

这意味着 JSX 可以像普通变量一样赋值、作为参数传递、作为返回值等。

单一根元素

JSX 表达式必须有一个根元素包裹，否则会报错。如果不想多一个额外的标签，可以用 React 提供的 <Fragment>（简写为 <> 和 </>）：

javascript 复制代码

const element = (
  <>
    <h1>标题</h1>
    <p>内容</p>
  </>
);

JSX 融入 javascript

在 JSX 中，可以通过 {}（大括号）嵌入 JavaScript 变量、表达式或计算逻辑，这是 JSX 结合 JavaScript 灵活性的核心特性。

嵌入变量

直接在 {} 中放入已定义的 JavaScript 变量，JSX 会自动解析并渲染变量的值。

javascript 复制代码

// 定义变量
const name = "React";
const age = 5;

// 在 JSX 中嵌入变量
const element = (
  <div>
    <p>框架名称：{name}</p> // 嵌入字符串变量
    <p>流行年限：{age} 年</p> // 嵌入数字变量
  </div>
);

嵌入表达式

{} 中可以放入任意JavaScript 表达式（即能返回值的代码片段），包括：

算术运算

css 复制代码

const element = <p>总和：{a + b}</p>; // 渲染为 <p>总和：30</p>

三元运算符（条件判断）

javascript 复制代码

const element = (
  <div>
    {isLoggedIn ? <p>已登录</p> : <p>请登录</p>}
  </div>
);

函数调用（返回值会被渲染）

javascript 复制代码

// 定义返回值的函数
function formatName(user) {
  return `${user.firstName} ${user.lastName}`;
}

const user = { firstName: "John", lastName: "Doe" };

const element = <h1>Hello, {formatName(user)}!</h1>;
// 渲染为 <h1>Hello, John Doe!</h1>

数组 / 对象的属性访问

css 复制代码

const person = {
  name: "Alice",
  hobbies: ["读书", "编程"]
};

const element = (
  <div>
    <p>姓名：{person.name}</p>
    <p>爱好：{person.hobbies[0]}</p> // 访问数组第一个元素
  </div>
);

逻辑运算（&&、||）

注意：只能嵌入表达式，不能嵌入语句 ，{} 中不能放 if、for、switch 等语句（这些是 "语句"，不是 "表达式"）。如需条件判断，可用三元运算符或 && 替代。

事件

事件命名方式

React 事件采用驼峰式命名（camelCase），而不是原生 HTML 的全小写。例如：

原生 HTML：onclick、onchange
React：onClick、onChange

事件处理函数的写法

在 React 中，事件处理函数通常作为属性值 传递给元素，且需要用 {} 包裹（因为是 JavaScript 表达式）。

javascript 复制代码

function handleClick() {
  console.log('按钮被点击了');
}

function MyComponent() {
  return (
    // 注意：onClick 是驼峰式，值是函数本身（不要加括号，否则会立即执行）
    <button onClick={handleClick}>点击我</button>
  );
}

向事件处理函数传递参数

如果需要传递额外参数，可以在事件处理函数中包裹一层箭头函数：

javascript 复制代码

function handleDelete(id) {
  console.log(`删除 ID 为 ${id} 的项`);
}

function MyComponent() {
  return (
    // 箭头函数接收事件对象 e，再传递给 handleDelete
    <button onClick={(e) => handleDelete(123, e)}>
      删除
    </button>
  );
}

React 会将原生浏览器事件封装为合成事件对象 （SyntheticEvent），它具有与原生事件类似的属性和方法（如 e.target、e.preventDefault()），但实现了跨浏览器兼容（在所有浏览器中表现一致）。