react for循环_React - JSX

《快速上手React编程》CH3 JSX

为了解决js写HTML的时候代码读起来不方便的问题，引入了JSX。

JSX可以让代码更容易读；减少代码量；与HTML相似从而降低学习成本。

JSX需要通过babel编译为普通js才能用，React官方就推荐babel工具，使用上先npm init -y，然后再安装babel使用，可以用preset预设语言（ES5），可以用watch选项自动转义，这个只是自动转文件，这个webpack的server的自动编译刷新功能显然更强。

JSX语法创建的对象可以存储在变量中，这是因为JSX只是React.createElement()的语法糖。React的render函数里，return语句后面最好加个括号，不加的话，后面的HTML根据换不换行，有一些判断，直接跟根元素是可以的，换行再跟根元素就认不出了。

JSX里写的属性，渲染的时候只有HTML标准属性和data-前缀的自定义属性会被渲染，其它属性会被忽略，这是因为React里面只能这样支持，而JSX是React里createElement方法的语法糖。HTML里原生的class和for因为跟js里面的保留字装上了，所以React里，这俩改名了，叫className和htmlFor。一些布尔类型的属性值（disabled、required、checked、autofocus和readOnly）只能在表单元素上使用，并且用的是好，要使用disabled={false}来赋值，直接 disabled="false"，会被认为是true，因为Boolean("false")就是true，不赋值也默认是true。

JSX里给一个组件传递属性，可以用rest运算符，这个就是ES6里给函数传入不定长参数的时候用的那个rest运算符。

<HelloWorld {...this.somePros}></HelloWorld>

条件渲染：JSX里面只能用三目运算符和&&，但是render函数里，JSX外面，可以用if else，正常的js语法来写，又因为JSX的对象可以放在变量里，这样 需要复杂判断的DOM，逻辑就分离出来了，只能用一个变量写在外面，然后JSX里面用这个变量，降低了JSX里面的复杂程度。

reder(){
  let link;
  if(something){
    link = <a href="https://zhuanlan.zhihu.com/p/59770902">testLink</a>
  }
  return (<div>{link}</div>)
}

另外，还可以在JSX里面用立即执行函数，立即执行函数里面用if else，其实本质还是变量存储，只不过把获取变量的过程放在了JSX里面而已，我觉得这样写不容易读，需要条件判断的东西最好还是拿出来，BackBone模板乱七八糟，我感觉就是把一个if的两个括号拆开了，不好读。

还可以在render里写个函数，然后在JSX里面调用。

官方文档（三目运算符 和 &&）：条件渲染 - React

循环渲染：本质上只要有个数组，数组里面每个元素都是JSX对象，把这个数组变量往JSX里一放就行了。官方文档里面用map举了个例子，本质是一样的。官方文档（渲染一个JSX的list）：列表 & Keys - React

JSX里所有的标签要结束，不像HTML，一个标签不闭合也行。

JSX里会自动转义，如果要让JSX接受危险的HTML有以下四种方式：

1、把要放入的HTML写成数组里的JSX对象（亲测可行，放数组里就认了，神奇）

<p>{[<span>&copy;</span>]}</p>

2、把特殊字符拷贝到源代码里

3、用u 加Unicode编码来转义

4、用String.fromCharCode把Unicode转换过来

5、用内建方法，__html来设置危险html，注意span

let specialChars = {__html: '©111'}
<span dangerouslySetInnerHTML={specialChars} />

JSX里面是style把CSS里面的属性都改成小驼峰格式了，比如font-size改成fontSize了。JSX不用字符串，用对象是因为，对象渲染起来更快。