react03_jsx

react JSX

一、JSX官方概述

先来一行代码

const element = <h2>Hello, tsymq!</h2>;

这个标签语法不是一个字符串，也不是HTML，这中语法称为JSX，是一种JavaScript 的语法扩展，它具有 JavaScript 的全部功能。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，它有以下优点：

1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2. 它是类型安全的，在编译过程中就能发现错误。
3. 使用 JSX 编写模板更加简单快速。

个人感觉jsx在形式上就像是java中jsp的反向版，jsp是可以在html中插入java代码，用来控制内容输出，而jsx是在JavaScript中可以放入html，用来作为元素的填充。

const ele = <h1 className="foo">Hello, tsymq</h1>;
ReactDOM.render(ele, document.getElementById('react_test'));

html可以没多少内容，将

填充到ele中，再由ReactDOM.render()来渲染到页面。

二、使用JSX

1.在 JSX 中嵌入表达式

先声明一个 name 变量，要在定义元素时使用的话，可以将其放在大括号{}中，可以说，{}中可以写任何JavaScript语句

const num = 100;
const ele = <h1 className="foo">Hello, tsymq,,,{num+1}</h1>;
ReactDOM.render(ele, document.getElementById('react_test'));

在页面上显示的结果是Hello, tsymq,101

2.jsx也是表达式

也可以将jsx插入JavaScript语句中，因为在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象

const flag = 0;
function getWinner(f){
    if(f==0){
        return <h2>Winner: zhang3!</h2>;
    }
    else{
        return <h2>Winner: li4!</h2>;
    }
}
//调用函数
const ele = getWinner(flag);

3.jsx特定属性

使用大括号，在属性值中插入一个表达式

var url = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570366243249&di=6563601f7f19ac36c0819f6ff4fced52&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F27%2F20180927162254_EVMWM.jpeg';
const num = 100;
const ele = (
    <div>
        <h1 className="foo">Hello, tsymq,,,{num+1}</h1>
        <img src={url} alt="pic"/>
    </div>
);
ReactDOM.render(ele, document.getElementById('react_test'));

4.多标签嵌套

在jsx中定义元素时，可以嵌套多个html标签

const ele = (
  <div>
    <h1>Hello!</h1>
    <h2>Tsymq NB.</h2>
  </div>
);

5.jsx表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

const ele = (
  <h1 className="title">
    Hello, world!
  </h1>
);
//完全等效于上面的写法
const ele = React.createElement(
  'h1',
  {className: 'title'},
  'Hello, world!'
);

ps:仅使用react创建的网页通常只有单一的DOM根节点，所有的内容都只能渲染到这个根节点中

比如，一个页面中的js脚本中，ReactDOM.render()函数只能将内容渲染到一个现有的<div>标签中，无法先将一部分内容渲染到一个<div>，再将另一部分内容渲染到另一个<div>.