什么是JSX?在React中使用JSX

(纯手打，如有错误的地方在下方评论，3Q)

什么是JSX

JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。这个是官网：http://facebook.github.io/jsx/

举个栗子，在不适用JSX的React程序中创建一个标题的函数调用大概是这个样子：

使用JSX的好处

1.更加熟悉

许多团队都包括了非开发人员，例如熟悉HTML的UI及UX设计师和负责完整测试产品的质量保证人员。使用JSX之后，这些团队成员都可以更轻松地阅读和贡献代码。任何熟悉XML语言的人都能轻松地掌握JSX.

2.更加语义化

除了更加熟悉外，JSX还能够讲JavaScript代码转换为更加语义化、更加有意义的标签。

< div className= "divider" >

< h2 >Question </ h2 >

</ div >

变成

< Divider >Question </ Divider >

3.更加直观

对比使用JS和JSX

//使用JS

render: function (){

return React. createElement( 'div', { className: "divider"},

"Label Text",

React. createElement( 'hr')

);

}

//使用JSX

render: function (){

return < div className= "divider" >

Labbel Text < hr />

</ div >

}

很多人都认为JSX版本更加易懂，也更容易调试。

4.抽象化

上面的js写法可能会因为React的版本不同而不同。但是JSX提供的抽象能力却能够在升级的时候无痛修改。不需要修改任何代码

5.关注点分离

最后，也是React的核心。有HTML和JS代码在一起组成一个独立的组件，并把所有的逻辑和标签封装在其中。所以你只需要关注每一个独立的组件。JSX以干净且简洁的方式保证了组件中的标签和所有业务逻辑的相互分离。它不仅提供了一个清晰、直观的方式来描述组件树，同时还让你的应用程序更加符合逻辑。

复合组件

1.定义一个自定义组件

function Welcome( props) {

return < h1 >Hello, { props. name } </ h1 >;

}

const element = < Welcome name= "Sara" />;

ReactDOM. render(

element,

document. getElementById( 'root')

);

2.使用动态值

function Welcome( props) {

return < h1 >Hello, { props. name } </ h1 >;

}

const element = < Welcome name= "Sara" />;

ReactDOM. render(

element,

document. getElementById( 'root')

);

3.子节点

组件调用组件：https://reactjs.org/docs/components-and-props.html

JSX与HTML有何不同

JSX很像HTML，但却不是HTML语法的完美复制品。实际上JSX规范中这样声明：

这个规范(JSX)并不尝试去遵循任何XML或HTML规范。JSX是作为一种ECMAScript特性来设计的，至于大家觉得JSX像XML这一事实，那仅仅是因为大家比较熟悉XML。以上内容摘自：http://facebook.github.io/jsx/

属性

在HTML中我们用内联的方式给每个节点设置属性，像这样：

< div id= "xxxID" class= "xxxClass" >... </ div >

JSX以同样的方式设置属性，同时还提供动态js变量设置属性。用花括号包裹js变量甚至回调函数。

var someId = this. props. id;

var classes = 'someClass';

...

< div id= { someId } className= { classes } >... </ div >

条件判断

在React中，一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起，这意味着你可以轻松地利用JavaScript强大的魔力，比如循环和条件判断。

在HTML中使用if/else逻辑很难。直接往JSX中加入if语句会渲染出无效的JavaScript：

< div className= { if( isComplete){ 'xxxxx' }}>...</div>

上面会报错。。。

所以我们要使用以下某种办法：

• 使用三目运算符
• 设置一个变量并在属性中引用它
• 将逻辑转到到函数中
• 使用&&运算符

非DOM属性

下面的特殊属性只在JSX中存在

• key（提升性能的关键）
• ref（ref允许父组件在render方法之外保持对子组件的一个引用）
• dangerouslySetInnerHTML（设置原始的HTML）

事件

用React元素处理事件，跟Dom元素处理事件非常相似。官网Demo: https://reactjs.org/docs/handling-events.html

在dom中：

< a href= "#" onclick= "console.log('The link was clicked.'); return false" >

Click me

</ a >

在React中：

function ActionLink() {

function handleClick( e) {

e. preventDefault();

console. log( 'The link was clicked.');

}

return (

< a href= "#" onClick= { handleClick } >

Click me

</ a >

);

}

注释

JSX本质上就是JavaScript，因此你可以在标签内添加原生的JavaScript注释。注释可以用以下两种形式添加：

1. 当作一个元素的子节点
2. 内嵌在元素的属性中

  作为子节点

< div >

{ /* a comment about this input with multiple lines */ }

< input name= "email" placeholder= "Email Address" />

</ div >

  作为内联属性

< div >

< input

/*

a note about the input

*/

name= "email"

placeholder= "Email Address" />

</ div >

    也可以单行注释:

< div >

< input

name= "email" //a single-line comment

placeholder= "Email Address" />

</ div >

特殊属性

由于JSX会转换为原生的JavaScript函数，因此有一些js关键词我们也是不能使用的（如for何class）。

给表单里面的标签添加for属性需要使用htmlFor：

< label htmlFor= "forText" ... >

自定义class需要使用className：

< div className= { classText } >

样式

内联样式。React把所有的内联样式都规范化为驼峰形式，与JavaScript中的DOM对象的style属性一致。

var styles = {

borderColor: '#999',

backgroundColor: '#555'

};

ReactDom. render( < h1 style= { styles } >Hello WWW </ h1 >, document. body);

没有JSX的React

如果没有JSX。。。以后再写

1.创建React元素

2.简写

JSX官方规范

2014年9月Facebook发布了一份JSX官方规范，陈述了他们要创造JSX的根本原因，以及一些关于语法上的技术细节。

你可以在http://facebook.github.io/jsx/上阅读到更多的信息

在浏览器中实验

https://reactjs.org/docs/hello-world.html这个地方有个JSFiddle的链接

https://reactjs.org/jsx-compiler.html这个地方有REPL环境

本文部分内容摘抄自<React引领未来的用户界面开发框架>