React基础篇-JSX语法

1.简介

const val= <h1> 2+2={2+2} </h1>;

1、JSX是一种对javascript的扩展；

2、在开发react项目时，为了方便组件的编写，常用JSX语法来定义组件内容；

3、看上去像是HTML，但事实是它是在javascript内部实现的；

4、书写JSX时，要尽量的标准化，因为在初始化时会进行初步检测，防止bug影响页面展示；

2.原理

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用

//JSX程序片段
const element = (
    <h1 className="greeting">
        Hello, world!
    </h1>
);
//balel编译器编译JSX代码为
const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);
//React.createElement()先做避免bug检查，然后生成类似于下面的对象（React元素）就可以写到页面了
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }
};

3.使用

1、表达式

const val001=<p> {2+2} </p>;            //<p> 4 </p>
const val002=<p> {obj.name} </p>;       //<p> ** </p>
const val003=<p> {getFn(name)} </p>;    //<p> ** </p>
const val004=(
    <p>
        <span> hellow world </span>
    </p>
);
function getName(flg){
    if(flg){
        return <p> TOM </p>
    }
    return ""
}
———————————————————————————————————————————————————————————————————————————————————————————
注意：
    1.使用 { } 将表达式，函数调用，对象取值包裹，并得到对应值；
   *2.书写JSX复杂标签时一般会有缩进或换行；
    3.外部小括号包裹，是为了避免分号自动插入的bug，推荐这么写；
   *4.编译之后的JSX，其实就是一个js对象，所以在语句块（带大括号的）中只需return就好；
   *5.{}大括号里不可出现判断等语句，只可写单句的表达式；

2、属性

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
———————————————————————————————————————————————————————————————————————————————————————————
注意：
    1.纯字符串使用引号，表达式使用大括号；
    2.表达式外边的大括号不要出现双引号，会以字符串处理，解析不出表达式结果；

4.不同

1、类名class

//HTML
<div class="myStyle"></div>
//JSX
<div className="myStyle"></div>    //JSX毕竟是js的扩展，所以要按js的写法

2、样式

//HTML
<div style="width:30px;height:30px;background-color:red"></div>
//JSX
<div style={{width:30,height:30,backgroundColor:'red'}}></div>
———————————————————————————————————————————————————————————————————————————————————————————
注意：
    1.两个大括号：本质是接收一个对象作为参数，最外层的大括号是之前说过的用来解析JS代码的区域，而里面的只是个对象而已；
    2.有 - 连接的样式需使用驼峰命名来书写，如：backgroundColor

3、事件

//HTML
<div onclick="myFunction()"></div>
//JSX 
React.createClass({
    render: function() {
        return (<div onClick={this.handlerClick}>点我！</div>);    //事件绑定需要驼峰写法
    },
    handlerClick: function() {
        alert();
    }
}); 

4、列表

//js写法
var dataArr = [1,2,3,4,5,6,7],
    templ = '';
dataArr.forEach(function(item, index) {
    templ += '<div>' + item + '</div>';
});
$('body').append(templ);

//JSX写法
render: function() {
    var dataArr = [1,2,3,4,5,6,7];
    return (<ul>
      {
         dataArr.map(function(item, index) {
           return (<li>{item}</li>);
         });
      }
　　　　　　 </ul>);
}