react的学习之路之一（1）-------jsx语法；

学习资料中：菜鸟教程，react官网文档；

一：jsx语法在菜鸟中，解释的挺清晰的；它的优势总结两点吧：1.执行快，编译成js代码，并能进行优化，有利于开发速度；2.在编译时就能发现类型错，比angular更加好使；

缺点呢，就是不利于seo-----搜索引擎优化；它不是一个的框架，需要加一个flux才能完成一个完整的大型项目；react并不算一个完整的MVVM框架，他要结合FLUX和redux构成一个完整的MVVM框架，就他本身只属于V而已；虚拟dom无法进行dom节点操作，这也是弊端；

二：jsx语法呢，说白了就是能js代码中写html代码，不需要加引号进行引用，html中完整在js中进行裸奔；这也是它比较优势的地方；下面很好的展示了js中展现了html代码；

import React from "react"; // 引入react库文件
import ReactDOM from "react-dom";

render(){
    return(
      <div>
         	<span >我是刘倒运</span>
        
      </div>
    )
  }
}

ReactDOM.render(<Index />,document.getElementById("root"))

注意点：1.必须得有一个根元素包裹，出现多个根元素，会报错；只有一个元素没有关系；多个元素必须一个根元素包裹；

2.注释不能是html代码注释，用html代码注释方式会报错，必须是js代码注释，js代码注释必须要用{}进行包裹，不用不生效，也不报错；

见代码：

 { 
            // <span>shi我的水呀</span>
          }
        {/*<span>shijianwenti</span>*/}

三：1.可以是data属性进行自定义属性，id名直接写，但是类名必须写ClassName，直接写class直接报错；

代码：

	<span data-a='my' id='span' className='span'>我是刘倒运</span>

2.在html代码中，可以写{}，在{}中可以写简单的函数表达式（短路语法，三元运算符等），函数调用；

代码：

	<span >{1+1}</span>
         <p>{false?'liudaoyu':'1'}</p>
       <p>{this.time('23:40:50')}</p>

3.可以写内联样式：注意1.必须是双花括号{{}}，属性之间的样式必须用逗号隔开；值必须是字符串，样式属性不能用‘-’进行连接，必须采用驼峰法则，第二个字母大写；有关描述大小高低的可以是纯数字，因为内部会自动翻译添加‘px’；

<p style={{color:'red',fontSize:'13px'}}>{this.time('23:40:50')}</p>

也可以采用表现与数据分离的方式，调用变量，赋值样式；

 render(){
    var myStyle={
      color:'red',
      fontSize:15
    }
    return(
          <div>
            <p style={myStyle}>{this.time('23:40:50')}</p>
          </div>
    )
  }

函数的调用以及样式的设置：

   dom(){
    return(
        <ul>
          <li>运气好</li>
          <li>运气好</li>
          <li>运气好</li>
          <li>运气好</li>
          <li>运气好</li>
        </ul>
      )
 }
  render(){
    var myStyle={
      color:'red',
      fontSize:15
    }
    return(
          <div>
            <p style={myStyle}>{this.time('23:40:50')}</p>
            {this.dom()}
          </div>
    )
  }
}

在内联样式中，数字可以进行四则运算；

4.数组的运用；

 render(){
    let arr=['1',2,3,'liuyy'];
    return(
          <div>
            <ul>
            {
              arr.map(function(item,index){
                return <li key={index}>{item}</li>
              })
              }
           </ul>
          </div>
    )
  }

必须通过map进行遍历，才可以完成；

以上就是关于jsx语法的理解；总结：jsx语法中，html的裸奔，html可以通过{}进行函数调用简单运算判断，html代码中属性的设置，及内联样式的设置规范；

react的学习之路之一（1）-------jsx语法；

猜你喜欢