此账号为华为云开发者社区官方运营账号，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态

本文分享自华为云社区《在 Vue 中如何使用 JSX，就这么简单！【建议收藏】》，作者：纸飞机 。

JSX是什么

JSX 是一种Javascript 的语法扩展，JSX=Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。（个人建议灵活度强的部分组件可以用JSX来代替，整个项目JSX属实没必要）

XML学习地址（学与不学可随意，了解就ok）：https://www.w3school.com.cn/xml/index.asp用template的弊端：https://www.mk2048.com/blog/blog_h1c2c22ihihaa.html

为什么要在 Vue 中使用 JSX

有时候，我们使用渲染函数（render function）来抽象组件，渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的，所以只需要有个了解。

渲染函数：https://cn.vuejs.org/v2/guide/render-function.html#%E5%9F%BA%E7%A1%80

createElement(
 'anchored-heading', {
 props: {
  level: 1
 }
 }, [
 createElement('span', 'Hello'),
 ' world!'
 ]
)

其对应的模板是下面：

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

你看这写起来多费劲，这个时候就派上 JSX 上场了。在 Vue 中使用 JSX，需要使用Babel 插件，它可以让我们回到更接近于模板的语法上，接下来就让我们一起开始在 Vue 中写 JSX 吧。

创建项目并配置Babel

vue create vue-jsx
# 选择vue2的

安装依赖：

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# or
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置.babelrc(babel.config.js) ：

module.exports={
 presets: [
 '@vue/cli-plugin-babel/preset',
 ['@vue/babel-preset-jsx',
  {
  'injectH': false
  }]
 ]
}

配置后我们启动项目：

yarn serve

demo结构图：

配置了babel.config.js后，我们把App.vue引入的HelloWorld.vue改为HelloWorld.js，并且删除HelloWorld.js中关于template和style,以及script标签。

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}

JSX基础用法

这里展示在 Vue 中书写一些基础内容。

纯文本、动态内容、标签使用、自定义组件、样式和class

import myComponent from './myComponent'
import './HelloWorld.css'

// 创建一个组件button
const ButtonCounter={
  name: "button-counter",
  props: ["count"],
  methods: {
    onClick() {
      this.$emit("change", this.count + 1);
    }
  },
  render() {
    return (
      <button onClick={this.onClick}>数量 {this.count}+</button>
    );
  }
};
export default {
  name: 'HelloWorld',
  components: {
    myComponent 
  },
  data () {
    return {
      text:'hello 纸没了飞机',
      inputText:'我吃了',
      count: 0
    }
  },
  props: {
    msg: String
  },
  watch: {},
  methods: {
    onChange(val) {
      this.count=val;
      alert(this.count)
    }
  },
  render() {
  // const {text,inputText,count}=this //通过解构，下方return片段中就不需要this
    return (
    <div>
     <h3>内容</h3>
     {/* 纯文本 */}
     <p>hello, I am Gopal</p>
     {/* 动态内容 */}
     <p>{ this.text }</p>
     <p>hello { this.msg }</p>
     {/* 输入框 */}
     <input/>
     {/* 自定义组件 */}
     <myComponent/>
     <ButtonCounter
        style={{ marginTop: "10px" }}
        count={this.count}
        type="button"
        onChange={this.onChange}
      />
    </div>
    );
   }
}

题外话：创建组件那里大家可以多学学const 创建的ButtonCounter组件的那种方式。在React中也是经常会这么创建的。

这么看的话和在template里写没有多大区别，标签该是啥还是啥没有变化。那么这么一想的话，style呢，class呢？接下来就是style和class样式的写法(包括动态样式)

我们先给h3绑定一个class为colorRed：

<h3 class="colorRed">内容</h3>

审查元素发现直接写class绑定是可以的：

那么class的样式怎么写呢？毕竟js文件里写<style></style>貌似是不行的！

1、全局样式

App.vue

<style>
.colorRed{
  color: red;
}
</style>

2、引入一个css文件或者配合style-loader引入一个less、sass、stylus文件

注意：都需要安装配置对应的loader，既然都是JSX了，那我们用stylus来讲解下，相信less、sass大家都会了。stylus是一个省略了{}，靠缩紧来识别的css编译器。（不想用stylus可跳过，样式这块可随意）

yarn add global stylus
yarn add --dev stylus stylus-loader

各种style安装见：https://www.cnblogs.com/jimc/p/10265198.html

安装完成后新建HelloWorld.styl，然后引入。

stylus的使用：https://www.jianshu.com/p/5fb15984f22d

stylus官网：https://stylus.zcopy.site/

控制台stylus报错见：https://blog.csdn.net/csdn_zhoushengnan/article/details/109448369

vscode编辑期报错：安装编辑器stylus语法插件，并重启

效果：

行内样式style：

<p style="color:blue">hello, I am Gopal</p>

动态绑定class和style

<p style={this.isGreen?'color:green':''}>{ this.text }</p>
<p class={this.isYellow?'colorYellow':''}>hello { this.msg }</p>
<p style={this.isRed?colorRed:''}>红色的文字</p>

属性绑定和普通HTML一样的

毕竟class和style可都是html的属性，这点相信大家都知道的。

<input placeholder="我是placeholder"  />
<input placeholder={placeholderText}  />
{/* 解构N个属性，要啥放啥 */}
<div {...attrObj}  />

效果：

常用指令

template常用指令：v-html| v-text、v-if、v-for、v-modal等。template的指令在JSX是无法使用的，故需要一些写法，请看下面。

我新建个instructions.js用来示范指令这块。在App.vue中引入。

v-html| v-text

