读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. React
  3. 正文

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

2020年09月24日 106点热度 0人点赞 0条评论

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

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: react
最后更新:2020年10月08日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
canvas react vue Echarts redux taro 阅读 Nginx CSS flutter 悦读 随笔 mysql hook JavaScript node 闲谈 git 小程序
推荐文章
  1. React组件传值
  2. 【02】创建react应用的react元素和react组件
  3. useContext()组件状态共享或者传值
  4. 小程序订阅消息
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (40)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号