React入门-2.JSX介绍

介绍

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

const element = <h1>Hello, world!</h1>;

JSX中嵌入表达式

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

<div id="app"></div>
    <script type='text/babel'>
        let name = 'terry';
        let p = {name:'larry',age:12}
        let dom = <h1>hello {name},{1+1},{p.age},{p?'欢迎':'...'}</h1>
        ReactDOM.render(
             dom,document.getElementById('app')
        );
    </script>

在JSX中指定属性

指定静态属性值

const element = <div tabIndex="0"></div>;

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

const user = {avatarUrl:'images/a.jpg'};
const element = <img src={user.avatarUrl}></img>;

JSX结构

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

const element = <img src={user.avatarUrl} />;

jsx可以存在子标签

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

JSX可以防止注入攻击

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

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

浏览器将会显示 [object Object]

JSX本质

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

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

等价于

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

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

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