jsx语法

JSX 语法及特点

jsx = javascript XML jsx :facebook 提出的草案jsx规范:核心规范 https://facebook.github.io/jsx/

基于ECMAScipt的一种新特性; 一种定义带属性 树结构的语法; Jsx不是 XML或者Html 不是一种限制;可以不使用他,直接使用js;

为什么使用功能jsx?

  1. 类XML语法容易接受;
  2. 增强js语义;
  3. 结构清晰;
  4. 抽象程度高;(比直接操作dom更高一层)
  5. 代码模块化;(非mvc化,各自的css和js都写在一块)

特点:

  1. 首字母大小写;
  2. 镶套;
  3. 求值表达式;(不可以在里边写if-else)
  4. 驼峰命名;
  5. htmlFor和className ;

注释:

A. 子节点中的注释;标签包裹的部分; B. 属性中,标签中的属性; 注释两种语法方式: 1. 多行 /* 2. 单行 //

对情况A来说:在标签包裹的部分,使用{/注释部分/},花括号进行包裹一下才可以; 对情况B来说:直接/**/ 和 //就可以了 ;

CSS:

  1. 先创建一个Css对象;依然驼峰命名;
  2. css样式,不能设置自定义组件属性中;因为自定义组件在dom中显示的,只是render方法,返回的内容;所以,css样式可以设置在render返回的标签中,或者在自定义的组件中,外边再镶套一个div标签;在div标签中设置style={style}

条件判读的四种写法:

  1. 使用三元表达式;
  2. this.props.name?this.props.name:”world”;
  3. 声明一个函数,getName:function()…函数赋值给变量,var name = this.getName();在标签包裹中使用求值表达式{name};
  4. || 比较运算符;左边的值真,返回左边的值,假返回右边的值;

万能的函数表达式:

如果不使用以上的四种表达式,可以使用(function(){})(this)

非 DOM 属性介绍 dangerouslySetInnerHTML、ref、key

dangerouslySetInnerHTML写html代码:在jsx中直接插入html代码; ref:父组件引用子组件; key:提高渲染性能;(使用react diff算法)

注意:提高渲染性能方式

  1. 内容类似的尽量使用同一个组件,这样节点一致,加快渲染;
  2. 列表的标签都加上不同的key进行标记;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • aspx 体现mvc 模式的增删改查

    1、注意该aspx文件不需要重新生成,因为他是动态生成的,只需要刷新浏览器就行了。 2、aspx文件编写没有字段提示,需要重新生成一下就行了。

    静心物语313
  • 怎么使用Type类?

    1、通过类获得Type:Type t = typeof(Person)(就是拿到这个类的名字)

    静心物语313
  • 事件_窗体传值

    本实项目创建步骤记录: 1、创建两个Webform窗体 2、实现功能::在form1窗体中点击按钮---->将文本框中的值传递到,From2中文本框中。 3、用...

    静心物语313
  • 从原理层面掌握@SessionAttributes的使用【享学Spring MVC】

    该注解顾名思义,作用是将Model中的属性同步到session会话当中,方便在下一次请求中使用(比如重定向场景~)。 虽然说Session的概念在当下前后端完...

    BAT的乌托邦
  • 原来IDEA还有这么骚包的插件!!!

    在过往的Java项目中,充斥着太多不友好的代码:POJO的getter/setter/toString;异常处理;I/O流的关闭操作等等,这些样板代码既没有技术...

    用户5224393
  • 枚举常见的七种用法

     JDK1.5引入了新的类型——枚举。在 Java 中它虽然算个“小”功能,却给我的开发带来了“大”方便。

    MonroeCode
  • 原来IDEA还有这么骚包的插件!!!

    在过往的Java项目中,充斥着太多不友好的代码:POJO的getter/setter/toString;异常处理;I/O流的关闭操作等等,这些样板代码既没有技术...

    好好学java
  • Java效率工具之Lombok

    还在编写无聊枯燥又难以维护的POJO吗?洁癖者的春天在哪里?请看Lombok!在过往的Java项目中,充斥着太多不友好的代码:POJO的getter/sette...

    乱敲代码
  • Java 效率工具之 Lombok

    点击上方 好好学java ,选择 星标 公众号重磅资讯、干货,第一时间送达今日推荐:用好Java中的枚举,真的没有那么简单!个人原创+1博客:点击前往,查看更...

    好好学java
  • Java枚举(enum)七种常见的用法

    DK1.5引入了新的类型——枚举。在 Java 中它虽然算个“小”功能,却给我的开发带来了“大”方便。 用法一:常量 在JDK1.5 之前,我们定义常量都是:...

    Spark学习技巧

扫码关注云+社区

领取腾讯云代金券