在 JSX 里面，如果要设置 dom 元素的 innerHTML，就用到 domProps。

render() {
    const { htmlCode }=this
    return (
        <div>
            <div domPropsInnerHTML={htmlCode}></div>
        </div>
    );
   }

虽然v-text有domPropsInnerText，但没有用的必要。

v-if

分简单的和复杂的。

简单：

render() {
    let bool=false
    return (
        <div>
            { bool ? <button>按钮1</button> : <button>按钮2</button>}
        </div>
    );
   }

复杂：

render() {
  let num=3
  if(num===1){ return( <button>按钮1</button> ) }
  if(num===2){ return( <button>按钮2</button> ) }
  if(num===3){ return( <button>按钮3</button> ) }
}

v-for

就使用 map 方法来实现，在react中也是如此。

render(h) {
  var list=[1,2,3]
  return( 
    <div>
      { list.map(item=> <button>按钮{item}</button>) }
    </div>
  )
}

v-modal

注意：新版 vue-cli4 中，已经默认集成了 JSX 语法对 v-model 的支持，可以直接使用

<inputv-model={this.value}>

如果你的项目比较老，也可以安装插件babel-plugin-jsx-v-model 来进行支持

我可是cli4，我来验证下：

验证结果：（通过）

当然以上两种方式你都不想搞，你也可以手动支持，这就涉及到监听事件了，请向下看。

监听事件及事件修饰符

监听事件想到用 onChange, onClick等。需要注意的是，传参数不能使用 onClick={this.removePhone(params)}，这样子会每次 render 的时候都会自动执行一次方法应该使用 bind，或者箭头函数来传参

methods: {
    handleClick(val){
        alert(val)
    }
  },
<button type="button" onClick={this.handleClick.bind(this, 11)}>点击bind</button>
<button type="button" onClick={()=> this.handleClick(11)}>点击箭头函数</button>

上面提到的用过监听事件来实现v-modal

<input type="text" value={this.text} onInput={this.input}/>
methods: {
    input(e){
        this.text=e.target.value
    }
  }

除此之外，还可以使用对象的方式去监听事件：

render() {
  return (
    <input
      value={this.content}
      on={{
        focus: this.$_handleFocus,
        input: this.$_handleInput
      }}
      nativeOn={{
        click: this.$_handleClick
      }}
    ></input>
  )
}

其他事件的使用同理都是加on。

事件修饰符

和指令一样，除了个别的之外，大部分的事件修饰符都无法在JSX中使用，这时候你肯定已经习惯了，肯定有替代方案的。

.stop ： 阻止事件冒泡，在JSX中使用event.stopPropagation()来代替

.prevent：阻止默认行为，在JSX中使用event.preventDefault()来代替

.self：只当事件是从侦听器绑定的元素本身触发时才触发回调，使用下面的条件判断进行代替

if (event.target !==event.currentTarget){
  return
}

.enter与keyCode: 在特定键触发时才触发回调

if(event.keyCode===13) {
  // 执行逻辑
}

除了上面这些修饰符之外，尤大大为了照顾我们这群CV仔，还是做了一点优化的,对于.once,.capture,.passive,.capture.once，尤大大提供了前缀语法帮助我们简化代码

render() {
    return (
      <div
        on={{
          // 相当于 :click.capture
          '!click': this.$_handleClick,
          // 相当于 :input.once
          '~input': this.$_handleInput,
          // 相当于 :mousedown.passive
          '&mousedown': this.$_handleMouseDown,
          // 相当于 :mouseup.capture.once
          '~!mouseup': this.$_handleMouseUp
        }}
      ></div>
    )
  }

如果有参数传递给方法，不能直接(参数)，会在页面中立即触发，需要我在下面这种写法：

clickOnce(val) {
  alert(val);
},
<button
    type="button"
    on={{
       '~click': ()=>this.clickOnce('只能点一次'),
    }}
   >
    事件修饰符点击一次
</button>

使用范围（结合第三方ui组件）

不仅仅在 render 函数里面使用 JSX，而且还可以在 methods 里面返回 JSX，然后在 render 函数里面调用这个方法。并且也可以直接使用例如elementui等ui组件。

JSX 还可以直接赋值给变量、例如使用elementui的el-dialog。（您在测试该案例时记得安装elemnt）

methods: {
    $_renderFooter() {
      return (
        <div>
          <el-button>确定</el-button>
          <el-button onClick={ ()=>this.closeDialog() }>取消</el-button>
        </div>
      );
    },
    openDialog(){
        this.visible=true
    },
    closeDialog(){
        this.visible=false  
    }
  },
render() {
    const buttons=this.$_renderFooter();
    return (
      <div>
        <Button onClick={ ()=>this.openDialog() }>打开Dialog</Button>
        <el-dialog visible={this.visible}>
          <div>弹窗内容</div>
          <template slot="footer">{buttons}</template>
        </el-dialog>
      </div>
    );
  }

插槽

插槽就是子组件中提供给父组件使用的一个占位符，插槽分为默认插槽，具名插槽和作用域插槽，下面我依次为您带来每种在JSX中的用法与如何去定义插槽。

默认插槽

使用默认插槽

使用element-ui的Dialog时，弹框内容就使用了默认插槽，在JSX中使用默认插槽的用法与普通插槽的用法基本是一致的，如下代码所示：

render() {
    return (
      <ElDialog title="弹框标题" visible={true}>
        {/*这里就是默认插槽*/}
        <div>这里是弹框内容</div>
      </ElDialog>
    )
  }

自定义默认插槽

