ReactJS读书笔记一:深入理解JSX
发布时间:2020-12-15 07:20:25 所属栏目:百科 来源:网络整理
导读:这个系列是读《React 引领未来的用户界面开发框架》的笔记。 JSX语法是react的一大亮点。 之前很不喜欢在js中写模板,因为js字符串换行很麻烦,所以大家都习惯把模板用script标签写在html中。后来发现这样其实挺坑的,特别是当你的网站是前后端分离的时候,
这个系列是读《React 引领未来的用户界面开发框架》的笔记。
JSX语法是react的一大亮点。
之前很不喜欢在js中写模板,因为js字符串换行很麻烦,所以大家都习惯把模板用script标签写在html中。后来发现这样其实挺坑的,特别是当你的网站是前后端分离的时候,如果改一下模板还要找后端的开发,非常浪费时间。
JSX的出现比较完美解决了JS中写模板的问题。简单的说就是JS 和 HTML和混合着写在一起。
一,JSX基本原理
首先我们看一个官方最简单的例子
然后他编译出来实际上是这样:
[javascript]
copy
其中最关键的部分就是 html 代码被转换成了 React.createElement。
这就是JSX的基本原理,他会自动识别html代码,并且全部转换成 React.createElement,于是编译出来的就是原生的JS代码。
如果你不嫌麻烦,完全可以自己写 React.createElement 来创建模板,这样就不需要JSX了。
JSX区分html代码的方式就是: 前括号之内并且首字母小写的就是html代码。如果首字母大写则就是react组件,后面会说到react组件。
JSX会有详细的语法检查,如果你的标签未闭合会直接报错。而不像浏览器中可能会自动修复或者直接乱掉。
因为JSX是兼容JS语法的,所以在html中如果有JS关键字就不要写,比如 class 要用 className 来代替。for 要用 htmlFor 来代替
二,HTML模板中使用JS
在HTML模板中使用JS非常方便,只需要用大括号把JS代码括起来即可。
copy
编译出来就变成了这样:
copy
要注意的是,大括号实际就是一个变量输出表达式,JSX最终就是直接把花括号中的内容作为React.createElement 的第三个参数直接传入了(没有任何修改直接传入),所以其中只能放一行表达式,并且任何不能直接作为第三个参数的写法都是错的,
那么你这样写就是错的:
copy
因为很明显其中花括号内的内容直接放在第三个参数上,语法不对。
这么写也是错的:
copy
因为 React.createElement(“div”,null,var a = 1;) 是语法错误。
那么你也可以理解为什么大括号中的js表达式不能有分号结尾了吧。
需要注意的是,如果你在属性中输出JS变量,是不能加引号的,不然会被当做字符串而不被解析。
应该是这样:
<atitle={title}>链接</a>
三 组件嵌套
JSX支持以XML的语法来嵌套组件:
[html]
copy
实际上生成了:
copy
copy
四,延展属性 spread attributes
后面会讲到如何创建React组件:
copy
这个属性不一定是字符串哦,可以是任何JS变量,比如:
copy
另外,有些时候你会需要直接把一个普通JS对象作为props 传递给 React组件,比如你从数据库中取到了一个人物信息,那么你可以用 延展属性操作符 来做:
copy
注意其中的{…Lucy} 被编译成了:
copy
原理是不是很简单,就是一个类似 $.extend 的操作而已。
五 一些需要注意的地方
有几个在写JSX的时候需要注意的点
参考:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |