React中JSX的基本使用

React使用JSX来替代常规的JavaScript, JSX是一个看起来很像XML的JavaScript语法扩展,React不强制我们一定要使用JSX(但是推荐使用),它有以下优点:

  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型安全的,在编译过程中就能发现错误。
  • 使用 JSX 编写模板更加简单快速。
JSX中的注释
{/*注释...*/}
JSX操作React元素
  • 创建元素



    
    
    
    test1
    
    
    
    
    
    


    

查看效果


渲染元素
  • 更新元素

    
    

查看效果


更新元素
JSX中使用Javascript表达式

我们可以在JSX中使用JavaScript 表达式。表达式写在花括号 {} 中

  1. 字符串表达式

    

效果


字符串表达式
  1. 运算
样式

    

效果


样式
数组

    

效果


数组

你可能感兴趣的:(React中JSX的基本使用)