在Vue的实例this上面有一个属性slots,这个上面就挂载了一个这个组件内部的所有插槽，使用this.slots,这个上面就挂载了一个这个组件内部的所有插槽，使用this.slots.default就可以将默认插槽加入到组件内部。

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  render() {
    return (
      <div class="custom-dialog" vShow={this.visible}>
        {/**通过this.$slots.default定义默认插槽*/}
        {this.$slots.default}
      </div>
    )
  }
}

使用：

<myComponent visible={true} slot>我是自定义默认插槽</myComponent>

另vShow相当于 v-show，不代表别的也可以这样！

具名插槽

使用具名插槽有时候我们一个组件需要多个插槽，这时候就需要为每一个插槽起一个名字，比如element-ui的弹框可以定义底部按钮区的内容，就是用了名字为footer的插槽。

render() {
    return (
      <ElDialog title="弹框标题" visible={true}>
        <div>这里是弹框内容</div>
        {/** 具名插槽 */}
        <template slot="footer">
          <ElButton>确定</ElButton>
          <ElButton>取消</ElButton>
        </template>
      </ElDialog>
    )
  }

自定义具名插槽

在上节自定义默认插槽时提到了slots，对于默认插槽使用this.slots，对于默认插槽使用this.slots.default，而对于具名插槽，可以使用this.$slots.footer进行自定义。

render() {
    return (
      <div class="custom-dialog" vShow={this.visible}>
        {this.$slots.default}
        {/**自定义具名插槽*/}
        <div class="custom-dialog__foolter">{this.$slots.footer}</div>
      </div>
    )
  }

使用：

<myComponent visible={true}>
      <template slot="footer">
            <ElButton>确定</ElButton>
            <ElButton>取消</ElButton>
      </template>
</myComponent>

作用域插槽

使用作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的，这时候就需要用到作用域插槽,在JSX中，因为没有v-slot指令，所以作用域插槽的使用方式就与模板代码里面的方式有所不同了。比如在element-ui中，我们使用el-table的时候可以自定义表格单元格的内容，这时候就需要用到作用域插槽。

<myComponent1
      visible={this.visible}
      {...{
         scopedSlots: {
           test: ({ user })=> {
           // 这个user就是子组件传递来的数据，同理可这样拿到el-table的row，不过test得是default，不过案例还是我这样
              <div style="color:blue;">快来啊，{user.name}，看看这个作用域插槽</div>
          },
         },
     }}
></myComponent1>

自定义作用域插槽

子组件中通过{this.$scopedSlots.test({ user: {name:‘纸飞机’}})} 指定插槽的名称是 test，并将 user 传递给父组件。父组件在书写子组件标签的时候，通过 scopedSlots 值指定插入的位置是 test，并在回调函数获取到子组件传入的 user 值

注意：作用域插槽是写在子组件标签中的，类似属性。而不是像具名插槽放在标签内部

新建个作用域插槽.js

// 一个为jsx的子组件(玩玩插槽)

export default {
    name: "myComponent",
    data() {
      return {
      };
    },
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      listData: {
        type: Array,
        default: function() {
          return [];
        },
      },
    },
    render() {
      return (
        <div vShow={this.visible}>
          {/**自定义作用域插槽*/}
          <div class="item">
           {this.$scopedSlots.test({
                user: {name:'纸飞机'}
            })}
          </div>
        </div>
      );
    },
  };
  

效果：

函数式组件

函数式组件是一个无状态、无实例的组件，详见官网说明，新建一个 FunctionalComponent.js 文件，内容如下：

// export default ({ props })=> <p>hello {props.message}</p>;

// 或者推荐下方写法

export default {
  functional: true,
  name: "item",
  render(h, context) {
      console.log(context.props)
    return <div style="color:red;font-size:18px;font-weight:bold">{context.props.message}</div>;
  },
};

HelloWorld.js中使用：

<funComponent message="展示下函数式组件"></funComponent>

效果：

代码地址

https://codechina.csdn.net/qq_32442973/vue2-jsx-demo.git

后记

无论你是要用vue2的jsx还是vue3的jsx都没有本质区别，毕竟vue3是向下兼容vue2的；倘若你真的要学vue3的JSX，我建议你学完vue2的再去学；另我不推荐在vue中所有的组件和页面都用JSX，两者需要权衡利弊；同时也不必担心JSX和template的相互嵌套，两者是可以互相嵌套的。

参考：

https://www.cnblogs.com/ainyi/p/13324222.html

https://www.jb51.net/article/205764.htm

https://cn.vuejs.org/v2/guide/render-function.html#事件-amp-按键修饰符

https://www.cnblogs.com/htoooth/p/6973238.html

https://www.jianshu.com/p/84b708c80598

https://cloud.tencent.com/developer/article/1704608

点击关注，第一时间了解华为云新鲜技术~华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云

avaScript 是语言，而 React 是工具。

力争用最简洁的方式让你入门 React，前提是你已了解 JavaScript 和 HTML。

0x01 从 JavaScript 到 React

一些必须要懂的 JavaScript 概念

如果你在学习 React 的同时，也在学习 JavaScript，那么这里罗列了一些必须要懂的 JavaScript 概念，来帮助你更好地学习 React。

• 函数 和 箭头函数
• 对象
• 数组及其常用方法
• 解构赋值
• 模版字符串
• 条件运算符
• JS 模块化和导入导出方法

本文将不会深入讲解关于 JavaScript 方面的知识，你无需非常精通 JavaScript 才能学习 React，但以上的一些概念是最适合初学者掌握的 JavaScript 的重要知识。

当然，你也可以跳过这些基本概念直接进入下面章节的学习，当遇到不理解的问题再回过头来翻阅这里的概念。

