React JSX

551 阅读2分钟

概述

我们之前使用React,需要 React.createElement ,创建一个虚拟dom,这样使代码看起来很复杂。能不能像Vue一样简洁呢?

使用JSX。X表示扩展,所以JSX就是JS的扩展版。使用JSX语法就可以把代码变得简洁,同时达到同样的效果。

回忆:Vue有vue-loader -> .vue文件里写<template><script><style>,通过vue-loader编程一个构造选项。

React有JSX,那么是不是用 jsx-loader 就可以了呢?实际上 jsx-loaderbabel-loader 取代了,而 babel-loaderwebpack 内置了。

使用JSX

  • 方法一:CDN(永远不要在生产环境下使用,效率太低(引入+转译))

    • 引入babelmin.js
    • <script>改成<script type="text/babel">
    • babel会自动进行转译,示例
    • 这种方式似乎不支持src
  • 方法二:webpack+babel-loader(新手跳过)

  • 方法三:使用 create-react-app

    最简便的就是使用 create react app 这个工具

    之前我们已经用它创建过一个React项目了,它的用法和@vue/cli类似。先全局安装,然后创建项目,cd 进入项目。使用 yarn start 开发。

我们先写一个React函数组件,App.js

import React from "react";

const App = () => {
  return (
    <div>我是App组件</div>;
    )
};

export default App;

注意这是JS文件,在JS里写html是不合法的。但是这里为什么可以呢?因为 create-react-app 这个工具会自动把JS当成JSX。JSX语法就是App是一个函数,return 一个element。它可以不写 React.createElement() 这么麻烦,可以直接以html标签的形式写。把内容或子元素也是直接包在里边。

所以这个 <div> 就相当于 React.createElement() ,所以要在组件里 import React 。如果不这样做就会报错。

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));

然后在index.js里引入App组件,使用ReactDOM 渲染,这里可以调用函数App(),但是我们更经常以组件的形式渲染,写成<App />

使用JSX的注意事项

  1. className 如果要写class属性,要写成className<div className="red"></div>因为它会被转译成React.createElement('div',{className:'red'})

  2. 插入变量和函数 都要用{}包起来,标签里的所有JS代码都要用{}包起来。

    如:{n} 表示变量n; 如果想表示一个对象,也要用{}把对象包起来,如{{name:'li'}}

  3. 组件里,习惯在return 后加一个(),把东西包在里边。

总结

React里的JSX类似于Vue里的 vue-loadervue-loader 可以做到把.vue文件里的三个标签变成构造选项。

JSX也可以通过直接写标签的形式,等同于 React.createElement()JSX-loader 被集成在了 babel-loader 里,它又被 webpack 内置了,所以.js文件默认使用JSX语法。