363045841 的博客

Appearance

JSX（JavaScript XML）是一个语法扩展，用于在 JavaScript 代码中嵌入 HTML 结构。它通常与 React 一起使用，可以让开发者以类似 HTML 的方式编写 UI 组件，同时保持 JavaScript 的功能强大。JSX 代码最终会被 Babel 或其他编译器转化为标准的 JavaScript 代码。

1. JSX 基本语法 ​

1.1 JSX 元素 ​

JSX 最基础的用法就是嵌入 HTML 标签：

jsx
const element = <h1>Hello, world!</h1>;

这行代码创建了一个包含 "Hello, world!" 的 <h1> 元素。JSX 标签就像普通 HTML 标签，但它们会被转换成 React.createElement 调用。

1.2 表达式插值 ​

你可以在 JSX 中使用花括号 {} 来插入 JavaScript 表达式：

jsx
const name = 'Alice';
const greeting = <h1>Hello, {name}!</h1>;

这里的 {name} 会被替换为 "Alice"。

1.3 属性 ​

在 JSX 中，HTML 属性和 React 属性是类似的，但有些命名不同。比如，class 在 JSX 中写作 className，for 写作 htmlFor。

jsx
const element = <div className="container" onClick={handleClick}>Click me</div>;

1.4 子元素 ​

你可以在 JSX 中嵌套元素。例如，可以创建一个包含多个子元素的 <div>：

jsx
const element = (
  <div>
    <h1>Welcome!</h1>
    <p>This is a paragraph.</p>
  </div>
);

2. JSX 特性 ​

2.1 自闭合标签 ​

JSX 支持自闭合标签，类似 HTML。像 <img>, <input> 等没有内容的元素需要加 / 来闭合：

jsx
const image = <img src="image.jpg" alt="example" />;

2.2 条件渲染 ​

在 JSX 中，可以使用 JavaScript 表达式进行条件渲染，例如使用三元运算符或逻辑运算符：

jsx
const isLoggedIn = true;
const button = isLoggedIn ? <button>Logout</button> : <button>Login</button>;

或者使用 && 操作符：

jsx
const showWarning = true;
const warning = showWarning && <p>Warning: Something went wrong!</p>;

2.3 循环渲染 ​

你可以使用 JavaScript 的 map() 方法来动态生成多个 JSX 元素：

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

在这里，我们使用 map 遍历数组，生成一个 li 元素列表，并为每个元素指定唯一的 key。

3. JSX 的事件处理 ​

JSX 允许你处理用户的事件，比如点击事件。事件名称使用小驼峰命名法，比如 onClick、onChange 等。

jsx
function handleClick() {
  alert("Button clicked!");
}

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

4. JSX 变量插值 ​

你可以在 JSX 中嵌入任何有效的 JavaScript 表达式，包括函数调用和运算：

jsx
const a = 5;
const b = 10;
const sum = <p>{a + b}</p>; // 输出 15

5. JSX 与 JavaScript 的区别 ​

  1. 标签大小写：在 JSX 中，所有 HTML 标签（如 div, span 等）必须是小写，而自定义组件的名称需要大写，如 <MyComponent />。

  2. 属性命名：在 JSX 中，某些 HTML 属性有不同的命名。例如，class 变成 className，for 变成 htmlFor，style 属性也不直接传递字符串，而是一个 JavaScript 对象。

    jsx
    const element = <input className="input-field" style={{ backgroundColor: 'red' }} />;

6. JSX 注释 ​

JSX 中的注释与 JavaScript 中的注释有所不同。在 JSX 内部，注释必须使用 {/* 注释内容 */} 的语法：

jsx
const element = (
  <div>
    {/* This is a comment */}
    <h1>Hello, world!</h1>
  </div>
);

7. JSX 片段（Fragments） ​

有时我们不想给元素添加额外的 DOM 节点，可以使用 React.Fragment 或简写形式 <> </>：

jsx
const element = (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
);

8. JSX 性能 ​

JSX 最终会被 Babel 转换为 React.createElement() 调用，这个过程是高效的，因为 React 使用虚拟 DOM 来优化渲染性能。

9. JSX 与函数组件结合 ​

JSX 最常见的用法是在函数组件中，它使得 UI 组件更加简洁和声明式：

jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Alice" />;

10. 总结 ​

