本文章将介绍JSX语法

JSX

jsx是一种很好地描述UI，能够有效提?开发效率的JavaSript拓展语法，其格式比较像后端的模板语言，但实际使用的时候使用 babel-loader 把 JSX 编译成相应的 JS 对象，是在 JavaSrtipt 内部实现的

基本使用

表达式 {} 的使?

const name = ‘Josh Perez‘;
const element = <h1>Hello, {name}</h1>;

函数的使用

function formatName(user) {
  return user.firstName + ‘ ‘ + user.lastName;
}

const user = {
  firstName: ‘Harper‘,
  lastName: ‘Perez‘
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

jsx也是一个表达式

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

对象

jsx是js对象，也是合法表达式

const greet = <div>good</div>;
const jsx = <div>{greet}</div>;

条件语句

const show = true;//false;
const greet = <div>good</div>;
const jsx = (
 <div>
 {/* 条件语句 */}
 {show ? greet : "登录"}
 {show && greet}
 </div>
);

数组

const a = [0, 1, 2];
const jsx = (
 <div>
   {/* 数组 */}
   <ul>
   {/* diff时候，?先?较type，然后是key，所以同级同类型元素，key值必须得 唯? */}
   {a.map(item => (
     <li key={item}>{item}</li>
   ))}
   </ul>
 </div>
);

属性的使?

import logo from "./logo.svg";
const jsx = (
 <div>
 {/* 属性：静态值?双引号，动态值?花括号；
    class、for等要特殊处理。
    使用引号，来将属性值指定为字符串字面量 */}
 <img src={logo} style={{ width: 100 }} className="img" tabIndex="0"/>
 </div>
);