JSX语法使用

╰半橙微兮° 2022-05-10 04:34 426阅读 0赞

#### 深入了解JSX ####

###### 什么是JSX？ ######

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

JSX的优点：

1.  JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2.  它是类型安全的，在编译过程中就能发现错误。
3.  使用 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 中使用。

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

如下：

###### 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>