渲染 UI

要理解 React 如何工作，首先要搞清楚浏览器是如何解释你的代码并转化成 UI 的。

当用户访问一个网页时，服务器将返回一段 html 代码到浏览器，它可能看起来是这样的：

浏览器阅读了 html 代码，并将它结构化为 DOM。

什么是 DOM

DOM 是一个 html 元素的对象化表达，它是衔接你的代码和 UI 之间的桥梁，它表现为一个父子关系的树形结构。

你可以使用 JavaScript 或 DOM 的内置方法来监听用户事件，操作 DOM 包括，查询、插入、更新、删除界面上特定的元素，DOM 操作不仅允许你定位到特定的元素上，并且允许你修改它的内容及样式。

小问答：你可以通过操作 DOM 来修改页面内容吗？

使用 JavaScript 及 DOM 方法来更新 UI

让我们一起来尝试如何使用 JavaScript 及 DOM 方法来添加一个 h1 标签到你的项目中去。

打开我们的代码编辑软件，然后创建一个新的 index.html 的文件，在文件中加入以下代码：

<!-- index.html -->
<html>
  <body>
    <div></div>
  </body>
</html>

然后给定 div 标签一个特定的 id ，便于后续我们可以定位它。

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>
  </body>
</html>

要在 html 文件中编写 JavaScript 代码，我们需要添加 script 标签

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

现在，我们可以使用 DOM 提供的 getElementById 方法来通过标签的 ID 定位到指定的元素。

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      const app=document.getElementById('app');
    </script>
  </body>
</html>

你可以继续使用 DOM 的一系列方法来创建一个 h1 标签元素，h1 元素中可以包含任何你希望展示的文本。

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      // 定位到 id 为 app 的元素
      const app=document.getElementById('app');

      // 创建一个 h1 元素
      const header=document.createElement('h1');

      // 创建一个文本节点
      const headerContent=document.createTextNode(
        'Develop. Preview. Ship.  ',
      );

      // 将文本节点添加到 h1 元素中去
      header.appendChild(headerContent);

      // 将 h1 元素添加到 id 为 app 的元素中去
      app.appendChild(header);
    </script>
  </body>
</html>

至此，你可以打开浏览器来预览一下目前的成果，不出意外的话，你应该可以看到一行使用 h1 标签的大字，写道：Develop. Preview. Ship.

HTML vs DOM

此时，如果你打开浏览器的代码审查功能，你会注意到在 DOM 中已经包含了刚才创建的 h1 标签，但源代码的 html 中却并没有。换言之，你所创建的 html 代码中与实际展示的内容是不同的。

这是因为 HTML 代码中展示的是初始化的页面内容，而 DOM 展示的是更新后的页面内容，这里尤指你通过 JavaScript 代码对 HTML 所改变后的内容。

使用 JavaScript 来更新 DOM，是非常有用的，但也往往比较繁琐。你写了如下那么多内容，仅仅用来添加一行 h1 标签。如果要编写一个大一些的项目，或者团队开发，就感觉有些杯水车薪了。

<!-- index.html -->
<script type="text/javascript">
  const app=document.getElementById('app');
  const header=document.createElement('h1');
  const headerContent=document.createTextNode('Develop. Preview. Ship.  ');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

以上这个例子中，开发者花了大力气来“指导”计算机该如何做事，但这似乎并不太友好，或者有没有更友好的方式让计算机迅速理解我们希望达到的样子呢？

命令式 vs 声明式编程

以上就是一个很典型的命令式编程，你一步一步的告诉计算机该如何更新用户界面。但对于创建用户界面，更好的方式是使用声明式，因为那样可以大大加快开发效率。相较于编写 DOM 方法，最好有种方法能声明开发者想要展示的内容（本例中就是那个 h1 标签以及它包含的文本内容）。

换句话说就是，命令式编程就像你要吃一个披萨，但你得告诉厨师该如何一步一步做出那个披萨；而声明式编程就是你告诉厨师你要吃什么样的披萨，而无需考虑怎么做。

而 React 正是那个“懂你”的厨师！

React：一个声明式的 UI 库

作为一个 React 开发者，你只需告诉 React 你希望展示什么样的页面，而它会自己找到方法来处理 DOM 并指导它正确地展示出你所要的效果。

小问答：你觉得以下哪句话更像声明式？
A：我要吃一盘菜，它要先放花生，然后放点鸡肉丁，接着炒一下...
B：来份宫保鸡丁

0x02 快速入门 React

要想在项目中使用 React，最简单的方法就是从外部 CDN（如：http://unpkg.com）引入两个 React 的包：

• react：React 核心库
• react-dom：提供用于操作 DOM 特定方法的库

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app=document.getElementById('app');
    </script>
  </body>
</html>

这样就无需使用纯 JavaScript 来直接操作 DOM 了，而是使用来自 react-dom 中的 ReactDOM.render() 方法来告诉 React 在 app 标签中直接渲染 h1 标签及其文本内容。

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app=document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship.  </h1>, app);
    </script>
  </body>
</html>

但当你在浏览器中运行的时候，它会报一个语法错误：

因为代码中的 <h1>Develop. Preview. Ship. </h1&gt; 并不是 JavaScript 代码，而是 JSX。

什么是 JSX

JSX 是一种 JS 的语法扩展，它使得你可以用类 HTML 的方式来描述界面。你无需学习 HTML 和 JavaScript 之外的新的符号和语法等，只需要遵守以下三条规则即可：

• 返回一个单根节点的元素，如：

<!-- 你可以使用 div 标签 -->
<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    className="photo"
  />
  <ul>
    ...
  </ul>
