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进行标记；