React学习笔记之五(JSX语法)

JSX是什么

JSX的出现代表一种想法:那就是组件化是分解数据和UI变化关注点的更加正确的处理方式。目前往往会使用模板和展现逻辑来处理,React引入了JSX让代码和标签更加紧密的联系在一起,而且是以组件为单位的。我个人还是比较倾向于这么做的,非常赞同官方提到的:使用js编程语言直接处理HTML和组件树,借助js具有更大的表现力。

为什么使用JSX

JSX用HTML语法来创建js对象,个人觉得这个想法非常好,理由是:既发挥了js的力量,而且又让代码有了HTML般的层次结构,容易理解。在前面的几个demo里面,我已经有了体会。JSX在React里面不是必须的,只是为了开发方便和代码的结构,可读性等考虑。因为JSX最终要编译为普通的js代码执行,完全也可以不使用JSX。当然还是推荐大家使用JSX来开发React组件,从写demo的过程,我已经很能体会JSX的方便。

 

HTML标签和自定义的React组件

React可以渲染HTML标签和React组件,约定:使用HTML标签时首字母小写,使用自定义的React组件首字母大写。例如:

ReactDOM.render(<div className=”foo” />, document.getElementById(‘example’));
ReactDOM.render(<MyComponent someProperty={true} />, document.getElementById(‘example’));

注意:由于JSX是javascript代码(只是类似XML),最后都会编译为javascript,遇到属性是js的关键字时需要区分下。class写成className,for写成htmlFor。

 

JSX的编译

看下编译前后的对比:(JSX)

编译输出(js)

可以看出,主要使用了React提供的方法React.createElement,编译时就会把对应的JSX的元素转化为该方法的参数等,React(v15.02)采用babel进行编译,具体怎么使用可以参见React学习笔记之二(windows下配置npm babel预编译JSX的开发环境)

 

组件命名空间

当创建的一个组件包含多个子组件时,可以把其它子组件组件作为当前组件的属性。例如:

编译以后的代码:

 

JavaScript表达式{}

属性表达式:使用{}代替了””(包含boolean类型的属性)

子元素表达式:<Container>{<Nav />}</Container>

注释:有两种一种是在标签内部,一种是跟标签一样作为一个child

 

JSX属性扩展

设置多个属性时,可以先定义一个对象,然后使用ES6新定义的扩展运算符“…”,如下:

 

JSX中的一些陷阱

JSX虽然跟HTML很像,但是有些不同的地方:

①属性采取驼峰命名(例如onClick)

②默认情况下React启用了防止XSS攻击,两次转义。

<div>{‘First &middot; Second’}</div>//显示为First &middot; Second

③插入一段纯粹的HTML代码

<div dangerouslySetInnerHTML={{__html: ‘First &middot; Second’}} />//显示为First · Second

④data-*自定义属性:不同于原生的HTML,可以使用dataset,这需要通过this.props[“data-custom”]获取

⑤style属性接收一个javascript对象,对象的key如果不用引号,则需要使用驼峰命名,如果使用引号,则可以直接使用ccs属性。例如:

⑥class和for是关键字,所以定义这两个属性时需要使用className和htmlFor

 

本文参考原文:

https://facebook.github.io/react/docs/displaying-data.html

https://facebook.github.io/react/docs/jsx-in-depth.html

https://facebook.github.io/react/docs/jsx-spread.html

https://facebook.github.io/react/docs/jsx-gotchas.html

reactjs
作者:张雪飞
出处:https://zhangxuefei.site/p/1386
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注