React（三）JSX内置表达式

（一）JSX是什么?

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

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

（二）使用 JSX

（1）注释写法

{/* 哈哈哈，你好 */}

　　（2）添加自定义属性

　　　　需要使用 data- 前缀。

这是一个很不错的 JavaScript 库!

（3）JSX 中不能使用 if else 语句，但是可以使用三元表达式

表达式写在花括号 {} 中

{userName == '' ? '用户没有登录' : '用户名:' + userName}

（4）React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    哈哈哈,
    document.getElementById('example')
);

（5）属性绑定

（6）JSX 允许在模板中插入数组，数组会自动展开所有成员

var arr = [
  菜鸟教程,
  学的不仅是技术，更是梦想！,
];
ReactDOM.render(
  {arr},
  document.getElementById('example')
);

（7）html展示

　　a：通过Unicode转码

　　b：通过 dangerouslySetInnerHTML 设置 html

　　　（此方法可能会存在 XSS 攻击）

react

哈哈哈