React之JSX语法

介绍

JSX是一种类XML语言，全程是JavaScript XML。React可以不使用JSX来编写组件，但是使用JSX可以让代码可读性更高、语义更清晰、对React元素进行抽象等

本质：
创建JSX语法的目的是为了使用基于XML的方式表达组件的嵌套，保持跟HTML一致的结构，语法除了在描述组件比较特别之外，和普通的js没有区别。并且最终所有的JSX都会被编译为原生的js

规则

var HelloMessage = React.createClass({
        render: function() {
          return (
          {/*标签闭合*/}
            <div>
              <h2>Hello</h2> <ul> <li>hello</li> </ul> {/*自闭合*/} <input type="text"/> </div> ); } });

标签可以任意的嵌套

标签闭合

标签必须严格闭合，否则无法编译通过

JSX 组件

1. HTML组件，HTML中的原生标签
2. React组件，自定义组件

组件属性

和html一样，JSX中组件也有属性，传递属性的方式也相同

对于HTML组件：

function render() {
   return  <p title="title" >hello,React,world </p> }

对于React组件可以定义自定义属性，传递自定义属性的方式如下：

function render() {
    var data = {name: 'sqliang',age:23}
    return <p> <CustomComponent customProps={data}/> </p> } }

属性可以是字符串，也可以是任意的js变量，传递方式是将变量用花括号包裹

注意：
class属性要写成className；
label标签的for属性要写成htmlFor；
绑定事件的属性要写成onClick,onChange….
对于data-xxx，aria-xxx，使用中划线，其余基本上写驼骆峰格式

JSX花括号

显示文本

很多情况需要将js中的文本直接显示，做法和显示变量一样，用花括号

运算

花括号里实际上除了变量以外，可以是一段js表达式，来做简单的运算：

funtion render() {
    var text = text;
    var isTrue = false;
    var arr = [1,2,3];
    return <p> {text} {isTrue ? "true" : "false"} {arr.map(function(it) { return <span> {it} </span> })} </p> }

注释

{/*xxxxxxxx*/}

限定规则

render方法的返回值必须是有且只有一个根组件，即只能有一个闭合/自闭合根标签，或自定义组件

JSX编译方式

JSX的写法最终会编译成原生js，其编译方式有两种：

1. 在HTML中引入babel编译器；
2. 离线编译JSX，通过babel编译JSX；

jsx到js的转化：

var Hello = React.createClass({
    displayName: 'Hello',render: function() {
      return React.createElement("div",null,"Hello ",this.props.name);
    }
  });

  ReactDOM.render(
    React.createElement(Hello,{name: "World"}),document.getElementById('container')
  );

重点

class要写成className

数组遍历要添加key属性，否则会有error提示信息

html转JSX工具，facebook提供了html转jsx组件的功能句，可以直接复制html转为jsx组件

视频学习资源

极客学院