zoukankan      html  css  js  c++  java
  • JSX

    什么是JSX

    const element = <div>hello,world</div>
    

    上面代码,像是JavaScript,也像是html,这就是jsx,一种JavaScript的语法扩展,在React中使用JSX来描述用户界面。JSX是在JavaScript内部实现的

    为什么使用JSX

    如果要在js里写HTML,就是创造一个一个的DOM对象,用js来写,会非常的冗余,并且不能一目了然的看清楚DOM的解构。所以就扩展成了jsx,直接用HTML的写法在
    js中写DOM。

    JSX的特点

    • JSX可以很好地描述UI:const element=<h1>hello,world</h1>
    • React中认为渲染逻辑本质上和UI逻辑天然耦合,并没有人为地将标记与逻辑分类到不同文件,而是将他们放在组件这种松散松散耦合单元中,实现关注点分离
    • JSX本身也是表达式,可以在{}中使用任意Javascript功能。在进行编译后,JSX会被转换成普通的JavaScript函数调用,并对其取值后得到JavaScript对象
    • JSX可以防止注入攻击,ReactDOM在渲染所有输入内容前,默认会进行转译

    使用JSX

    const Index = () => {
    	return <div>Hello React!</div>
    }
    ReactDOM.render(<Index />,document.getElementById('index'));
    
    

    在JSX中嵌入表达式

    可以用花括号把任意的JavaScript表达式嵌入到JSX中

    
    const txt = "hello,react"
    const Index = () => {
    	return <div>{(function(a,b){return a+b})(1,2)}</div>
    }
    ReactDOM.render(<Index />,document.getElementById('index'));
    

    用JSX指定属性值

    可以用双引号来指定字符串字面量作为属性值

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

    可以用花括号嵌入一个JavaScript表达式作为属性值

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

    注:在属性中嵌入JavaScript表达式时,不要使用引号将花括号括起来。您应该使用引号(用于字符串)或大括号(用于表达式),但不能同事使用同一个属性。
    犹豫JSX比HTML更接近JavaScript,因此ReactDOM使用camelCase属性名约定而不是HTML属性名称tabindex变成tabIndex class变成className

    用JSX指定子元素

    如果是空标签,应该像XML一样,使用>立即闭合它

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

    JSX标签可能包含子元素

    const element = (
      <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
      </div>
    );
    

    JSX防止注入攻击

    在JSX中嵌入用户输入是安全的

    const title = response.potentiallyMaliciousInput;
    // 这样是安全的:
    const element = <h1>{title}</h1>;
    

    默认情况下,在渲染之前,React DOM会格式化(escapes)JSX中的所有制。从而保证用户无法注入任何应用之外的代码。在被渲染之前,所有的数据都被转译成为了字符串处理
    以避免XSS(跨站脚本)攻击

    JXS表示对象

    Babel将JSX变异成React.createElement()调用

    const element = (
      <h1 className="greeting">
        Hello, world!
      </h1>
    );
    

    等同于

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

    React.createElement()汇之星一些检查来帮助你编写没有bug的代码,但基本上它会创建一个如下所示的对象:

    // 注意: 这是简化的结构
    const element = {
      type: 'h1',
      props: {
        className: 'greeting',
        children: 'Hello, world'
      }
    };
    

    这些对象被称作"React元素"。你可以把他们想象成为你想在屏幕上显示的内容的一种描述。React会读取这些对象,用他们来构建DOM,并且保持他们的不断更新

  • 相关阅读:
    oracle 10g 免安装客户端在windows下配置
    sql2005 sa密码
    使用windows live writer 有感
    windows xp SNMP安装包提取
    汉化groove2007
    迁移SQL server 2005 Reporting Services到SQL server 2008 Reporting Services全程截图操作指南
    foxmail 6在使用中的问题
    AGPM客户端连接不上服务器解决一例
    SpringSource Tool Suite add CloudFoundry service
    Java 之 SWing
  • 原文地址:https://www.cnblogs.com/dehenliu/p/12523348.html
Copyright © 2011-2022 走看看