• React文档(三)介绍JSX


    我们先看看这个变量声明:

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

    这个有趣的标签语法既不是字符串也不是HTML。

    这种写法叫做JSX,这是一种对js语法的扩展。我们建议使用这种语法和React配合去描述UI本来应该的样子。JSX也许会让你想到模板语言,但是它拥有js的强大支持是与生俱来的。

    JSX生产React“元素”。我们会在下一章讲解将这些React元素渲染到DOM中。下面,你可以来看看JSX的基础知识来起步。

    在JSX中嵌入表达式

    你可以在JSX中嵌入任何使用大括号包裹起来的js表达式。
    举个例子,2+2,user.name还有formatName(user)都是有效的表达式:
    function formatName(user) {
      return user.firstName + ' ' + user.lastName;
    }
    
    const user = {
      firstName: 'Harper',
      lastName: 'Perez'
    };
    
    const element = (
      <h1>
        Hello, {formatName(user)}!
      </h1>
    );
    
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

    在CodePen里试一试

    我们把JSX代码分割成多行,这样可读性好。即使不需要,但当这样做地时候,我们同样建议将它包裹在圆括号里避免意想不到的错误。

    JSX也是一种表达式

    JSX表达式在编译之后会变成规则的js对象。

    这表示你可以将JSX放在if条件语句中或者for循环中,把它们赋值给变量,将他们作为函数的参数,也可以在函数中作为返回值:

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

    在JSX中指定属性

    有时你会使用引用(就是引号)来指定字符串字面量作为属性:

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

    也许你也会使用花括号来嵌入一个js表达式到属性中:

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

    当你在属性里嵌入js表达式的时候不要使用引用(引号)。否则JSX会把属性值当做一个字符串字面量而不是js表达式。你要么使用引用(引号,为字符串值)要么就用花括号(为js表达式),但是不要同时使用。

    在JSX中指定子元素

    如果是一个空标签,你会以一个/>来结尾,就像xml:

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

    JSX标签也可以包含子元素:

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

    警告:

    JSX更接近于js而不是HTML,所以React DOM使用驼峰属性命名规则来取代原来的HTML属性名。

    举个例子,class变成了className,tabindex变成了tabIndex。

    JSX防止注入攻击

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

    const title = response.potentiallyMaliciousInput;
    // This is safe:
    const element = <h1>{title}</h1>;

    默认情况下,React DOM会在渲染之前避免任何嵌入JSX的值。因此这样能够保证没有人能够将不明确的东西注入你的程序。所有输入都会在渲染之前被转换成字符串。这样能够防止XSS攻击。

    JSX表现为对象

    Babel会把JSX转换成一个React.createElement()调用。

    下面两个例子是相似的:

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

    React.createElement()会执行好几次检查帮助你减少bug而且更重要的它会创建一个这样的对象:

    // Note: this structure is simplified
    const element = {
      type: 'h1',
      props: {
        className: 'greeting',
        children: 'Hello, world'
      }
    };

    这些对象叫做“React元素”。你可以把它看成是你在屏幕上看到的东西的描述。React会读取这些对象然后使用它们构建DOM并且保持更新。

    我们在下一章节研究渲染React元素到DOM。

    提示:

    建议搜索“Babel”语法格式用于你的编辑器,这样可以高亮显示ES6和JSX的代码。

  • 相关阅读:
    Vue 组件之间传值(父子组件传值,vuex传值)
    利用computed和watch实现监听Vuex状态监听
    ESlint+VSCode自动格式化
    MySQL之分组查询(DQL)
    MySQL之排序查询(DQL)
    MySQL之条件查询(DQL)
    MySQL之概述
    jQuery之轮播图
    jQuery之添加删除记录
    jQuery之爱好选择
  • 原文地址:https://www.cnblogs.com/hahazexia/p/6377383.html
Copyright © 2020-2023  润新知