react学习之初识jsx

简介

jsx是用在React中的一种虚拟dom的一种方式。React有一个核心机制就是虚拟dom，就是对虚拟dom的操作，减少了对实际dom的操作，大大提高了性能。jsx就是javascript和xml结合的一种格式，React发明了jsx，利用html语法来创建虚拟dom。当遇到<的时候，jsx就当做html来解析。当遇到{的时候，就当javascript解析。
例如：

const List = (
    <ul className="list">
        <li>first</li>
        <li>second</li>
    </ul>
)

如上面的代码需要注意一点，由于class是javascript中的关键字，所以需要用className来代替，而for用htmlFor代替。其实jsx在执行的过程中是经过翻译器翻译的，翻译成了原生的javascript代码来执行。

基本语法

jsx中的大括号中放的是javascript代码，所以也可以放表达式，例如：

{a?1:0}

而且在jsx中，可以循环一个数组来返回列表数据。
jsx中绑定事件，可以直接绑定到元素上。

1	<button onClick={this.submit.bind(this)}>submit</button>

在这里需要注意两点：

onClick的c必须大写，因为这里是当做javascript来解析的，大小写要区分。
this的指向需要手动绑定。

使用内联样式的时候，传入的属性值不能是字符串了，必须是对象。

1	<div style={{color:"#fff"}}>jsx</div>

这里需要主意的就是，并不是双大括号，而是在传入属性的时候里面的大括号是表示的是对象。

在组件内部添加html代码的时候，并将html代码渲染到页面上，React会默认转义，如果不想转义可以这样写：

var wy = '<h1>wy</h1>'
React.render(
    <div dangerouslySetInnerHTML={{__html:wy}}></div>,document.body
)

#小结

在刚接触jsx的时候，看着这种混合在一起的写法会很不适应，不过写的多了，看的多了慢慢也就习惯了。特别和vue不同，在vue中双引号之中也可能是javascript代码，而jsx中是大括号，这点要区分开。