学习React-2：基本语法

type

status

date

slug

summary

TSX 和 JSX 语法

TSX 和 JSX 都是用于 React 组件编写的语法扩展。

JSX（JavaScript XML）是 JavaScript 的一种语法扩展，允许在 JavaScript 代码中写 HTML。它是 React 生态系统中广泛使用的一种语法，用于定义组件的 UI 结构。

TSX（TypeScript JSX）是 TypeScript 与 JSX 结合使用的语法扩展，允许在 React 组件中使用 TypeScript 的类型系统，提供更强的类型检查和自动补全功能。

使用 JSX 编写标签

网页是构建在 HTML、CSS 和 JavaScript 之上的，一直以来，在 Web 开发时，网页内容会放在 HTML 中，样式内容放在 CSS 中，逻辑内容放在 JavaScript 中。但随着 Web 的交互越来越强，逻辑越来越决定页面中的内容。JavaScript 控制着 HTML 中的内容，因此，在 React 中，渲染逻辑和标签共同存在于同一个组件中。

每个 React 组件都是一个 JavaScript 函数，它会返回一些标签，React 会将这些标签渲染到浏览器上。React 组件用 JSX 语法扩展来描述这些标签。如下所示：

JSX规则

1、只能返回一个根元素

JSX 虽然看起来很像 HTML，但在底层其实被转化成了 JavaScript 对象，一个函数中不能返回多个对象。

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

可以使用一个<div>标签：

如果不想在HTML结构中增加一个额外的<div>标签，可以用<></>来代替。

<></>这个空标签被称作 Fragment，是<React.Fragment></React.Fragment>的简写形式。

当需要在 Fragment 上添加 key 属性时，就必须要使用 <React.Fragment></React.Fragment> 的完整形式。

在不需要添加任何属性的情况下，<></>是更好的写法。

2、标签必须闭合

3、使用驼峰式命名法命名

语法编写

1、插值语法

使用 { }，可以嵌入：字符串、数字、数组(普通类型)，元素、JavaScript表达式、API调用、函数调用

2、属性绑定

给元素绑定 class、id 属性：

给元素绑定 style 属性：

3、事件绑定

使用 onClick 绑定点击事件：

如果需要传递额外的参数，需要使用箭头函数进行事件传参：

问题：为什么在事件绑定时，直接写onClick={ handleClick('Hello ZL') }进行传参会出错？为什么要使用箭头函数？

解答：在React中，onClick (以及其他事件处理器属性如 onChange、onMouseEnter等) 期望一个函数作为值。

如果写onClick={ handleClick('Hello ZL') }，每次渲染这个组件的时候，handleClick('Hello ZL')这句代码都会立即调用 handleClick 函数，而不是在点击按钮事件时调用，所以这里的事件触发时间本身就是不对的。

并且 handleClick 这个函数没有返回值，只有一句打印参数的代码，这就相当于把 undefined 赋值给了 onClick，onClick 得到的值不是一个函数，所以就会出错。

因此，使用箭头函数传参是传递额外参数给事件处理函数的理想选择，也是最常见的做法。