React JSX简介

React 学习 ：JSX 简介

01 了解 JSX

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

上面的标签语法称为JSX，是一个JavaScript 的语法扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 具有 JavaScript 的全部功能,它可以生成React 元素。

React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。React 不强制要求使用 JSX，但是在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。

02 JSX 中嵌入表达式

在 JSX 语法中，可以在大括号内放置任何有效的JavaScript 表达式。

• 字符串表达式

// 字符串表达式
const person = 'Peppa';
const element = <h1>Hello, {
     person}</h1>;

• 对象

// 对象
const personName = {
     
  one: 'Peppa',
  two: 'George',
};

const element = <h1>Hello, {
     personName.one}</h1>;

• 函数

// 函数
function personPeppa() {
     
  return 'Peppa';
}

// 建议多使用箭头函数，可以避免处理this指向问题
const personGeorge = () => {
     
  return 'George';
};

const element = (
  <div>
    <h1>Hello, {
     personPeppa()}</h1>
    <h2>Hello, {
     personGeorge()}</h2>
  </div>
);

为了便于阅读，我们会将 JSX 拆分为多行。同时建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到自动插入分号陷阱。

03 JSX 是一个表达式

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：

const isSay = true;

const sayHello = (isSay) => {
     
  if (isSay) {
     
    return <h1>Hello, {
     personPeppa()}!</h1>;
  }
  return <h1>Hello, person!</h1>;
};

需要注意的是 JSX 表达式里面只能有一个根节点，即需要用一个标签将里面的内容包裹起来，可以使用

,也可以使用空标签<>

04 JSX 特定属性

你可以通过使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <img src={
     user.avatarUrl} />;

在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。

警告：因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。