zoukankan      html  css  js  c++  java
  • React总结一(JSX)

    一、JSX

    a. 是什么?

    如:

    const element = <h1>Hello, world!</h1>;

    JSX 是 一个JavaScript 的语法扩展。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。

    React 并没有采用  将标记与逻辑进行分离到不同文件  这种人为地分离方式,而是通过将二者共同存放在称之为“组件”的松散耦合单元之中,来实现关注点分离

    b. 优点

    在 JavaScript 代码中将 JSX 和 UI 放在一起时,会在视觉上有辅助作用。

    它还可以使 React 显示更多有用的错误和警告消息。

    c. 用法

    1⃣️ 在JSX中嵌入表达式:可以在大括号内放置任何有效的 JavaScript 表达式

    2⃣️ JSX本身也可以当成表达式:在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX。

    3⃣️ JSX特定属性:通过使用引号,来将属性值指定为字符串字面量。

    4⃣️ 使用JSX指定子元素,假如一个标签里面没有内容,你可以使用 /> 来闭合标签,就像 XML 语法一样。也可以当作父元素包含其他标签。

    4⃣️ 防止注入攻击,因为React DOM 在渲染所有输入内容之前,默认会进行转义

    5⃣️ Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。会预先执行一些检查,以帮助你编写无错代码,但实际上它创建了一个这样的对象,这些对象被称为 “React 元素”。

  • 相关阅读:
    JavaScript 定时器
    JavaScript 面向对象
    JavaScript 数组Array
    JavaScript 基础
    HTML 基础
    HTML 常用标签
    python 线程/进程模块
    python GIL锁
    python 网络编程--socket模块/struct模块
    python 异常处理,约束
  • 原文地址:https://www.cnblogs.com/catherLee/p/14178006.html
Copyright © 2011-2022 走看看