React入门-2.JSX介绍

介绍

如下代码，看上去比较搞笑，既像Javascript的语法，又像HTML，将一个标签赋值给变量element。这就是JSX，是javascript的扩展语法。我们推荐在react中使用JSX，使用JSX描述UI。

const element = 
Hello, world!
;

JSX中嵌入表达式

在JSX中，可以在大括号里嵌入表达式，与vue中的双大括号作用类似

在JSX中指定属性

指定静态属性值

const element = 
;

在大括号中指定动态属性值

const user = {avatarUrl:'images/a.jpg'};
const element = ;

JSX结构

单标签，如果没有结束标签在开始标签的中加闭合

const element = ;

jsx可以存在子标签

const element = (
  

    
Hello!
    
Good to see you here.
  
);

JSX可以防止注入攻击

默认情况下，React DOM在呈现它们之前转义JSX中嵌入的任何值。在呈现前，所有内容被转换为字符串。

    //假设name的值从其他地方获取，动态dom
    let name =
terry
;
    let dom = 
 {name}
        ReactDOM.render(
         dom,
      document.getElementById('app')
    );

浏览器将会显示 [object Object]

JSX本质

JSX实际上会被编译为一个JS对象

const element = (
  

    Hello, world!
  
);

等价于

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

我们把这种对象成为“React elements”.React读取这些对象并且使用这些对象构造DOM，保持更新

---

到此，我们了解了JSX基本语法。接下来，我们学习react的组件