JSX 入门指南

JSX是 javaScript和xml（HTML）的缩写，js代码中编写HTML模版结构，是React编写模版UI的方式。

优点：

• HTML的声明式模版写法
• js的可编程能力

本质：jsx不是标准的js语法，而是js语法的拓展，浏览器本身并不能识别，需要通过解析工具（Babel）做解析才能被浏览器运行。

（一）JSX语法

大括号{}

JSX可以通过**大括号{}**识别JavaScript的表达式，比如变量、函数调用、方法调用等

注意：

• if语句、switch语句、变量声明不属于表达式
• 内联 style 属性 使用驼峰命名法编写

使用场景

• 用作 JSX 标签内的文本
• 用作紧跟在 = 符号后的 属性

<div>
  this is react
  {count}
  <div style={{color:'red',backgroundColor:'b'}}>this is js</div>
</div>

导入导出方式

同一文件中，有且仅有一个默认导出，但可以有多个具名导出！

只能返回一个根元素

如果想要在一个组件中包含多个元素，需要用一个父标签把它们包裹起来

<> <>这个空标签被称作 Fragment。React Fragment 允许你将子元素分组，而不会在 HTML 结构中添加额外节点。

export default function MyApp(){
	return (
		<>
			<h1>hello react~</h1>
		<>
	);
}

（二）Jsx使用技巧

1. 使用条件渲染

   在 JSX 中，可以通过条件语句或逻辑运算符来动态渲染内

   • 使用三元运算符、逻辑与（&&）、if、switch等

   const isLoggedIn = true;
   const element = (
     <div>
       {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
       {hasMessages && <p>You have new messages!</p>}
     </div>
   );
   

2. 列表渲染

   使用 map 方法可以轻松渲染列表数据。记得为每个元素添加唯一的 key 属性，以帮助 React 识别哪些元素发生了变化。

   const items = ['Apple', 'Banana', 'Cherry'];
   const list = (
     <ul>
       {items.map((item, index) => (
         <li key={index}>{item}</li>
       ))}
     </ul>
   );
   

   注意：如果列表项可能发生变化（如排序、添加、删除），key 应该使用唯一标识符（如 id），而不是 index。

3. JSX 中的 Props 展开

   可以使用展开运算符 (...) 将对象的属性批量传递给组件。

   const props = { name: 'John', age: 30 };
   const element = <UserProfile {...props} />;
   

4. JSX 中的组件复用

   将重复的 JSX 提取为可复用的组件，避免代码冗余。

   function ListItem({ text }) {
     return <li>{text}</li>;
   }
   
   const items = ['Apple', 'Banana', 'Cherry'];
   const list = (
     <ul>
       {items.map((item, index) => (
         <ListItem key={index} text={item} />
       ))}
     </ul>
   );
   

5. JSX 中的事件处理

   • 在 JSX 中，事件处理函数的属性名采用驼峰命名法（如 onClick、onChange）。

   • 通常将事件处理程序命名为 handle，后接事件名。而作用props接收参数的函数用 on 开头如 onClick={handleClick}，onMouseEnter={handleMouseEnter}，onSquareClick.

   • [e.stopPropagation()] 阻止触发绑定在外层标签上的事件处理函数。

   • [e.preventDefault()] 阻止少数事件的默认浏览器行为。

   function handleClick() {
     alert('Button clicked!');
   }
   
   const element = <button onClick={handleClick}>Click me</button>;
   

   如果需要传递参数，可以使用箭头函数,绑定函数引用

   function handleClick(message) {
     alert(message);
   }
   
   const element = <button onClick={() => handleClick('Hello!')}>Click me</button>;
   

   既传递事件对象，又传递自定义参数，形参顺序与实参顺序对应

   const App = () => {
       {/*  事件参数*/}
       const handleClick=(name,e)=>{
           console.log("按钮被点击了",name,e);
       }
       return (
         <div>
             <button onClick={(e)=>handleClick("tom",e)}>点我</button>
         </div>
     );
   };
   

6. 标签样式

   你可以使用 className 来指定一个 CSS 的 class。它与 HTML 的 class 属性的工作方式相同：

   <img className="avatar" />
   

（三）拓展

map函数

• map() 会遍历原数组，返回一个新数组

• key 属性：必须为每个元素添加唯一 key（用于 React 的虚拟 DOM 优化），帮助 React 识别哪些元素被修改/添加/删除

  const numbers = [1, 2, 3];
  
  function List() {
    return (
      <ul>
        {numbers.map((number) => (
          <li key={number}>{number}</li> // 必须添加 key
        ))}
      </ul>
    );
  }
  

  因为箭头函数会隐式地返回位于 => 之后的表达式，所以你可以省略 return 语句。

  如果你的 => 后面跟了一对花括号 { ，那你必须使用 return 来指定返回值！

  //  修正：使用括号隐式返回 或 显式 return
  {numbers.map(number => (
    <li>{number}</li>
  ))}
  
  {numbers.map(number => {
    return <li>{number}</li>;
  })}
  

filter函数

• filter() 是一个常用的数组方法，用于从数组中筛选出符合条件的元素，并返回一个新数组。
• 不能直接修改原数组

const newArray = array.filter((item, index, array) => {
  return condition; // 返回 true 保留，false 过滤
});

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 20 },
];

function UserList() {
  // 过滤出年龄大于 22 的用户
  const filteredUsers = users.filter(user => user.age > 22);

  return (
    <ul>
      {filteredUsers.map(user => (
        <li key={user.id}>
          {user.name} - {user.age} years old
        </li>
      ))}
    </ul>
  );
}

模版字符串

• 模板字符串使用反引号（`）包裹，而不是传统的单引号（’ '）或双引号（" "）。

• 模板字符串支持通过 ${} 嵌入变量或表达式

• 模板字符串可以直接换行，而不需要使用 \n 或字符串拼接。

• 模板字符串可以嵌套使用

  const name = 'Alice';
  const age = 25;
  const message = `My name is ${name} and I am ${age} years old.`;
  
  const text = `Line 1
  Line 2
  Line 3`;
  
  const isLoggedIn = true;
  const username = 'Alice';
  const message = `Welcome, ${isLoggedIn ? username : 'Guest'}!`;
  
  console.log(message); // "Welcome, Alice!"
  

…对象展开

1. 对象展开通过 ... 运算符展开对象的可枚举属性，后面的属性会覆盖前面的同名属性：

   const obj1 = { a: 1, b: 2 };
   const obj2 = { b: 3, c: 4 };
   const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }
   

2. 创建新对象（避免直接修改）

   在 React 中，状态更新需要保持不可变性（Immutable）：

   //  正确：创建新对象
   const newState = { ...oldState, key: newValue };
   
   //  错误：直接修改原对象（违反不可变性）
   oldState.key = newValue;
   

3. 动态添加属性

   const dynamicKey = 'age';
   const person = { name: 'Alice' };
   const updatedPerson = { ...person, [dynamicKey]: 25 }; // { name: 'Alice', age: 25 }
   

4. 合并嵌套对象

   对象展开是浅拷贝（Shallow Copy），嵌套对象仍需手动处理：

   const user = { 
     name: 'Alice', 
     details: { age: 25 }
   };
   
   // 修改嵌套对象时需逐层展开
   const updatedUser = { 
     ...user, 
     details: { ...user.details, age: 26 } 
   };
   

5. 浅拷贝问题

   对象展开只能复制对象的一层属性，嵌套对象会保持引用：

   const original = { a: 1, nested: { b: 2 } };
   const copy = { ...original };
   
   copy.nested.b = 3;
   console.log(original.nested.b); // 3（原对象也被修改）