当前位置: 首页 > 工具软件 > JSX > 使用案例 >

JSX、JSX的介绍、JSX特点、JSX的语法、XML基本语法

冯星阑
2023-12-01

1、JSX的介绍

​ 什么是JSX:JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展,只要你把HTML代码写在JS里,那就是JSX

​ 在实际开发中,JSX 在产品****打包阶段****都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代码更加直观并易于维护。官方定义是:类 XML 语法的 ECMAScript 扩展。

2、特点:

​ JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。

​ 它是类型安全的,在编译过程中就能发现错误。

​ 使用 JSX 编写模板更加简单快速。

3、JSX的语法

​ JSX就是把html代码写在javascript中,那么,写在javascript中有啥要求(与原来在html中的区别),这就是jsx语法要说的内容。

​ 示例:

var msg="哥们!"

const element = <h1>Hello, world!{msg}</h1>     没有双引号,不是字符串

const List = () => (

​      <ul>

​        <li >list item</li>

​        <li>list item</li>

​        <li>list item</li>

​      </ul>  

  );   

XML基本语法

  • 只能有一个根标签,养成外面加上圆括号的习惯。

  • 标签要闭合(单边标签得有斜杠)

元素类型

  • 小写首字母对应 HTML的标签,组件名首字母大写。

  • 注释使用 / * 内容 */ html标签内注释{/* 最外层有花括号*/}

元素属性

  • 内联样式的style:样式名以驼峰命名法表示, 如font-size需写成fontSize。默认像素单位是 px(px不用写)

    	let _style = { backgroundColor:"red" };
    	
    	ReactDOM.render(
    	    <h1 style={_style}>Hello, world!</h1>, 
    	    document.getElementById('box')
    	);
    
  • 外部样式的class:HTML中曾经的 class 属性改为 className(因为class是js的关键字),外部样式时使用

    	ReactDOM.render(
    	    <h1  className="bluebg">Hello, world!</h1>,
    	    document.getElementById('box')
    	);
    
  • for 属性改为 htmlFor(因为for是js的关键字)。(for属性在html标签中是扩充单选框|复选框的选择范围)

  • 事件名用驼峰命名法。HTML是全小写(onclick),JSX中是驼峰(onClick)

javascript表达式

  • 使用单花括号

    react里没有vue中的指令,任何地方需要javascript的变量,表达式等等,只需要套上 单花括号就行。

    const element = <h1>Hello, {120+130}!</h1>
    const element = <h1>Hello, {getName("张三疯")}!</h1>
    <input type="text" value={val ? val : ""} />
    

    注意:单花括号里只能写表达式,不能写语句(如:if,for)

总结:

​ 对比原生,JSX相当于把原生里的html和javascript代码混写在一起,

​ vue中有很多的指令,react中只需要使用单花括号就行。

 类似资料: