JSX基础

最新推荐文章于 2023-10-24 22:05:07 发布

江璇Up

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量247

点赞数

分类专栏： React 文章标签： JSX React

本文链接：https://blog.csdn.net/qq_41377858/article/details/102754044

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JSX简介
JSX表达式
JSX属性
JSX与事件
JSX与样式
JSX与Object
JSX与XSS
不用JSX

1、jsx简介

++ JSX 的全称是 JavaScript XML，它是一种 JavaScrip 的语法扩展，也就是一种语法，在 React 中我们不一定要使用 JSX，但使用 JSX 有以下优点：
1. JSX 执行更快，因为它在编译为 JS 代码后进行了优化
2. 它是类型安全的，在编译过程中就能发现错误
3. 使用 JSX 编写模板更简单
++ JSX是在JavaScript内部实现的，解析器对JSX进行解析：遇到<,JSX就作为HTML解析，遇到{，JSX就作为JavaScript解析。如下：

const element = <h1>hello , world </h1>

2、JSX表达式

下面再来看一个例子：

//先创建一个类
class People{
//构造方法
    constructor(name,gender){
        this.name = name;
        this.gender = gender;
    }
//成员方法
    fn(){
        return this.name +" is "+this.gender;
    }
}
//实例化一个对象
var pe = new People('fake','man');
//JSX语法
const ele = <h1>{pe.fn()}</h1>
const ele1 = <h2>{pe.name} is {pe.gender}</h2>
const eles= <div>{ele}{ele1}</div>
//把整个JSX写的DOM渲染到index上去
ReactDOM.render(eles,document.getElementById('root'));

此时，index.html内容如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

++ 在执行ReactDOM.render(eles,document.getElementById('root'));的时候就会主动去找eles变量，然后找到；

3、JSX属性

先看例子：

const user = {
    url:'url',
    name:'name'
}
const element = <div className="container"></div>;
const element1 = <img src={user.url} />;

++ 在 JSX 中可以为标签添加属性，但有些地方需要注意，比如在 HTML 标签中，元素的类关键字为 class ,而在 JSX 中，className 替代了class;如果你是用单标签，则需要以 /> 结尾，如标签。

4、JSX与事件绑定

++ JSX 绑定事件与原生 HTML 差别并不是很大，唯一的却别就是 JSX 采用驼峰(camelCase)命名法来描述事件的名称

<button onClick={this.checkSubmit.bind(this)}>Submit</button>

在这里插一句，React 模拟事件系统。React 不会把事件绑定到每一个具体元素上，而是采用事件代理模式：在根节点上为每种事件添加唯一的 Listener，然后通过触发事件的 target 找到真正的触发元素。

5、JSX与样式

++ 在原生 HTML 中，我们使用的是字符串来为 style 添加内容，在 JSX 中，我们需要使用对象

<div style={{color:'#AAAAAA',width:'100px',fontSize:'15px'}}>Hello</div>

//or

var style = {
    color:'#AAAAAA',
    width:'100px',
    fontSize:'15px'
}
var element = <div style={style}>Hello</div>;

使用了 js 对象的方式来完成在使用 JSX 时为元素添加 style。除了字符串变为对象，在属性名的使用上也产生了变化，JSX 使用驼峰命名，例如：font-size 变为 fontSize,background-color变为backgroundColor等，它们和标准的 JavaScript 操作 DOM 样式的 API 是一致的。

6、JSX与Objects

先看下代码

const element = <div className="container">Hello world!</div>;

++ 很简单的 JSX 代码对吗？让我们提取其中使用 JSX 语法的部分

。
这段代码在经过 babel 编译后会变成如下代码的形式：

React.createElement(
    "div", 
    {className: "container"}, 
    "Hello world!"
);

单标签会被编译成什么样子：

<img src="url" />
React.createElement(
    "img", 
    {src: "url"},
    null
);

Babel 是一个 JavaScript 编译器，单页面内引入 js 代码时，使用的标签是： ,这里的 type 是 babel。Babel 可以将 ES6 转码为 ES5，这意味着使用 Babel，我们将可以在版本很低的浏览器上使用 ES6 语法。

7、JSX与XSS

++ 以往在搭建网页的时候通常要对用户输入的值进行一定的过滤操作，以防止XSS攻击，在React中，我们完全不必担心这个问题，JSX语法已经隔离了这个问题；

const name = response.user.name;
//我们可以直接使用得到的值
const element = <h1>{name}</h1>

之所以可以直接使用得到的值是因为ReactDOM在渲染之前会默认的过滤所有的传入的值，{}中的内容被渲染成为字符串，，因此能够有效的防止XSS。

8、不适用JSX

++ 在这给出一个使用JSX的案例

class Test extends React.Component{
    render(){
        return <div> Hello {this.props.name}</div>
    }
}

ReactDOM.render(
    <Test name={'shiyanlou'}></Test>,
    document.getElementById('root')
);

江璇Up

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSX基础

JSX简介JSX表达式JSX属性JSX与事件JSX与样式JSX与ObjectJSX与XSS不用JSX1、jsx简介++ JSX 的全称是 JavaScript XML，它是一种 JavaScrip 的语法扩展，也就是一种语法，在 React 中我们不一定要使用 JSX，但使用 JSX 有以下优点：1. JSX 执行更快，因为它在编译为 JS 代码后进行了优化2. 它是类...
复制链接

扫一扫

专栏目录