【03】react的jsx语法介绍和使用

官方的描述:JSX是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。它没有任何语义,专门提供给与处理器使用。

const  dom = <div>这是一个jsx语法使用.</div>

在react中声明组件的时候使用jsx,如以下声明的组件:

import React from "react";
class ClassComponent extends Reacrt.Component {

    render() {
        return <div>
            在声明组件的时候使用jsx语法
   </div>
    }
}


export default ClassComponent

HTML中的onclick和JSX中的onClick

在HTML直接使用onclick，会出现我们意想不到的bug【很意外啊！】：

1. onclick添加的事件函数是在全局环境中使用的，这就会污染全局环境，很容易造成意想不到的后果；

2. 因为网页设置很多的事件函数，网页的性能就会越低，所以在很多的DOM元素设置onclick事件，有可能会影响网页的性能；

3. 对于一些DOM已经使用了onclick事件，如果在动态的DOM树中删除，就需要注销对应的时间处理器，若是忘记，就有可能造成内存泄露，更重要的是这样的bug还不容发现。

然而jsx中的onClick是控制在每一个组件里面的，不会污染全局环境。在是组件里面使用onClick的时候，并没有产生直接使用onclick的HTML，而是使用的事件委托【event delegation】的方式处理了点击事件，不管是多少个onClick，最后只在DOM树的最顶层节点上挂载一个onclick处理事件

而且在react组件中是设置由生命周期的，等到组件卸载的时候，会自动清除本组件相关的所有事件函数。

这是对jsx的简单理解,以后在开发工程中会由更深的理解!!!!