JSX

什么是JSX

const element = <div>hello,world</div>

上面代码，像是JavaScript，也像是html，这就是jsx，一种JavaScript的语法扩展，在React中使用JSX来描述用户界面。JSX是在JavaScript内部实现的

为什么使用JSX

如果要在js里写HTML，就是创造一个一个的DOM对象，用js来写，会非常的冗余，并且不能一目了然的看清楚DOM的解构。所以就扩展成了jsx，直接用HTML的写法在
js中写DOM。

JSX的特点

• JSX可以很好地描述UI：const element=<h1>hello,world</h1>
• React中认为渲染逻辑本质上和UI逻辑天然耦合，并没有人为地将标记与逻辑分类到不同文件，而是将他们放在组件这种松散松散耦合单元中，实现关注点分离
• JSX本身也是表达式，可以在{}中使用任意Javascript功能。在进行编译后，JSX会被转换成普通的JavaScript函数调用，并对其取值后得到JavaScript对象

• JSX可以防止注入攻击，ReactDOM在渲染所有输入内容前，默认会进行转译

  使用JSX

const Index = () => {
    return <div>Hello React!</div>
}
ReactDOM.render(<Index />,document.getElementById('index'));

在JSX中嵌入表达式

可以用花括号把任意的JavaScript表达式嵌入到JSX中

const txt = "hello,react"
const Index = () => {
    return <div>{(function(a,b){return a+b})(1,2)}</div>
}
ReactDOM.render(<Index />,document.getElementById('index'));

用JSX指定属性值

可以用双引号来指定字符串字面量作为属性值

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

可以用花括号嵌入一个JavaScript表达式作为属性值

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

注：在属性中嵌入JavaScript表达式时，不要使用引号将花括号括起来。您应该使用引号(用于字符串)或大括号(用于表达式)，但不能同事使用同一个属性。
犹豫JSX比HTML更接近JavaScript，因此ReactDOM使用camelCase属性名约定而不是HTML属性名称tabindex变成tabIndex class变成className

用JSX指定子元素

如果是空标签，应该像XML一样，使用\>立即闭合它

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

JSX标签可能包含子元素

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

JSX防止注入攻击

在JSX中嵌入用户输入是安全的

const title = response.potentiallyMaliciousInput;
// 这样是安全的:
const element = <h1>{title}</h1>;

默认情况下，在渲染之前，React DOM会格式化(escapes)JSX中的所有制。从而保证用户无法注入任何应用之外的代码。在被渲染之前，所有的数据都被转译成为了字符串处理
以避免XSS(跨站脚本)攻击

JXS表示对象

Babel将JSX变异成React.createElement()调用

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

等同于

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

React.createElement()汇之星一些检查来帮助你编写没有bug的代码，但基本上它会创建一个如下所示的对象:

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

这些对象被称作"React元素"。你可以把他们想象成为你想在屏幕上显示的内容的一种描述。React会读取这些对象，用他们来构建DOM，并且保持他们的不断更新

JSX

原文：https://www.cnblogs.com/dehenliu/p/12523341.html