React中JSX的理解

React中JSX的理解

JSX是快速生成react元素的一种语法，实际是React.createElement(component, props, ...children)的语法糖，同时JSX也是Js的语法扩展，包含所有Js功能。

描述 JSX发展过程

在之前，Facebook是PHP大户，所以React最开始的灵感就来自于PHP。
在2004年这个时候，大家都还在用PHP的字符串拼接来开发网站。

$str = "<ul>"; foreach ($talks as $talk) { $str += "<li>" . $talk->name . "</li>"; } $str += "</ul>";

这种方式代码写出来不好看不说，还容易造成XSS等安全问题。应对方法是对用户的任何输入都进行转义Escape，但是如果对字符串进行多次转义，那么反转义的次数也必须是相同的，否则会无法得到原内容，如果又不小心把HTML标签给转义了，那么HTML标签会直接显示给用户，从而导致很差的用户体验。
到了2010年，为了更加高效的编码，同时也避免转义HTML标签的错误，Facebook开发了XHP。XHP是对PHP的语法拓展，它允许开发者直接在PHP中使用HTML标签，而不再使用字符串。

$content = <ul />; foreach ($talks as $talk) { $content->appendChild(<li>{$talk->name}</li>); }

这样的话，所有HTML标签都使用不同于PHP的语法，我们可以轻易的分辨哪些需要转义哪些不需要转义。不久的后来，Facebook的工程师又发现他们还可以创建自定义标签，而且通过组合自定义标签有助于构建大型应用。
到了2013年，前端工程师Jordan Walke向他的经理提出了一个大胆的想法：把XHP的拓展功能迁移到Js中，首要任务是需要一个拓展来让Js支持XML语法，该拓展称为JSX。因为当时由于Node.js在Facebook已经有很多实践，所以很快就实现了JSX。

const content = ( <TalkList> {talks.map(talk => <Talk talk={talk} />)} </TalkList> ); 为何使用JSX

React认为渲染逻辑本质上与其他UI逻辑内在耦合，比如在UI中需要绑定处理事件、在某些时刻状态发生变化时需要通知到UI，以及需要在UI中展示准备好的数据。
React并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为组件的松散耦合单元之中，来实现关注点分离。
React不强制要求使用JSX，但是大多数人发现，在JavaScript代码中将JSX和UI放在一起时，会在视觉上有辅助作用，它还可以使React显示更多有用的错误和警告消息。
简单来说，JSX可以很好的描述页面html结构，很方便的在Js中写html代码，并具有Js的全部功能。

优点

JSX的优点主要体现在以下三点：

快速，JSX执行更快，因为它在编译为JavaScript代码后进行了优化。

安全，与JavaScript相比，JSX是静态类型的，大多是类型安全的。使用JSX进行开发时，应用程序的质量会变得更高，因为在编译过程中会发现许多错误，它也提供编译器级别的调试功能。

简单，语法简洁，上手容易。

JSX实例 规则定义

JSX中定义了一些规则以及用法：

JSX只能有一个根元素，JSX标签必须是闭合的，如果没有内容可以写成自闭和的形式<div />。

可以在JSX通过{}嵌入Js表达式。

JSX会被babel转换成React.createElement的函数调用，调用后会创建一个描述HTML信息的Js对象。

JSX中的子元素可以为字符串字面量。

JSX中的子元素可以为JSX元素。

JSX中的子元素可以为存储在数组中的一组元素。

JSX中的子元素可以为Js表达式，可与其他类型子元素混用；可用于展示任意长度的列表。

JSX中的子元素可以为函数及函数调用。

JSX中的子元素如果为boolean/null/undefined将会被忽略，如果使用&&运算符，需要确保前面的是布尔值，如果是0/1则会被渲染出来。

在对象属性中定义React组件，可以使用object的点语法使用该组件。

React元素会被转换为调用React.createElement函数，参数是组件，因此React和该组件必须在作用域内。

React元素需要大写字母开头，或者将元素赋值给大小字母开头的变量，小写字母将被认为是HTML标签。

不能使用表达式作为React元素类型，需要先将其赋值给大写字母开头的变量，再把该变量作为组件。

JSX的使用

在示例中我们声明了一个名为name的变量，然后在JSX中使用它，并将它包裹在大括号中。在JSX语法中，可以在大括号内放置任何有效的JavaScript表达式。例如2 + 2、user.firstName或formatName(user)都是有效的JavaScript表达式。

const name = "Josh Perez"; const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById("root") );

同样JSX也是一个表达式，JSX天生就是需要被编译之后才可以使用的，在编译之后JSX表达式会被转为普通JavaScript函数调用，并且对其取值后得到JavaScript对象。也就是说，你可以在if语句和for循环的代码块中使用JSX，将JSX赋值给变量，把JSX当作参数传入，以及从函数中返回JSX。

function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }