1、什么是 JSX

JSX 是 JavaScript 的一种语法扩展。可以组装UI界面，同时可以和 JavaScript 语法配合使用。

2、为什么使用 JSX

  • 使用熟悉的语法定义 HTML 元素，提供更加语义化的标签，使用 JSX 编写模板更简单快速
  • 更加直观：JSX 让组件更加简单、明了、直观
  • 抽象了 React 元素的创建过程，使得编写组件变得更加简单

举例说明如下：

  1. const children1 = React.createElement('li', null, "第一个组件内容！");
  2. const children2 = React.createElement('li', null, "第二个组件内容！");
  3. const root = React.createElement('ul', { className: "list" }, children1, children2);

JSX等价如下：

  1. const root = (
  2.     <ul className="list">
  3.         <li>第一个组件内容！</li>
  4.         <li>第二个组件内容！</li>
  5.     </ul>
  6. );

显然JSX写法更便于页面的编写与维护，且简单、直观。

3、JSX书写规范

  • JSX的最外层只能有一个根元素，可以使用 div 、span 等标签
  • 正常情况下，我可以在最外层包裹一个小括号（），方便我们更好的格式化代码
  • JSX中的标签可以是单标签，也可以是双标签；注意：如果是单标签，必须以/>结尾
  • 在使用变量时，我们可以将其放在一个大括号中，大括号内可以放置任何有效的 JavaScript 表达式

代码示例如下：

  1. const root = (
  2.     <div className="list">
  3.         <div>第一个组件内容！</div>
  4.                  <img src="xxx.jpg" />
  5.         {1 === 1 && <div>第二个组件内容！</div>}
  6.     </div>
  7. );

4、JSX注释

通常有以下三种注释

  1. <ul className="list">
  2.     {/* 1、单行注释 */}
  3.     <li>第一个组件内容！</li> // 2、行尾注释
  4.     <li>第二个组件内容！</li>
  5.          {/*
  6.         3、多行注释
  7.         1
  8.         2
  9.         3
  10.         */}
  11. </ul>

5、JSX 嵌入变量

变量在 JSX 使用，需要用大括号 { } 包裹；注意：使用的变量需要提前定义。如下。

  1. const MyComponent = () => {
  2.     const text = "Hello World！";
  3.     return (
  4.         <div>{text}</div>
  5.     );
  6. };
  7. export default MyComponent;

6、JSX 嵌入表达式

  • 运算符表达式
  • 三元表达式

  • 函数调用

    1. const MyComponent = () => {
    3.   const isFinish = true;
    5.   const calc = () => {
    6.       const a = 1;
    7.       const b = 2;
    8.       return a + b;
    9.   };
    11.   return (
    12.       <div>
    13.           {/*1.运算符表达式*/}
    14.           <span>2 + 3 的和为：{2 + 3}</span>
    15.           {/*2.三元表达式*/}
    16.           <span>家庭作业是否完成：{isFinish ? "是" : "否"}</span>
    17.           {/*3.进行函数调用*/}
    18.           <span>{calc()}</span>
    19.       </div>
    20.   );
    21. };
    22. export default MyComponent;

    7、JSX绑定属性

    注意：在给元素绑定style时，外层的大括号是表示可传入变量或者表达式。而内部的大括号是一个对象，它里面是键值对，表示元素的样式属性及属性值。另外，当属性是由多个单词组成的时候，需要用驼峰命名法来表示，例如：fontSize

    1. const MyComponent = () => {
    3.   const title = "我是标题的全部内容！";
    4.   const url = "https://www.baidu.com";
    5.   const className = "span";
    7.   return (
    8.       <div>
    9.           {/* 1、绑定普通属性 */}
    10.           <h2 title={title}>我是标题...</h2>
    11.           <a href={url}>百度一下</a>
    12.           {/* 2.绑定class */}
    13.           <span className={className}>我是span标签</span>
    14.           <span className={['tag', "span"].join(" ")}>我是span标签2</span>
    15.           {/* 3.绑定style */}
    16.           <span style={{ color: "red", fontSize: 16 }}>我的字体颜色是红色</span>
    17.       </div>
    18.   );
    19. };
    20. export default MyComponent;

    8、JSX绑定事件

    可以看出 React 元素的事件处理和 DOM 元素的很相似，但存在一些语法上的差异：

  • React 的事件采用驼峰式命名，而不是纯小写的方式

  • 使用 JSX 语法时，需要传入一个函数作为事件处理函数，而不是一个字符串
  • 使用函数时不能加括号，不然会直接执行

  • 如果函数过于简单，可在JSX中直接编写函数内容

    1. const MyComponent = () => {
    3.   const onClick = () => {
    4.       window.alert("您点击了按钮1");
    5.   }
    7.   return (
    8.       <div>
    9.           <button onClick={onClick}>按钮1</button>
    10.           <button
    11.               onClick={() => {
    12.                   window.alert("您点击了按钮2");
    13.               }}
    14.           >
    15.               按钮2
    16.           </button>
    17.       </div>
    18.   );
    19. };
    20. export default MyComponent;

    9、JSX条件渲染

    常见的条件渲染的方式有以下三种：

  • 方式一：条件判断语句，适合逻辑较多的情况

  • 方式二：三元运算符，适合逻辑比较简单

  • 方式三：与运算符&&，如果条件成立，渲染&&后面的组件；如果条件不成立，则都不渲染

    1. const MyComponent = () => {
    3.   const renderTitle = (key) => {
    4.       if (key > 1) {
    5.           return <span>我是标题1</span>
    6.       }
    7.       return <span>我是标题2</span>
    8.   }
    10.   return (
    11.       <div>
    12.           {
    13.               renderTitle(2)
    14.           }
    15.           {
    16.               2 > 1 ? <span>我会显示出来</span> : <span>我会隐藏</span>
    17.           }
    18.           {
    19.               2 > 1 && <span>我会显示出来</span>
    20.           }
    21.       </div>
    22.   );
    23. };
    24. export default MyComponent;

    10、JSX 列表渲染

    我们通常使用 Javascript 的 map 函数来处理 JSX 数组列表循环渲染；如下

    1. const MyComponent = () => {
    3.   const array = ["1", "2", "3", "4"];
    5.   return (
    6.       <ul>
    7.           {
    8.               array.map(i => <li key={i}>{i}</li>)
    9.           }
    10.       </ul>
    11.   );
    12. };
    13. export default MyComponent;

    注意：在渲染是，我们需要给渲染项添加一个key，不然会报错：warning: Each child in a list should have a unique “key” prop.
    key和React中的diff算法密切相关。后面章节我们会详情学习。

更多精品系列文档及视频：前端大潘与实践