React文档: JSX语法

一. JSX是什么?

JSX语法类似如下代码:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

定义: JSX是react的核心组成部分, 使用XML标记的形式去声明界面, 界面组件之间可以互相嵌套.jsx最终会编译成js语言.

二. JSX具体规则

1. JSX本身也是表达式,可以被当做函数的返回值,可以把JSX赋值给别的变量,可以参与if,for等运算等等
2. JSX并不需要被单引号和双引号包裹,因此可能编辑器要有JSX的兼容插件.
3. JSX采用camelCase(小驼峰命名法),原生html的部分属性名做了修改,如class变为className,需要特别注意.
4. JSX中嵌入的表达式,可以是任意有效的表达式.
5. JSX中插入字符串字面量需要被双引号包裹,比如例子1; 插入表达式,比如例子2

// 例子1
const element = <div tabIndex="0"></div>;
//例子2
const element = <img src={user.avatarUrl}></img>;

6. JSX最好能包裹在一个"()"中,防止出现自动插入分号陷阱.

三. JSX怎么渲染的

JSX语句(示例1)会被React生成一个React元素(示例2),并最终被React.createElement()调用(示例3),用来构建dom树.

// 示例1
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

//示例2
// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

//示例3
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

四. JSX有什么优点

1. 声明式的语法,构建页面更加直观易懂.

五. JSX有什么缺点

六. 为什么使用JSX

1. React认为,渲染逻辑本质上存在着逻辑和UI的耦合,因此使用JSX方便的将逻辑和UI进行一定程度的耦合.
2. 可能用JSX写React比较方便