基础语法

初步认识

React 应用程序是由组件组成的，React 组件是返回标签的 JavaScript 函数：

react

function MyButton() {
  return <button>我是一个按钮</button>;
}

然后就可以将组件嵌套到另一个组件中。并且React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。

react

export default function MyApp() {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyButton />
    </div>
  );
}

JSX

以上的标签语法被称为JSX，是js语法的扩展。语法上增加类型为tsx。

使用规则：

必须闭合标签
不能返回多个JSX标签，包裹到一个共享的父级
可以使用空的<>...</>包裹

react

function AboutPage() {
  return (
    <>
      <h1>关于</h1>
      <p>
        你好。
        <br />
        最近怎么样？
      </p>
    </>
  );
}

参考资料：

JSX 最早由React 团队在 2013 年推出，作为 React 框架的核心特性之一。其设计初衷是为了解决直接使用React.createElement函数创建虚拟 DOM 时代码冗长、可读性差的问题。

受 XML/HTML 启发，但本质是 JavaScript 扩展

JSX 的语法形式借鉴了XML/HTML 的标签结构，允许开发者在 JavaScript 中直接编写类似 HTML 的代码。然而，其本质是 JavaScript 的语法扩展，需通过编译器（如 Babel）转换为浏览器兼容的 JavaScript，并处理高版本语法降级，使其能在不同环境中运行
例如，JSX 中的标签会被转换为React.createElement函数调用（React 17 后改为_jsx函数），最终生成描述 UI 的 JavaScript 对象（即 React 元素）
JSX 被广泛视为一种语法糖，其目的是简化 UI 的声明式编写，提升代码可读性和开发效率。例如，它允许在标签中直接嵌入 JavaScript 表达式（通过{}），动态生成内容。
对比模板语法（如 Vue 的模板），JSX 的优势在于完全利用 JavaScript 的编程能力，例如条件渲染、循环和函数调用，而无需学习额外的 DSL（领域特定语言）

TSX

1.tsx如何使用泛型

正常写泛型语法会跟tsx语法冲突，他会把泛型理解成是一个元素，解决方案后面加一个,即可

typescript

function App() {
  const value: string = '小满'
  const clickTap = <T,>(params: T) => console.log(params)
  return (
    <>
      <div onClick={() => clickTap(value)}>{value}</div>
    </>
  )
}

2.tsx如何渲染html代码片段

dangerouslySetInnerHTML 的值是一个对象，该对象包含一个名为 __html 的属性，且值为你想要插入的 HTML 字符串

javascript

function App() {
  const value: string = '<section style="color:red">小满</section>'
  return (
    <>
        <div dangerouslySetInnerHTML={{ __html: value }}></div>
    </>
  )
}

3.tsx如何遍历dom元素

使用map遍历返回html标签即可。map可以返回新的数组。foreach不合适，没有返回值。

typescript

function App() {
  const arr: string[] = ["小满","中满","大满"]
  return (
    <>
        {
            arr.map((item) => {
                return <div>{item}</div>
            })
        }
    </>
  )
}

4.tsx如何编写条件语句

使用三元表达式就可以了

javascript

const flag:boolean = true
return (
<>
{
flag ? <div>真的</div> : <div>假的</div>
}
</>
)
}
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq1195566313/article/details/141966390"
function App() {
  const flag:boolean = true
  return (
    <>
        {
           flag ? <div>真的</div> : <div>假的</div>
        }
    </>
  )
}

5.tsx注意事项

{}插值语句内不允许编写**switch``if``变量声明或者直接放入对象本体**

javascript

//错误用法
function App() {
  const obj = { name: '小满' }
  return (
    <>
      {obj}
    </>
  )
}
//正确用法
function App() {
  const obj = { name: '小满' }
  return (
    <>
      {obj.name}
      {JSON.stringify(obj)}
    </>
  )
}

javascript

//错误用法
function App() {
  const flag:boolean = true
  return (
    <>
       {
        if(flag){
          <p>1</p>
        }else{
          <p>2</p>
        }
       }
    </>
  )
}
//正确用法
function App() {
  const flag:boolean = true
  return (
    <>
       {
        flag ? <div>1</div> : <div>2</div>
       }
    </>
  )
}

添加样式

在 React 中，使用className来指定一个 CSS 的 class。与 HTML 的class属性的工作方式相同：

react

<img className="avatar"/>

绑定多个class(className)

typescript

function App() {
  const a:string = 'A'
  return (
    <>
      <div className={`${a} class2`}>{value}</div>
    </>
  )
}

