了解什么是JSX以及它的语法

曾经终败给现在 2022-05-25 10:12 494阅读 0赞

一、什么是JSX？

*  JSX 即 JavaScript XML，是一种在 React 组件内部构建标签的类 XML 语法。
 *  JSX 并不是一门新的语言，仅仅是个语法糖（syntactic sugar），允许开发者在 JavaScript 中书写 HTML 语法。最后，每个 HTML 标签都转化为 JavaScript 代码来运行。
 *  这样对于使用 JavaScript 来构建组件以及组件之间关系的应用，在代码层面显得更加清晰。而不再像过于一样用 JavsScript 操作 DOM 来创建组件以及组件之间的嵌套关系。

ps: React 不强制我们一定要用 JSX，只用 JavaScript 也可以。但使用 JSX 可以让我们开发更加高效，代码更加简洁。（使用JSX语法后，要引入babel的解析器，把JSX转化为JS语法，这个工作由babel自动完成。）

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到\{就当JavaScript解析。（React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 ）

二、JSX的载入方式：

JSX目前有两种方法载入

1、内联方法载入

2、外联方式载入

将JSX代码单独放在一个.jsx文件中，然后通过script标签引入

ReactDOM.render(
         <h1>hello hangge.com</h1>,
         document.getElementById('example')
    );

引入rct.jsx文件

三、JSX的语法详解

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式

1、在JSX中使用JavaScript表达式  
在JSX中插入JavaScript表达式十分简单，直接在JSX中将JS表达式用大括号括起来即可。例如：

在JavaScript中，表达式就是一个短语，Javascript解释器会将其计算出一个结果，常量就是最简单的一类表达式。常用的表达式有：

*  变量名；
 *  函数；
 *  属性访问表达式；
 *  函数调用；
 *  算数表达式；
 *  关系表达式；
 *  逻辑表达式；
 *  三目运算符

render(){
     let num = -2;
    return (
      {
         num>0?num++:num--
       }
    )
    }

需要注意的是，if语句以及for循环不是JavaScript表达式，不能直接作为表达式写在\{\}中，但可以先将其赋值给一个变量,if-else也可以用三目运算符代替（上面的就是一个三目运算符的例子）

render(){
      let num = -2;
      num>0?num++:num--
       return {num}
    }

2、JSX也可以像HTML标签一样包含Children

const element = (
      <div>
        <h1>Donna</h1>
        <h2>leo</h2>
      </div>
    );

也可以是

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

3、JSX可自动防范注入攻击

在JSX中嵌入接收到的内容是安全的，因为在默认情况下，React DOM会将所有嵌入JSX的值进行编码。这样可以有效避免xss攻击。

4、设置style属性  
在设置标签style属性的时候，要注意，我们是将一个描述style的对象以JavaScipt表达式的形式传入。因此应该有2层大括号：

5、自定义属性

除了标签特有的属性外，我们也可以自定义一些属性。但这些自定义属性在真正的页面渲染后，是否会显示在页面上由如下规则决定：  
凡是以 data- 开头的自定义属性，在页面渲染后均可以显示在页面上。  
非 data- 开头的自定义属性，页面渲染后则不显示。  
比如我们使用 JSX 书写如下代码：

var name= <h1 height="50" data-name="donna" name="leo">donna</h1>

最后渲染在页面上的结果，只有以 data- 开头的自定义属性被渲染到页面上，其他自定义属性则被忽略掉。

另外需要特别注意:直接使用class在React.js的元素上添加类名如<div class="aaa"></div>这种方式是不合法的，还有一个特例for属性，例如<lable for="male">Male</lable>因为for也是JavaScript的关键字，所以在JSX用htmlFor替代，即

6、JSX中的Children

React组件中有一个特殊的prop ：props.children。它指代了JSX表达式中开闭标签中包含的内容

下面我们会讨论几种指定JSX的children的方法：

1）、使用字符串字面量

可以直接在JSX的开闭标签中写入字符串字面量，组件的props.children就是该字符串值

<MyComponent>Donna</MyComponent>

MyComponent的props.chilren将获得”Donna”字符串。通过该方式传入的字符串是未经HTML转义的。实际上你只需要像在HTML标签中写入文本那样就可以了

PS:JXS会自动删除一行中开头和结尾处的空白符；JSX会自动删除空行；JSX会删除紧邻标签的换行；JSX会删除字符串中的换行；字符串中的换行会被转换成一个空格。

2、JSX元素作为children  
我们同样可以使用JSX元素作为JSX的children，由此生成嵌套组件：

3、混合使用字符串字面量和JSX作为children

<MyComponent>
      donna
      <ul>
        <li>leo<li/>
        <li>momo<li/>
      </ul>
    </MyComponent>

MyComponent的props.children将得到一个数组，数组的第一个元素就是字符串“Here is a list:”，第二个元素是一个对象（JSX代表JavaScript对象）。

4、可以将任何有效的JavaScript表达式作为children

将任何有效的JavaScript表达式作为children，将其放在\{\}中即可

<MyComponent>{'donna'}</MyComponent>

5、有关布尔值、Null以及Undefined作为children

布尔值，Null以及Undefined可以作为有效的children，但他们不会被render，下面的JSX表达式都会render一个空的div标签：

<div />
    
    <div></div>
    
    <div>{false}</div>
    
    <div>{null}</div>
    
    <div>{true}</div>

7、React中组件的render方法

*  一个组件类必须要实现一个render方法
 *  这个render方法必须要返回JSX元素
 *  必须要用一个外层的JSX元素把所有内容包裹起来，返回并列多个JSX元素是不合法的

最后看一个我觉得有必要知道的小知识点吧

条件返回

render () {
      const onOff= true
      return (
        <div>
          <h1>
            条件返回
            {onOff
              ? <strong> donna</strong>
              : <span>leo</span>
            }
          </h1>
        </div>
      )
    }

上面的代码中定义了一个 onOff变量为 true，下面有个用 \{\} 包含的表达式，根据 onOff的不同返回不同的 JSX 内容。  
  
如果返回 null ，那么 React.js 会什么都不显示，相当于忽略了该表达式插入。