JSX语法使用

深入了解JSX

什么是JSX？

事实上JSX就是React.createElement()方法的语法糖。

JSX的优点：

1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2. 它是类型安全的，在编译过程中就能发现错误。
3. 使用 JSX 编写模板更加简单快速。

// JSX语法：
Click Me

// 编译为：
React.createElement(
    MyButton,
    {color: 'blue', shadowSize: 2},
    'Click Me'
)

// 没有子代的用法


//编译为:
React.createElement(
    'div',
    {className: 'sidebar'},
    null
)

当元素类型以小写字母开头时，它表示一个内置的组件，认为其是原生的HTML标签，如 
 ，并将字符串 'div' 传递给React.createElement。

当元素类型以大写字母开头时，会认为它是一个组件，组件名传递给React.createElement，并且与定义的该组件相对应。

附：在使用JSX时必须先引入React，因为编译时需要使用React.createElement(),即：
import React from 'react';

组件名称不允许使用表达式，如果使用先将表达式赋给一个大写开头的变量，再使用该变量作为组件名称。

属性值类型

1.表达式

if 语句和 for 循环在 JavaScript 中不是表达式，因此不能直接在 JSX 中使用。

如何区分表达式和语句：个人认为表达式有返回值，语句没有返回值。

如下：

// 编译

2.字符串常量

// 两者等价

3.默认值true

// 两者等价



不建议这样使用，原因：在编译时，属性对象为:
{autocomplete: true}
这与ES6中对象的简洁表示法不符，ES6中应为:
{autocomplete: autocomplete}
编译成功是因为它符合HTML的做法。

4.扩展属性props

// 两者等价
function App1() {
  return ;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return ;
}

使用props的缺点：可能会给子组件传递许多不必要的属性，导致子组件代码混乱。

子代

子代true、false、null、undefined不渲染

// 下面代码等价

{false}
{null}
{undefined}
{true}

// 输出undefined需将其转为字符串
{String(undefined)}