绑定样式style

javascript

  const styles = { color: 'red' }
  return (
    <>
      <div style={styles}>test</div>
    </>
  )
}"
function App() {
  const styles = { color: 'red' }
  return (
    <>
      <div style={styles}>test</div>
    </>
  )
}

显示数据

使用{}在标签中嵌套变量。

1.插值语句：{},展示字符串、数字、数组（普通类型，里面是对象不行）、或者Dom元素，直接展示布尔值不行，一般用于布尔值。支持Api调用

2.直接展示对象需要序列化

3.绑定属性也使用{}，class比较特殊，使用className，多个class使用模板语法

4.绑定style是一个对象

react

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

关于style=并不是一个特殊的语法。

外层{}是 JavaScript 表达式，JSX 中所有 JavaScript 表达式都需要用{}包裹。告诉react这里需要执行 JavaScript 代码。

内层的大括号表示一个JavaScript 对象，用于描述样式规则。React 的行内样式强制要求传入JavaScript 对象，不能传入html中传统的字符串，这样避免重复解析 CSS 字符串，对象结构更易被 JavaScript 引擎优化。

5.添加html代码片段

条件渲染

根据条件渲染组件。

方法一：条件判断后赋值引入组件。

javascript

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

方法二：在jsx内部判断使用，更为简洁

react

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>
//或者
<div>
  {isLoggedIn && <AdminPanel />}
</div>

列表渲染

依赖 JavaScript 的特性，例如for 循环和array 的 map()函数来渲染组件列表。

<li>有一个key属性。对于列表中的每一个元素，应该传递一个字符串或者数字给key，用于在其兄弟节点中唯一标识该元素。

typescript

const products = [
  { title: '卷心菜', isFruit: false, id: 1 },
  { title: '大蒜', isFruit: false, id: 2 },
  { title: '苹果', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product => (
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  ));

  return (
    <ul>{listItems}</ul>
  );
}

响应事件

给组件绑定响应事件。

1.使用驼峰onClick，传参需要高阶函数。

react

//声明事件函数
function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
  //绑定事件
    <button onClick={handleClick}>
      点我
    </button>
  );
}

2.如果需要使用泛型函数，需要纠正泛型<T>为<T,>，以防被理解为一个元素标签。

typescript

 function handleClick<T,>(params:T) {
    alert(params);
  }

更新界面

使用useState 声明state 变量，用于存储信息展示并更新。

按照惯例使用数组解构来命名状态变量，例如[something, setSomething]。

如果多次渲染同一个组件，每个组件都会拥有自己的 state。

react

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>独立更新的计数器</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

每个按钮会 “记住” 自己的count，而不影响其他按钮。

Hook

以use开头的函数被称为Hook。useState是 React 提供的一个内置 Hook。Hook 比普通函数更为严格。只能在组件（或其他 Hook）的顶层调用 Hook。如果想在一个条件或循环中使用useState，需要提取一个新的组件并在组件内部使用它。

组件间共享数据

prop

在 MyApp中声明数据和事件，通过prop将数据和事件传递给子组件，实现共同修改一个数据

typescript

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>共同更新的计数器</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      点了 {count} 次
    </button>
  );
}

//绑定样式style

vue3+ts商城项目

基础知识

组件使用

vue

基础语法

目录

初步认识

JSX

TSX

1.tsx如何使用泛型

2.tsx如何渲染html代码片段

3.tsx如何遍历dom元素

4.tsx如何编写条件语句

5.tsx注意事项

添加样式

显示数据

条件渲染

列表渲染

响应事件

更新界面

Hook

组件间共享数据

prop

组件使用

基础语法 ​

目录 ​

初步认识 ​

JSX ​

TSX ​

1.tsx如何使用泛型 ​

2.tsx如何渲染html代码片段 ​

3.tsx如何遍历dom元素 ​

4.tsx如何编写条件语句 ​

5.tsx注意事项 ​

添加样式 ​

显示数据 ​

条件渲染 ​

列表渲染 ​

响应事件 ​

更新界面 ​

Hook ​

组件间共享数据 ​

prop ​

基础语法

目录

初步认识

JSX

TSX

1.tsx如何使用泛型

2.tsx如何渲染html代码片段

3.tsx如何遍历dom元素

4.tsx如何编写条件语句

5.tsx注意事项

添加样式

显示数据

条件渲染

列表渲染

响应事件

更新界面

Hook

组件间共享数据

prop