</div>

<!-- 你也可以使用空标签 -->
<>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    className="photo"
  />
  <ul>
    ...
  </ul>
</>

• 关闭所有标签

<!-- 诸如 img 必须自关闭 <img />，而包围类标签必须成对出现 <li></li> -->
<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    className="photo"
   />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

• 使用驼峰命名（camalCase）方式

<!-- 如 stroke-width 必须写成 strokeWidth，而 class 由于是 react 的关键字，因此替换为 className
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

JSX 并不是开箱即用的，浏览器默认情况下是无法解释 JSX 的，所以你需要一个编译器（compiler），诸如 Babel，来将 JSX 代码转换为普通的浏览器能理解的 JavaScript。

在项目中添加 Babel

复制粘贴以下脚本到 index.html 文件中：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

另外，你还需要告诉 Babel 需要转换哪些代码，为需要转换的代码添加类型 type="text/jsx"

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const app=document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship.  </h1>, app);
    </script>
  </body>
</html>

现在可以再次回到浏览器中刷新页面来确认是否能成功展示了。

使用声明式的 React，你只编写了以下代码：

<script type="text/jsx">
  const app=document.getElementById("app")
  ReactDOM.render(<h1>Develop. Preview. Ship.  </h1>, app)
</script>

而命令式代码如此前编写的：

<script type="text/javascript">
  const app=document.getElementById('app');
  const header=document.createElement('h1');
  const headerContent=document.createTextNode('Develop. Preview. Ship.  ');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

相比较后不难发现，你节省了很多重复冗余的工作。

这就是 React，一款富含可重用代码，为你节省时间和提高效率的工具。

目前，你还无需过多关注究竟 React 用了什么神奇的魔法实现这样的功能。当然如果你感兴趣的话，可以参考 React 的官方文档中的 UI Tree 和 render 两个章节。

React 核心概念

在真正上手 React 项目之前，还有三个最重要的 React 核心概念需要理解

• 组件（Components）
• 参数（Props）
• 状态（State）

在后续的章节中我们将逐一学习以上三个核心概念。

0x03 使用组件（Components）来建立界面

一个用户界面可以被分割成更小的部分，我们称之为“组件”。它是自包含、可重用的代码块，你可以把它想象成乐高玩具，独立的砖块可以拼装成更大的组合结构。如果你要更新界面的某一部分，你可以仅更新特定的组件或“砖块”。

模块化让你的代码更具有可维护性，因为你可以轻易地添加、修改、删除特定的组件而无需改动程序的其他部分。React 组件其实就是用 JavaScript 编写的，接下来我们将学习如何编写一个从 JavaScript 原生到 React 的组件。

创建组件

在 React 中，组件就是函数，我们在 script 中插入一个 header 方法：

<script type="text/jsx">
  const app=document.getElementById("app")
  function header() {}
  ReactDOM.render(<h1>Develop. Preview. Ship.  </h1>, app)
</script>

组件函数返回一个界面元素（即我们前面所提到过的单根节点的元素），可以使用 JSX 语法，如：

<script type="text/jsx">
  const app=document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship.  </h1>)
   }

  ReactDOM.render(, app)
</script>

然后将 header 传入 ReactDOM.render 的第一个参数中去：

ReactDOM.render(header, app)

但如果你现在刷新浏览器预览效果的话，将会报错，因为还需要做两件事。

首先，React 组件必须以大写字母开头：

// 首字母大写
function Header() {
  return <h1>Develop. Preview. Ship.  </h1>;
}

ReactDOM.render(Header, app);

其次，你在使用 React 组件时，也需要使用 JSX 的语法格式，将组件名称用 <> 扩起来：

function Header() {
  return <h1>Develop. Preview. Ship.  </h1>;
}
<br/>ReactDOM.render(<Header />, app);

嵌套组件

一个应用程序通常包含多个组件，有的甚至是组件嵌套的组件。例如我们来创建一个 HomePage 组件：

function Header() {
  return <h1>Develop. Preview. Ship.  </h1>;
}

function HomePage() {
  return <div></div>;
}

ReactDOM.render(<Header />, app);

然后将 Header 组件放入 HomePage 组件中：

function Header() {
  return <h1>Develop. Preview. Ship.  </h1>;
}

function HomePage() {
  return (
    <div>
      {/* 嵌套的 Header 组件 */}
      <Header />
    </div>
  );
}

ReactDOM.render(<HomePage />, app);

组件树

你可以继续以这种方式嵌套 React 组件，以形成一个更大的组件。

比如上图中，你的顶层组件是 HomePage，它下面包含了一个 Header，一个 ARTICLE 和一个 FOOTER。然后 HEADER 组件下又包含了它的子组件等等。

这样的模块化使得你可以在项目的许多其他地方重用组件。

0x04 参数（Props）与数据展示

如果你重用 Header 组件，你将显示相同的内容两次。

function Header() {
  return <h1>Develop. Preview. Ship.  </h1>;
}

function HomePage() {
  return (
    <div><br/>      <Header />
      <Header />
    </div>
  );
}

但如果你希望在标题中传入不同的文本，或者你需要从外部源获取数据再进行文本的设置时，该怎么办呢？

普通的 HTML 元素允许你通过设置对应标签的某些重要属性来修改其实际的展示内容，比如修改 <img> 的 src 属性就能修改图片展示，修改 <a> 的 href 就能改变超文本链接的目标地址。

同样的，你可以通过传入某些属性值来改变 React 的组件，这被称为参数（Props）。

