react 注释html,React之JSX语法

React发明了JSX，利用HTML语法来创建虚拟DOM。React的核心机制之一就是可以在内存中创建虚拟的DOM元素。以此来减少对实际DOM的操作从而提升性能。 JSX 即Javascript XML，它是对JavaScript 语法扩展。React 使用 JSX 来替代常规的 JavaScript。你也可以认为JSX其实就是JavaScript。当遇到

JSX的优点：

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

可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模板更加简单快速。

使用JSX

如果要使用JSX，需要得到语法的支持，你可以使用Babel来进行转换。在该篇文章当中直接引入Babel文件。

将上一篇文章的“你好，世界”拿过来看一下：

Title

ReactDOM.render(

你好，世界

,

document.querySelector("#wrap")

)

以上代码中的模板即是用了JSX。如果我们要在模板中嵌套多个HTML标签，需要使用一个父元素对其进行包裹。将代码修改为：

ReactDOM.render(

张培跃

欢迎学习 React

今天天气不错，挺风和日丽的！

,

document.querySelector("#wrap")

)

注意千万不要在最外层添加多个并列标签，否则会报错！另外如果你为JSX代码用引号包裹起来的话，浏览器会认为是文本而不是HTML！

ReactDOM.render(

"

我不会被识别为HTML标签哦！

",

document.querySelector("#wrap")

)

单独放到文件内

咱们也可以将JSX代码单独放到一个文件上，供其它文件来调用 。首先创建一个名字为my_react.js的文件，代码如下：

ReactDOM.render(

我好帅！我好苦恼啊！

,

document.getElementById('wrap')

);

然后在你的HTML文件当中引入该JS文件即可：

Title

当然你也可以将你的JSX放到外部文件中。创建一个名字为react-jsx.js的文件，内容如下：

var myInfo=

我好帅！我好苦恼啊！

;

然后引入：

Title

ReactDOM.render(

myInfo,

document.querySelector("#wrap")

)

JSX当中的标签类型

在JSX语法中，使用的标签类型有两种：DOM类型的标签(div、span等)和React组件类型的标签(关注后面文章)。DOM类型的标签需要标签的首字母小写，React组件类型的标签需要首字母大写。React也是通过首字母的大小写来判断渲染的是哪种类型的标签。

React组件类型标签：

function ZhangPeiYue(){

return (

React组件类型标签

)

}

ReactDOM.render(

//React组件类型标签

,

document.querySelector("#myApp")

)

React组件类型标签：

ReactDOM.render(

//DOM类型标签

DOM类型标签

,

document.querySelector("#myApp")

)

JSX中的表达式

JSX是支持表达式的，用法很简单，你需要将表达式写到{}内即可。代码如下：

ReactDOM.render(

{100+100}

,

document.querySelector("#wrap")

)

不过需要注意的是在JSX当中，是不能使用if else 的，不过可以使用三元运算表达式：

var ok=1;

ReactDOM.render(

{ok==1?"我很帅":"我很有才华"}

,

document.querySelector("#wrap")

)

JSX上的style

如果要用JSX来添加样式，很简单，代码如下，此处不解释：

var ok=1;

var myStyle={

color:"red",

fontSize:50

}

ReactDOM.render(

{ok==1?"我很帅":"我很有才华"}

,

document.querySelector("#wrap")

)

或者：

var ok=1;

ReactDOM.render(

color:"red",

fontSize:50

}}>{ok==1?"我很帅":"我很有才华"}

,

document.querySelector("#wrap")

)

JSX上的数组输出

JSX可以直接在模板输出JavaScript变量。如果这个变量是一个数组，会自动展开所有元素。是不是很给力？哈

var arr=[

你是风儿

,

我是沙

,

缠缠绵绵到天涯

];

ReactDOM.render(

{arr}

,

document.querySelector("#wrap")

)

咱们也可以利用数组的map属性来对其进行数据列表渲染：

var arr=["你是风儿","我是沙","缠缠绵绵到天涯"];

var lis=arr.map(function(v){

return

{v}

})

ReactDOM.render(

{lis}

,

document.querySelector("#wrap")

)

JSX当中的注释

只需要将注释写到{}当中即可，如下：

var arr=[

你是风儿

,

我是沙

,

缠缠绵绵到天涯

];

ReactDOM.render(

{

/*前

* 行

* 注

* 释*/

// 单行注释

// arr

}

,

document.querySelector("#wrap")

)

JSX其实就是JavaScript。一些关键字不要作为XML的属性名。例如：for,if,class 。另外大括号里是JavaScript，不要加引号，加引号就会被当成字符串。