React专栏

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

读心悦 · 9月24日 · 2020年 本文821字 · 阅读3分钟61

官方的描述: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的简单理解,以后在开发工程中会由更深的理解!!!!

0 条回应

×