React中的JSX

JSX 是什么

JavaScript xml,JavaScript的语法扩展,将html写在JavaScript中就是JSX。官方定义为类XML语法的ECMAScript扩展。在React中JSX可以看成是React.createElement(component,props,...children)函数的语法糖,最终会被编译为React.createElement()函数调用,并返回一个被称为 “React元素”的普通JavaScript对象。

如何使用一个对象描述DOM结构(createElement对比jsx)

<!-- DOM对象 -->
<div id="appRoot" class="App">
  <h1 class="title">欢迎来到jsx</h1>
  <p>React 是一个帮助你构建页面的UI库</p>
</div>

//目标: 将DOM转换成一个普通的js对象
{
  selection: 'div',
  attrs: {
    id: 'appRoot',
    className: 'App'
  },
  children:[
    {
      selection: 'h1',
      attrs: {
        className: 'title'
      },
      children:[{
        text: '欢迎来到jsx'
      }]
    }
  ]
}

// 使用createElement 函数
React.createElement(
    'div',
    {
      className: 'App',
      id: 'appRoot',
    },
    React.createElement(
      'h1',
      {
        className: 'title',
      },
      '欢迎来到jsx'
    ),
    React.createElement(
      'p',
      null,
      'React 是一个帮助你构建页面的UI库'
    )
  )

// 使用jsx语法
class App extends React.Component {
  render() {
    return (
      <div id="appRoot" class="App">
        <h1 class="title">欢迎来到jsx</h1>
        <p>React 是一个帮助你构建页面的UI库</p>
      </div>
    );
  }
}

• 我们可以看到，使用React.createElement 会逐层嵌套，对开发来说难以理解维护,而使用jsx语法糖则像写JavaScript一样描述DOM结构(虽然看上去像html,但jsx更偏向于JavaScript,可以看成更加强大的js)

React的jsx对比Vue的template模板

<template>
  <div>
    <span>{{ title }}</span>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <span v-if="isShow">展示</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "vue",
      list: ["a", "b", "c", "d"],
      isShow: false,
    };
  },
};
</script>

import React, { Component } from "react";
export default class myTest extends Component {
  state = {
    title: "React",
    list: ["a", "b", "c", "d"],
    isShow: false,
  };
  render() {
    const { title, list, isShow } = this.state;
    return (
      <div>
        <span>{title}</span>
        <ul>
          {list.map((item) => {
            return <li key={item}>{item}</li>;
          })}
        </ul>
        {isShow && <span>展示</span>}
      </div>
    );
  }
}

• 1. 我们可以看到 vue 将视图放在 template 模版内,数据和逻辑则放在 script 标签内。而 React 则将整个视图与逻辑共同存放在称之为“组件”的松散耦合单元,没有人为的将其分离。一个类或者一个函数就是一个组件
• 2. 在 vue 中可以使用各种指令(例如 v-if，v-for 等),而 React 则是完全的 JavaScript 表达式。React 只是提供一个平台，所有的实现都需要我们通过 js 去实现

JSX 规范(常见)

• 1. 只能有一个根标签
• 2. 标签必须闭合
• 3. 样式类名不要使用 class,而是 className(避免与 es6 中的 class 类定义冲突 s)
• 4. 内联样式的 style:样式名以驼峰命名法表示, 如 font-size 需写成 fontSize。默认像素单位是 px
• 5. 标签中混入 js 表达式时使用{}
• 6. 在 react 中定义虚拟 DOM 时,不要写引号
• 7. 标签首字母若是小写开头，则将标签转为 html 中同名的元素
• 8. 标签首字母若是大写开头，react 就去渲染对应的组件
• 9. 事件名用驼峰命名法,如 onclick 写为 onClick