美文网首页前端开发那些事儿
《图解React》- 第四节 JSX

《图解React》- 第四节 JSX

作者: 张中华 | 来源:发表于2021-05-10 06:17 被阅读0次

    JSX简介

    或者

    const element = <h1>Hello, world!</h1>;
    

    JSX是JavaScript的语法扩展(eXtension),让我们在JavaScript中可以编写像HTML一样的代码。
    JSX看起来和HTML几乎一模一样,都可以使用div,button,span,a,p之类的元素标签,但是JSX中使用的“元素”不局限于HTML中的元素,可以是任何一个React组件。React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写。

    为什么使用JSX?

    React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如,在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI,以及需要在 UI 中展示准备好的数据。

    React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式,而是通过将二者共同存放在称之为“组件”的松散耦合单元之中,来实现关注点分离。

    React认为,一个组件因该是具备UI描述和UI数据的完整体,不应该将它们分开处理,于是发明了JSX,作为UI描述和UI数据之间的桥梁。

    JSX的使用方式

    嵌入表达式

    const element = <h1>Hello, {name}</h1>;
    

    使用表达式

    function getGreeting(user) {
      if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
      }
      return <h1>Hello, Stranger.</h1>;
    }
    

    布尔类型、Null 以及 Undefined 将会忽略

    false, null, undefined, and true 是合法的子元素。但它们并不会被渲染。以下的 JSX 表达式渲染结果相同:

    <div />
    
    <div></div>
    
    <div>{false}</div>
    
    <div>{null}</div>
    
    <div>{undefined}</div>
    
    <div>{true}</div>
    

    JSX特定属性

    你可以通过使用引号,来将属性值指定为字符串字面量:

    const element = <div tabIndex="0"></div>;
    

    也可以使用大括号,来在属性值中插入一个 JavaScript 表达式:

    const element = <img src={user.avatarUrl}></img>;
    
    警告

    因为 JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。
    例如,JSX 里的 class 变成了 className,而 tabindex 则变为 tabIndex。

    JSX 防止注入攻击

    React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(cross-site-scripting, 跨站脚本)攻击。

    JSX 本质

    实际上,JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖,所以JSX并不是必需的。

    Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
    以下两种示例代码完全等效:

    const element = (
      <h1 className="greeting">
        Hello, world!
      </h1>
    
    const element = React.createElement(
      'h1',
      {className: 'greeting'},
      'Hello, world!'
    );
    

    如果你想了解更多 JSX 转换为 JavaScript 的示例,可以尝试使用 在线 Babel 编译器

    注意

    在React 17之前,在使用JSX的代码文件中,即使代码中并没有直接使用React,也一定要导入这个React,这是因为JSX最终会被转译成依赖于React的表达式。

    JSX的onClick事件处理方式与HTML的onclick

    HTML
    • onclick添加的事件处理函数是在全局环境下执行的,这污染了全局环境,很容易产生意料不到的后果
    • 给很多DOM元素添加onclick事件,可能会影响网页的性能,毕竟,网页需要的事件处理函数越多,性能就会越低
    • 对于使用onclick的DOM元素,如果要动态地从DOM树种删掉地话,需要把对应地事件处理器注销,假如忘了注销,就可能造成内存泄漏,这样地bug很难被发现。
    JSX

    上面说地这些问题,在JSX中都不存在。

    • JSX使用事件控制在整个组件范围内,不会影响全局。
    • JSX使用事件委托地方式处理点击事件,无论有多少个onClick出现,其实最后都只在DOM树上添加了一个事件处理函数,挂在最顶层地DOM节点上。所有地点击事件都被这个事件处理函数捕获,然后根据具体组件分配给特定函数,使用事件委托地性能要比为每个onClick都挂载一个事件处理函数要高。
    • 因为React控制了组件的生命周期,在unmount的时候自然能够清除相关的所有事件处理函数,内存泄漏也不再是一个问题。

    相关文章

      网友评论

        本文标题:《图解React》- 第四节 JSX

        本文链接:https://www.haomeiwen.com/subject/wlkydltx.html