jsx语法是react提供一种长得比较像html标签的一中语法，本质上是跟html标签是有区别的。
我们自定义的组件要是有大写开头命名比如 <HelloMessage /> 这种自定义命名，如果是些小写的话，react会当成是div这种到dom中寻找就会出错，react对大小写是敏感的
在render方法中写jsx语法，使用大括号如：
{this.props.name}
# 在大括号里只能写求值表达式，不能写if语句这些，但是我们可以把语句包含一个函数中，
# 函数本身返回是一个求值表达式，这样使用并不是一个好的习惯，
# 不过可以把函数独立出来，然后大括号里调用
# jsx标签名命名使用的是驼峰命名，函数名使用的也是驼峰命名
如果我们要使用 html标签中 class html 属性 ，react里jsx语法中需要使用 className htmlFor 来代替的
下面看一下在jsx中添加注释
在子节点中添加注释：
render(){
return(
<p
/*
在属性中注释
*/
>Hello, World {
/*
多行注释
*/
// 单行注释
}</p>
)
}
# 样式调用使用方法，react是把样式当做一个个对象处理
<p style={styles}></p>
添加语句判断四种写法
//第一种方法使用三元表达式
render(){
return(
<p>{this.props.name ? this.props.name : 'world'}</p>
)
}
//第二种方法使用变量
getName(){
if(this.props.name){
return this.props.name
}else{
return 'world';
}
}
render(){
var name = this.getName();
return(
<p>Hello, {name}</p>
)
}
//第三种方法是直接在大括号中调用函数，因为函数调用本身是一种表达式
getName(){
if(this.props.name){
return this.props.name
}else{
return 'world';
}
}
render(){
return(
<p>Hello, {this.getName()}</p>
)
//第四种是使用比较运算符，如果左边的值是true就直接返回，
//如果是左边值是假false那就一定会返回右边的值
render(){
return(
<p>Hello, { this.props.name || 'world' }</p>
)
#万能函数表达式，在大括号里写函数
#大括号里第一小括号（）可以理解成强制求值运算，然后函数后面添加里（this）是调用这个函数然后传入this，这个方法并不建议使用
render(){
return(
<p> Hello,
{
(function(obj){
if (obj.props.name)
return obj.props.name
else
return 'World'
})(this)
}
</p>
)
}
非 DOM 属性介绍
react引入里三个非DOM属性
dangerouslySetInnerHTML：在JSX中直接插入HTML代码（插入动态html代码使用，不过这个属性比较危险）
ref：父组件引用子组件
key： 提高渲染性能，就是节点上插入标识
#演示
var rawHTML = {
__html: "<h1>Hello, World</h1>"
};
#react在处理的时候 ，会读取html代码
React.render(
<div dangerouslySetInnerHTML={ rawHTML }></div>,
document.body
)
#如果在组件内部操作p节点，这样引用它，拿到的是虚拟DOM节点
var HelloWorld = React.createClass({
this.refs.childp
render: function(){
return <p ref="childp"> Hello, World </p>
}
})
#在同一个组件内，key是不能同的，还有就是如果是列表就一定加入key，不但提高性能
var HelloWorld = React.createClass({
render: function(){
return <ul>
<li key="1">1</li>
<li key="1">1</li>
<li key="1">1</li>
</ul>
}
})