JSX 是 React 中非常重要的语法，它让开发者可以像编写 HTML 一样编写 UI，同时也提供了 JavaScript 强大的功能。了解 JSX 的基本语法可以帮助你更好地理解 React 和前端开发中的其他相关技术。

你有在实际项目中使用 JSX 吗？如果有遇到什么问题，欢迎提出来，我可以帮助你解决！

TypeScript JSX（TSX）基本语法 ​

TSX（TypeScript + JSX）是 TypeScript 结合 React 组件的一种语法扩展，主要用于在 TypeScript 中编写 JSX 代码。TSX 主要应用于 React 项目，它允许在 TypeScript 中使用类似 HTML 的语法编写 UI 组件，同时提供类型检查。

1. 基本语法 ​

TSX 语法与 JSX 基本一致，但具有 TypeScript 的类型检查和增强功能。

1.1 组件定义 ​

函数式组件

tsx
import React from "react";

interface Props {
  name: string;
  age?: number; // 可选属性
}

const Hello: React.FC<Props> = ({ name, age }) => {
  return <h1>Hello, {name}! {age && `You are ${age} years old.`}</h1>;
};

export default Hello;

类组件

tsx
import React, { Component } from "react";

interface Props {
  name: string;
}

interface State {
  count: number;
}

class Counter extends Component<Props, State> {
  state: State = { count: 0 };

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

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

export default Counter;

2. TSX 特性 ​

2.1 元素渲染 ​

tsx
const element = <h1>Hello, world!</h1>;

2.2 变量插值 ​

tsx
const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

2.3 条件渲染 ​

tsx
const isLoggedIn = true;
const message = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in</h1>;

2.4 循环渲染 ​

tsx
const items = ["Apple", "Banana", "Cherry"];

const List = () => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

3. 事件处理 ​

3.1 绑定事件 ​

tsx
const Button = () => {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return <button onClick={handleClick}>Click Me</button>;
};

3.2 传递参数 ​

tsx
const Button = () => {
  const handleClick = (name: string) => {
    alert(`Hello, ${name}!`);
  };

  return <button onClick={() => handleClick("Alice")}>Click Me</button>;
};

4. 组件通信 ​

4.1 父组件向子组件传值 ​

tsx
interface Props {
  message: string;
}

const Child = ({ message }: Props) => <h1>{message}</h1>;

const Parent = () => <Child message="Hello from Parent" />;

4.2 子组件向父组件传值（回调函数） ​

tsx
interface Props {
  onMessage: (msg: string) => void;
}

const Child = ({ onMessage }: Props) => {
  return <button onClick={() => onMessage("Hello, Parent!")}>Send Message</button>;
};

const Parent = () => {
  const handleMessage = (msg: string) => {
    alert(msg);
  };

  return <Child onMessage={handleMessage} />;
};

5. Hooks ​

5.1 useState ​

tsx
import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState<number>(0);

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

5.2 useEffect ​

tsx
import { useEffect, useState } from "react";

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Seconds: {seconds}</p>;
};

6. TSX 高级用法 ​

6.1 泛型组件 ​

tsx
interface ListProps<T> {
  items: T[];
  render: (item: T) => JSX.Element;
}

const List = <T,>({ items, render }: ListProps<T>) => (
  <ul>{items.map((item, index) => <li key={index}>{render(item)}</li>)}</ul>
);

const App = () => (
  <List items={[1, 2, 3]} render={(num) => <span>{num}</span>} />
);

6.2 自定义 Hooks ​

tsx
import { useState } from "react";

const useCounter = (initialValue: number) => {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  return { count, increment };
};

const Counter = () => {
  const { count, increment } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increase</button>
    </div>
  );
};

7. 总结 ​

TSX 是 TypeScript 结合 JSX 语法的强大工具，具有：

  • 类型安全：确保组件的 props 和状态符合预期。
  • 增强的可读性：支持 JSX 语法，提高 UI 代码的可读性。
  • 良好的开发体验：提供智能提示和类型检查，减少运行时错误。

如果你在 Vue3 的 setup 语法糖中使用 tsx，可以结合 defineComponent 和 h 函数，例如：

tsx
import { defineComponent, h } from "vue";

export default defineComponent({
  setup() {
    return () => h("div", "Hello TSX in Vue!");
  },
});

你更倾向于在 Vue 还是 React 中使用 TSX？如果是在 Vue 里，我可以提供 Vue3 + TSX 的相关示例。