5、如何使用 jsx语法

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>
  }
})