你不知道的jsx（不止用法）

写react怎么能不懂jsx？ 啊？ 能够啊 谁说没jsx react跑不起来的。对，能够，那你是要接盘侠看十几天都没看懂你的标签结构吗......

什么是jsx

jsx 即 javascript XML。？？？ 什么鬼 JavaScript 跟xml 的结合体吗？这么会玩？没错，jsx就是在javasccript中构建 XML 标签的 语法，在react中使用jsx并非必须的，可是有更好的东西为何不用。（就好像学校说此次的补习是自愿的，你们能够自行选择......）

举个栗子：
不用jsx建立标签是这样的

// 注意对象若是不换行写 逗号后面要加个空格，不要不加噢
react.createElement('h1', {className: 'question', 'question'})

使用jsx 是这个样子的

<h1 className="question">question</h1>

嗯哼？你自愿补习不？

上面的语法是等效的，就是说你怎么写出来的结果都是同样的，怎么感受这像语法糖，可是却没人这么说，是否是我对语法糖有什么误解？

jsx跟以往的在js中写html相比，有这么几个特色：

• jsx是一种语法变换，每个节点对应一句函数的调用
• jsx不须要运行时库，js环境就能搞，固然须要转换
• jsx并无改变js的语义（由于他仍是js里面并无html）他只是函数的简单调用，并无对js作任何和修改。

等等 你说他好，为何他好

为何使用jsx

更加熟悉

是的，你不以为很熟悉吗？个人天啊，简直就是html，不须要会代码，知道html标签的人都能看懂你的标签结构，特别是，ui小姐姐，当他说你这里差了 1px的时候... 当他说你这个结构不该该是这样的时候...(一脸幸福，ui竟然是个小姐姐)

更加语义化

jsx容许你使用全部预约义的html5标签和自定义标签。爽吧，标签名字自定义了，你语义化的能力多高，你的项目的语义化程度就有多高。骚年，靠你了。

更加直观

相对于使用原生js来写的结构，跟jsx可读性是没得比的

抽象化

使用jsx能更好的抽象问题，当你的需求发现小许改变时，如果抽象得当你会发现，你要改的代码不多或者根本不用更改

定义一个自定义组件

var Header = React.createClass ({
    render: function () {
        return (
            <div className="header">
                <h1>title</h1>
            </div>
        )
    }
})

上面还只是一个一次性的组件，要让这个组件使用起来，还须要一些动态元素

使用动态值

跟vue的动态模版不一样，jsx中的动态使用的是单花括号{...}, 花括号指明一个JavaScript上下文环境，你再花括号里面放入任何东西都会进行求值，因此不要在里面 new... var...

对于简单的值，你能够直接在里面放一个变量，就像这样

var title = 'title'
<h1>{text}</h1>

对于更复杂的逻辑，你可能须要一个函数来执行逻辑，而后把值返回，像这样

var getTitle = function () {
    if (xxxx) {
        return 'xxxx'
    } else {
        return 'xxxxx'
    }
}
<h1>{getTitle}</h1>

子节点

react将自定义组件的开始标签到结束标签之间的全部子节点都放在一个 this.props.children 的内置属性里面

而后组件你就能够这样写

<div className="title">
    <h1>{this.props.chlidren}<h1>
</div>

而后你就能够想html标签同样使用你的自定义组件

<Header>title</Header>

jsx和html有什么不一样

jsx很像html，可是jsx的设计并无参考html，我的认为，即便没有html jsx 也仍是这样设计。

属性

html中 咱们用内联给标签设置属性，就像这样

<p id="ha" class="haha">哈哈哈</p>

jsx 不只能够实现静态，也还能够实现动态，就像这样

<p id="haha" className={xxx: xxx}></p>

条件判断

jsx的｛｝中只能写表达式，并不能写语句，那么赶上这种状况怎么办？

// 这种
<div>{if (isright) {'right'}}</div>

oh no 上面的写法会直接忽略，那怎么办

解决办法有下面3种

• 使用3目运算符? :
• 使用一个函数来完成具体操做
• 使用 && 运算符

三目运算符

<div>{isRight ？'right' : 'noRight'}</div>

使用函数

getIsRight: function () {
    if (this.isRight) {
        return 'right'
    } else {
        return 'noRight'
    }
}
<div>{this.isRight}</div>

使用&& 运算符

// 若是前面的值是true 呢么这个表达式会返回&& 后面的值
<div>{this.isRight && 'right'}</div>

事件

handlerClick = function () {
    consoe.log('你点击了我')
}
<div onClick={this.handleClick}>哈哈哈</div>

更多的jsx官方规范 请看这里