JSX语法使用

深入了解JSX

什么是JSX？

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

JSX的优点：

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

// JSX语法：
<MyButton color="blue" shadowSize={2}>Click Me</MyButton>

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

// 没有子代的用法
<div className="sidebar" />

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

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

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

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

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

属性值类型

1.表达式

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

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

如下：

<div value={(function(){return 10;})()}></div>
// 编译
<div value="10"></div>

2.字符串常量

// 两者等价
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

3.默认值true

// 两者等价
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

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

4.扩展属性props

// 两者等价
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

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

子代

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

// 下面代码等价
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

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