React之JSX语法

1. JSX的介绍

  JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法。react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。

  1. 基于ECMAScript的一种新特性
  2. 一种定义带属性树结构的语法

  JSX的特性:

这里写图片描述

  它具备以下好处:

  1. 更加熟悉
  2. 更加语义化
  3. 更加直观
  4. 抽象化
  5. 关注分离点

2.JSX的使用

  1. React对大小写敏感,如果是自定义组件,则必须首字母大写,如果是DOM自带的标签,则要小写(比如div p span等),否则可能出错,这也是一种规范。
  2. 嵌套
  3. 求值表达式。(可以使用表达式,例如’>’,’<’,三目表达式等,但是函数无法使用,例如if……else)
  4. 驼峰命名
  5. htmlFor className

这里写图片描述

为组件使用css样式:

这里写图片描述

JSX语法只支持求值表达式,不支持函数,这里有四种条件判断的写法:

  1. 三目运算符 
    这里写图片描述

  2. 使用变量,并在属性中引用 
    这里写图片描述

  3. 直接调用函数,讲逻辑转化到函数中 
    这里写图片描述

  4. 比较运算符(|| &&) 
    这里写图片描述

  还有一种万能函数表达式: 
  这里写图片描述

3.非DOM属性

JSX中引入了三个非DOM属性:dangerouslySetInnerHTML、ref、key

1.dangerouslySetInnerHTML

function createMarkup() { return {__html: 'First &middot; Second'}; }; <div dangerouslySetInnerHTML={createMarkup()} />

 

在JSX中直接插入HTML代码。 
会被增加被跨站攻击的可能(XSS)

用例: 
如果是这样:

<div id="demo"></div> <script type="text/babel"> var Test = React.createClass({ getInitialState: function() { return {html: '我想让它换行显示<br />,我想让它换行显示<br />'}; }, render: function() { return ( <div>{this.state.html}</div> ); } }); ReactDOM.render( <Test />, document.getElementById('demo') ); </script>

 

浏览器将会显示: 
这里写图片描述

  我们可以看到,React并没有帮我们将<br> 标签,解析成html,而是直接当成字符串处理,这是为了安全考虑,避免XSS攻击。 
  而如果我们已经确保语句安全,并且想要实现将<br> 标签出来,则就需要dangerouslySetInnerHTML

<div id="demo1"></div> <script type="text/babel"> var rawHTML={ __html:"我想让它换行显示<br />,我想让它换行显示<br />" }; ReactDOM.render( <div dangerouslySetInnerHTML={rawHTML}></div>, document.getElementById('demo1') ); </script>

 

浏览器将会显示: 
这里写图片描述

  我们可以看到,这里已经是换行了,也就是说React已经将<br> 标签解析成了我们想要的html。


2.ref

  组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。 
  但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); ReactDOM.render( <MyComponent />, document.getElementById('example') );

 

3.key

这里写图片描述

<div id="demo3"></div> <script type="text/babel"> var UseKey=React.createClass({ render:function(){ return <ul> <li key="1">a</li> <li key="2">b</li> <li key="3">c</li> </ul> } }); ReactDOM.render( <UseKey />, document.getElementById('demo3') ); </script>

 

浏览器显示:

这里写图片描述

  注意:同一个组件之内,不能出现相同的key,列表之类的组件,最好加上key属性,可以提升性能


这里写图片描述

 

引用原文:http://blog.csdn.net/deeplies/article/details/52641073

 

写博客是为了记住自己容易忘记的东西,另外也是对自己工作的总结,文章可以转载,无需版权。希望尽自己的努力,做到更好,大家一起努力进步!

如果有什么问题,欢迎大家一起探讨,代码如有问题,欢迎各位大神指正!

转载于:https://www.cnblogs.com/summary-2017/p/7472772.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值