React基础篇——一、JSX

一、JSX

用于描述UI的JavaScript扩展语法，是UI描述和UI数据之间的桥梁。

1，语法

JSX本质上还是JavaScript。

①基本语法和XML语法相同，都是使用成对的标签构成一个树状结构的数据。

const element = {
  <div>
     <h1>Hello,world</h1>
  </div>
}

②两种标签类型：dom类型的标签(首字母必须小写)和React组件类型的标签(首字母必须大写)。React通过首字母的大小写判断渲染的组件是DOM标签还是React类型的标签。

const elementDom = <h1>Hello,world</h1>;

const elementReact = <HelloWorld />;

const element = (
  <div>
    <HelloWorld />
  </div>
)

③JavaScript表达式

在JSX中使用表达式需要将表达式用大括号{}包起来、表达式在JSX使用场景有两个：

• 通过表达式给标签属性赋值
• 通过表达式定义子组件

JSX中只能使用JavaScript表达式，不能使用多行JavaScript语句。(可以使用三目运算符或逻辑与(&&)代替if语句的作用)

//通过表达式给标签属性赋值
const element = <User age={1+1} />;
//通过表达式定义子组件
const element = ( 
  <ul>
    {list.map((item) => <User name={item.name} age={item.age} />)}
  </ul>
)

//错误
const element = (
  <div>
    {
      if(complete) {
        return <User />;
      } else {
        return null;
      }
    }
  </div>
)

//正确
const element = (
  <div>
    {
      complete ? <User /> : null
    }
  </div>
)
const element = (
  <div>
    complete&&<User />
  </div>
)

④标签属性

• JSX标签是DOM标签时，对应DOM标签支持的属性JSX也支持，例如id、class、style、onclick等，部分属性名称有所改变，例如class要写成className，事件属性名称采用驼峰命名法，例如onclick要写成onClick。
• JSX标签是React标签时，可以任意自定义标签的属性名。

⑤注释需要用大括号{}包一下

2，JSX不是必需的(但应首选JSX语法)

JSX只是React.createElement(component,props,...children)的语法糖，所有的JSX语法最终都会被转换成对这个方法的调用。

//JSX语法
const element = <div className='foo'>Hello,world</div>

//转换后
const element = React.createElement('div',{className:'foo'},'Hello,React')