• JSX


    一、概念

      1、JS:JavaScript 是一种直译式脚本语言

      2、JSX  JavaScript XML 是一种在React组件内部构建标签的类XML语法,(像在js中写html)。

      3、XML 是EXtensible Marku Language 的缩写,它是一种类似于HTML的标记语言,称为可扩展标记语言。所谓可扩展,指的是用户可以按照XML规则自定义标记。

      4、React 自创了JSX语法,是一个 JavaScript 的语法扩展,官方建议在 React 中配合使用 JSX 来替代原始的 JS。因为JSX 可以更好的描述 UI 应该呈现出它应有交互的本质形式。JSX 看起来有点类似模版语言,但它具有 JavaScript 的全部功能。

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

    二、JS语法与JSX语法的区别

      1、js中渲染一段html:

    import React from 'react';
    function App() {
      return '<div><h1>HELLO WORD</h1></div>' //加上单引号或双引号
    }
    export default App;
    // 运行不起来

      

    import React from 'react';
    function App() {
      return <div><h1>HELLO WORD</h1></div>    //JSX语法不用加引号
    }
    export default App;

    ------- import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; //引入自己定义的组件, ReactDOM.render(<App />,/*以标签的形式书写定义的组件,首字母要大写*/ document.getElementById('root'));

    // 在React中当一个标签是以大写字母开头的,那么一般都是组件。否则可能就是html

    三、JSX语法的使用

      1、代码中嵌套多个 HTML 标签,但注意最外层需要使用一个 div 元素包裹它。

      2、jsx中嵌入表达式:声明了一个名为 name 的变量,然后在 JSX 中使用它,并将它包裹在花括号中。(用花括号)

      3、可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX。

      4、JSX特定属性:可以通过使用引号,来将属性值指定为字符串字面量;也可以使用大括号,来在属性值中插入一个 JavaScript 表达式。但是引号或大括号只能选择一种,不能同时使用。

      5、注意:JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。

      6、JSX对象编译:Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。并且React.createElement() 会预先执行一些编译检查,以帮助你编写无错代码。

    // 写法1
    const ele = (
      <h1 className="red">hello world</h1>
    )
    
    // 写法2
    const ele = React.createElement(
      'h1',
      {className: 'red'},
      'hello world'
    )
    
    // 编译后简化代码,上两种写法效果一致
    const ele = {
      type: 'h1',
      props: {
        className: 'red',
        children: 'hello world'
      }
    }
    

      

      7、JSX防注入攻击:React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(cross-site-scripting, 跨站脚本)攻击,使你在 JSX 当中插入用户输入内容更安全。

  • 相关阅读:
    Quartz任务调度(3)存储与持久化操作配置详细解
    Quartz任务调度(2)CronTrigger定制个性化调度方案
    Quartz任务调度(1)概念例析快速
    Mybatis Generator最完整配置详解
    SpringMVC之@ControllerAdvice
    文件上传api——MultipartFile
    Springboot使用MatrixVariable 注解
    p命名空间和c命名空间
    SpringBoot配置Cors跨域请求
    SpringBoot五步配置Mybatis
  • 原文地址:https://www.cnblogs.com/zhou-xm/p/13438980.html
Copyright © 2020-2023  润新知