你不知道的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官方规范 请看这里