React:JSX介绍和如何使用

最新推荐文章于 2024-12-24 23:29:18 发布

原创最新推荐文章于 2024-12-24 23:29:18 发布 · 618 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React #Jsx

web前端专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨JSX语法在React中的应用，讲解JSX如何安全地嵌入用户输入，防止注入攻击。同时，介绍了JSX如何转换为React元素，以及如何通过Babel启用JSX语法，包括必要的插件安装和配置。

1.JSX介绍

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

2.防注入攻击

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

const title = response.potentiallyMaliciousInput;
// 要接收到的可能含有危险内容的字符串放入大括号中，这是比较安全的做法
const element = <h1>{title}</h1>;

3.表示对象

Babel转译器会把JSX转换成一个名为React.createElement()的方法调用。
下面两种代码的作用是完全相同的：

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

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

React.createElement()这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }
};

这样的对象被称为“React 元素”。它代表所有显示在屏幕上的东西。React通过读取这些对象来构建DOM并保持数据内容一致。

4.如何启用 jsx 语法

安装 babel 插件

全部安装   
	cnpm i babel-core babel-loader babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D 


安装能够识别转换jsx语法的包 babel-preset-react
	运行cnpm i babel-preset-react -D

依赖包说明

	babel-core
	把 js 代码分析成 ast (抽象语法树, 是源代码的抽象语法结构的树状表现形式)，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，再通过语法转换器分析其语法后转为低版本 js。

    babel-preset-*
    babel-plugin-* 代表了一系列的转码插件有了 babel-plugin 系列，可以按需配置自己想要的特性，若是想搭个 es6 环境，一个个地配置各个插件，我猜你会疯掉。babel-preset 系列就可以满足我们的需求，babel-preset 系列打包了一组插件，类似于餐厅的套餐。如 babel-preset-es2015 打包了 es6 的特性，babel-preset-stage-0 打包处于 strawman 阶段的语法
   
    babel-runtime
    babel-runtime 在代码中中直接引入 helper 函数，意味着不能共享，造成最终打包出来的文件里有很多重复的 helper 代码。所以，babel 又开发了 babel-plugin-transform-runtime，这个模块会将我们的代码重写，如将 Promise 重写成 _Promise（只是打比方），然后引入_Promise helper 函数。这样就避免了重复打包代码和手动引入模块的痛苦。

添加 .babelrc 配置文件

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

添加babel-loader配置项：

module: { //要打包的第三方模块
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}