与 JavaScript 函数类似，你可以设计一个组件接收一些自定义的参数或者属性来改变组件的行为或展示效果，并且还允许通过父组件传递给子组件。

?? 注意：React 中，数据流是顺着组件数传递的。这被称为单向数据流。

使用参数

在 HomePage 组件中，你可以传入一个自定义的 title 属性给 Header 组件，就如同你传入了一个 HTML 属性一样。

// function Header() {
//   return <h1>Develop. Preview. Ship.  </h1>
// }

function HomePage() {
  return (
    <div>
      <Header title="Hello React" />
    </div>
  );
}

// ReactDOM.render(<HomePage />, app)

然后，Header 作为子组件可以接收这些传入的参数，可在组件函数的第一个入参中获得。

function Header(props) {
  return <h1>Develop. Preview. Ship.  </h1>
}

你可以尝试打印 props 来查看它具体是什么东西。

function Header(props) {
    console.log(props) // { title: "Hello React" }
    return <h1>Hello React</h1>
}

由于 props 是一个 JS 对象，因此你可以使用对象解构来展开获得对象中的具体键值。

function Header({ title }) {
    console.log(title) // "Hello React"
    return <h1>Hello React</h1>
}

现在你就能使用 title 变量来替换 h1 标题中的文本了。

function Header({ title }) {
    console.log(title) // "Hello React"
    return <h1>title</h1>
}

但当你打开浏览器刷新页面时，你会发现页面上展示的是标题文本是 title，而不是 title 变量的值。这是因为 React 不能对纯文本进行解析，这就需要你额外地对文本展示做一些处理。

在 JSX 中使用变量

要在 JSX 中使用你定义的变量，你需要使用花括号 {} ，它允许你在其中编写 JavaScript 表达式

function Header({ title }) {
    console.log(title) // "Hello React"
    return <h1>{ title }</h1>
}

通常，它支持如下几种方式：

• 输出对象属性 { props.title }
• 模板字符串 {`Hello ${title}`}
• 函数返回值 { getTitle() }
• 三元表达式 { title ? title : "Hello" }

这样你就能根据参数输出不同的标题文本了：

function Header({ title }) {
  return <h1>{title ? title : 'Hello React!'}</h1>;
}

function Page() {
  return (
    <div>
      <Header title="Hello JavaScript!" />
      <Header title="Hello World!" />
    </div>
  );
}

通过列表进行迭代

通常我们会有一组数据需要展示，它以列表形式呈现，你可以使用数组方法来操作数据，并生成在样式上统一的不同内容。

例如，在 HomePage 中添加一组名字，然后依次展示它们。

function HomePage() {
  const names=['Mike', 'Grace', 'Margaret'];

  return (
    <div>
      <Header title="Develop. Preview. Ship.  " />
    </div>
  );
}

然后你可以使用 Array 的 map 方法对数据进行迭代输出，并使用箭头函数来将数据映射到每个迭代项目上。

