《快速上手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>©</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不用字符串,用对象是因为,对象渲染起来更快。