function HomePage() {
  const names=['Mike', 'Grace', 'Margaret'];

  return (
    <div>
      <Header title="Develop. Preview. Ship.  " />
      <ul>
        {names.map((name)=> (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

现在如果你打开浏览器查看，会看到一个关于缺少 key 属性的警告。这是因为 React 需要通过 key 属性来唯一识别数组上的元素来确定最终需要在 DOM 上更新的项目。通常我们会使用 id，但本例子中你可以直接使用 name，因为它们的值也是唯一不同的。

function HomePage() {
  const names=['Mike', 'Grace', 'Margaret'];

  return (
    <div>
      <Header title="Develop. Preview. Ship.  " />
      <ul>
        {names.map((name)=> (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

0x05 使用状态（State）来增加交互性

首先，我们看下 React 是如何通过状态和事件处理来帮助我们增加交互性的。

我们在 HomePage 组件中添加一个“喜欢”按钮：

function HomePage() {
  const names=['Mike', 'Grace', 'Margaret'];

  return (
    <div>
      <Header title="Develop. Preview. Ship.  " />
      <ul>
        {names.map((name)=> (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button>Like</button>
    </div>
  );
}

监听事件

要让按钮在被点击的时候做些什么时，你可以在按钮上添加 onClick 事件属性：

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

在 React 中，属性名称都是驼峰命名式的，onClick 是许多事件属性中的一种，还有一些其他的事件属性，如：输入框会有 onChange ，表单会有 onSubmit 等。

处理事件

你可以定义一个函数来处理以上一些事件，当它被触发的时候。事件处理函数可以在返回语句之前定义，如：

function HomePage() {
  // ...

  function handleClick() {
    console.log("I like it.")
  }

  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  )
}

接着你就可以在 onClick 中调用 handleClick 方法了。

function HomePage() {
  //    ...
  function handleClick() {
    console.log('I like it.');
  }

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

状态和钩子

React 里有一系列钩子函数（Hooks），你可以利用钩子函数在组件中创建状态，你可以把状态理解为在界面上随时间或者行为变化的一些逻辑信息，通常情况下是由用户触发的。

你可以通过状态来存储和增加用户点击喜欢按钮的次数，在这里我们可以使用 React 的 useState 钩子函数。

function HomePage() {
  React.useState();
}

useState 返回一个数组，你可以使用数组解构来使用它。

function HomePage() {
  const []=React.useState();

  // ...
}

该数组的第一个值是状态值，你可以定义为任何变量名称：

function HomePage() {
  const [likes]=React.useState();

  // ...
}

该数组的第二个值是状态修改函数，你可以定义为以 set 为前缀的函数名，如 setLikes。

function HomePage() {
  const [likes, setLikes]=React.useState(); 
  // likes 存储了喜欢被点击的次数；setLikes 则是用来修改该次数的函数

  // ...
}

同时，你可以在定义的时候给出 likes 的初始值

function HomePage() {
  const [likes, setLikes]=React.useState(0);
}

然后你可以尝试查看你设置的初始值是否生效

function HomePage() {
  // ...
  const [likes, setLikes]=React.useState(0);

  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

最后，你可以在每次按钮被点击后调用 setLikes 方法来更新 likes 变量的值。

function HomePage() {
  // ...
  const [likes, setLikes]=React.useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

点击喜欢按钮将会调用 handleClick 方法， 然后调用 setLikes 方法将更新后的新值传入该函数的第一个入参中。这样 likes 变量的值就变成了新值

状态管理

本章节仅对状态做了简单的介绍，举例了 useState 的用法，你可以在后续的学习中了解到更多的状态管理和数据流处理的方法，更多的内容可以参考官网的 添加交互性 和 状态管理 两个章节进行更深入的学习。

小问答：请说出参数（Props）和状态（State）的区别？

0x06 长路漫漫，继续前行

到此为止，你已了解了 React 的三大核心概念：组件、参数和状态。对这些概念的理解越深刻，对今后开发 React 应用就越有帮助。学习的旅程还很漫长，途中若有困惑可以随时回看本文，或阅读以下主题文章进行更深入的学习：

• Render and Commit (reactjs.org)
• Referencing Values with Refs (reactjs.org)
• Managing State (reactjs.org)
• Passing Data Deeply with Context (reactjs.org)
• React APIs (reactjs.org)

React 学习资源

React 的学习资源层出不穷，你可以在互联网上搜索 React 来获取无穷无尽的资源，但在我看来最好的仍是官方提供的《React 文档》，它涵盖了所有你需要学习的主题。

最好的学习方法就是实践。

言

React框架推荐使用的DOM语法格式为JSX语法，属于一种JavaScript扩展，React使用JSX来描述用户界面。我们可以粗略的认为JSX是JavaScript和HTML的结合，但是在实际的使用过程中还有一定的细节区别。本文就带领大家系统的学习JSX语法的格式。

一、JSX语法的基本用法

1、使用变量定义JSX元素

const element=<div>你好，React！</div>;

这里需要注意，上述代码不是JavaScript字符串，所以没有用任何引号引住；也不是HTML代码。而是JSX语法格式。

React应用的最小单位是“元素”，JSX语法格式就是React推荐用来声明元素的。

2、使用变量定义嵌套的JSX元素

对于相互嵌套的JSX元素，JSX语法推荐使用()扩住。

const ulElement=(
  <ul>
    <li>第一名</li>
    <li>第二名</li>
  </ul>
)

使用()扩住嵌套的JSX元素，让格式更加清晰。从实际的操作来看，不书写()也是可以的。

3、在JSX元素中使用变量

在JSX元素中使用变量必须使用{}扩住，变量可以用于JSX元素的内容中，也可以用于JSX元素的HTML属性取值上。

let name='张三';
const strongElement=<strong>你好，{name}</strong>

let url='https://www.baidu.com';
const link=<a href={url}>百度一下</a>

4、在JSX元素中调用函数

对于具有return返回值的函数，JSX元素可以像使用变量一样，利用{}扩住对函数进行调用。

function getSum(a,b){
  return a+b;
}
let a=10,b=20;
const sum=<div>{a}+{b}={getSum(a,b)}</div>

上述几种情况中举的案例元素（element、ulEelement、strongElement、link、sum）都可以直接用在ReactDOM。render()方法的第一个参数中，充当向第二个参数所指的DOM节点中放入的元素。以sum为例，代码如下所示。

ReactDOM.render(
    sum,
    document.querySelector('#app')
);

二、JSX元素的语法规定

JSX元素在书写时还要注意下列语法规定：

• JSX元素必须具备一个唯一的根节点。
• JSX元素中标记的class属性取值必须使用className属性。
• JSX元素中标记的style属性取值必须用两个大括号扩住，即style={{}}。
• JSX代码中标记内部的注释必须用{}扩住，标记外部的注释不能用{}扩住。
• JSX代码中的标记必须成对或者有结尾标识。

请大家仔细阅读下列代码：

const element=(
  /*一个完整的JSX元素：本注释没有在任何标记内部，所以不用{}扩住*/
  <div>       {/*唯一的根节点：本注释在标记内部，必须用{}扩住*/}
    <div className="top">   {/*className属性的使用*/}
      {/*style属性的使用必须是双大括号*/}
      <div style={{width:'1200px',height:'40px',backgroundColor:'#3385ff'}}>
        欢迎学习React框架。
        <img src=”images/01.jpg” />    {/*标记必须有结尾标识*/}
      </div>
    </div>
  </div>
);
ReactDOM.render(
  element,
  document.querySelector('#app')
);

上述代码在浏览器中运行，可以从开发人员工具的Elements选项卡中看到下列如图所示的结构。

从图中可以看得出，id属性取值为app的div和class属性取值为top的div之间，有一个空的div。这是由于为了满足JSX元素必须具备一个唯一的根节点，而设置的最外层的div标记对。为了不让最外层的根节点显示在DOM结构中，React建议使用React.Fragment作为所有JSX元素最外层的根节点。代码改为如下格式。

const element=(
  /*一个完整的JSX元素：本注释没有在任何标记内部，所以不用{}扩住*/
  <React.Fragment>       {/*唯一的根节点：本注释在标记内部，必须用{}扩住*/}
    <div className="top">   {/*className属性的使用*/}
      {/*style属性的使用必须是双大括号*/}
      <div style={{width:'1200px',height:'40px',backgroundColor:'#3385ff'}}>
        欢迎学习React框架。
        <img src=”images/01.jpg” />    {/*标记必须有结尾标识*/}
      </div>
    </div>
  </ React.Fragment >
);

这时再看开发人员工具的Elements选项卡，React.Fragment标记位置是没有任何标记对的。

三、在JSX格式中遍历数组

在JSX格式中遍历数组不能使用for循环，只能使用ES5为数组提供的各种方法。下面的例子展示了用数组的map()方法来遍历数组的功能实现。

例1：实现页面导航条的JSX格式。

let navText=['首页','产品展示','技术展望','视频会议','金牌团队','关于我们'];
let navLink=['index.html','product.html','technology.html','videol.html','team.html','about.html'];
const nav=(
  <React.Fragment>
    <div className="top">
      <div className="topContent">
        <ul>
          {
            navText.map((item,index)=>{
              return <li key={index}><a href={navLink[index]}>{item}</a></li>
            })
          }
        </ul>
      </div>
    </div>
  </React.Fragment>
);

从上述代码中可以看出下列有关JavaScript语言在JSX语法中的规范：

• JavaScript部分在JSX语法中必须使用{}扩住。
• 数组在遍历生成li标记时，必须添加key属性，并设置为数组的索引值。

例2：有一个JSON数组，每个元素有两个属性：isShow和file。其中isShow取值为逻辑值，file取值为表示图片路径的字符串。当isShow取值为true时，file指定的图片要显示在页面中；当isShow取值为false时，file指定的图片不显示在页面中。

let picture=[
  {isShow:true,file:'images/01.jpg'},
  {isShow:true,file:'images/02.jpg'},
  {isShow:false,file:'images/03.jpg'},
  {isShow:true,file:'images/04.jpg'},
  {isShow:true,file:'images/05.jpg'}
];
const img=(
  <React.Fragment>
    <h2>图片欣赏</h2>
    <div className="picture">
      {
        picture.filter((item,index)=>{
          return item.isShow
        }).map((item,index)=>{
          return <img src={item.file} key={index} />
        })
      }
    </div>
  </React.Fragment>
);

上述代码中，使用数组的filter()方法对picture数组进行筛选，筛选条件是isShow取值为true。然后再对筛选出来的数组元素使用map()方法进行遍历，以用来在页面中显示图片。

四、在JSX格式中使用if语句

在JSX格式中是不能直接使用JavaScript的if语句的，我们通过下列五种方式来为大家讲解可行的方法。

例：设置一个变量flag。规定当flag=true时，页面中显示一个类名为box的div标记；当flag=false时，页面中显示一个类名为fox的div标记。

1、使用三元运算符在JSX中实现判定

JavaScript提供的三元运算符（? :）也被称为“三目运算符”。该运算符适合分为两种情况的分支判定。

let flag=true;
const element=(
  <React.Fragment>
    {
      flag?
      <div className="box">
        我是box元素......
      </div>
      :
      <div className="fox">
        我是fox元素
      </div>
  }
  </React.Fragment>
);

2、使用逻辑与运算符的短路原理实现判定

JavaScript提供的逻辑与运算符（&&）的短路原理规定：当&&运算的左侧为false时，右侧不予计算。该运算符适合多分支的判定。

let flag=true;
const element=(
  <React.Fragment>
    {flag && <div className="box">
      我是box元素......
    </div>}
    {!flag && <div className="fox">
      我是fox元素
    </div>}
  </React.Fragment>
);

上述代码中，因为flag变量的取值为true，所以!flag的取值为false，则!flag &&右侧的元素不再计算，也就不会被渲染出来。

3、在JSX格式以外借助变量使用if语句完成判定

既然JSX格式不允许直接使用if语句，那我们就不在JSX格式中使用。我们可以在JSX格式以外的区域使用if语句。

let flag=false;
let target;
if(flag){
  target=(
    <div className="box">
      我是box元素......
    </div>
  )
}else{
  target=(
    <div className="fox">
      我是fox元素
    </div>
  )
}
const element=(
  <React.Fragment>
    {target}
  </React.Fragment>
);

上述代码中定义了一个名为target的变量，通过在JSX格式以外进行if语句的判定，让target变量获得不同的JSX元素，最终在React.Fragment标记对中使用{target}引用了判定后的结果。

4、在JSX格式以外借助函数使用if语句完成判定

我们也可以在JSX格式以外的区域声明一个函数，在函数体总使用if语句进行判定，并最终将需要渲染的JSX格式利用return语句返回。

let flag=true;
function getTarget(){
  if(flag){
    return (
      <div className="box">
        我是box元素......
      </div>
    )
  }else{
    return (
      <div className="fox">
        我是fox元素
      </div>
    )
  }
}
const element=(
  <React.Fragment>
    {getTarget()}
  </React.Fragment>
);

上述代码中定义了一个名为getTarget的函数，该函数内部使用if判定flag变量的值，然后利用return语句将需要的JSX元素返回出去。在React.Fragment标记对中只需要使用{getTarget()}调用该函数即可。

总结

本文是React系列教程的第二篇文章，主要为大家讲解了React框架中JSX语法的书写格式。系统的学会了JSX语法的书写格式，对于编写复杂的React项目有很大的帮助。明天会为大家系统的讲解React组件的使用方法。

关于作者

小海前端，具有18年Web项目开发和前后台培训经验，在前端领域著有较为系统的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发领域都有较为深的造诣。入住?，希望能够更多的结识Web开发领域的同仁，将Web开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。