react之了解jsx

JSX(JavaScript XML)是React中的一种语法扩展,它允许在JavaScript代码中直接编写类似HTML的代码,使得组件的构建和维护变得更加直观和高效。以下是对JSX的详细解析:

一、JSX的基本概念

  1. 定义:JSX是一种JavaScript的语法扩展,它让我们可以在JavaScript中编写类似HTML的代码。这些代码在编译时会被转换为JavaScript对象。

  2. 用途:React主要使用JSX来描述用户界面。虽然React并不强制要求使用JSX,但它是React开发中的核心概念之一。

  3. 特性

    • JSX的语法与HTML非常相似,但存在一些差异。例如,在JSX中,所有的标签必须闭合,自闭合标签需要添加斜杠。
    • JSX中的属性名采用camelCase(小驼峰)命名,而不是HTML中的kebab-case(短横线命名)。例如,class变成了className,for变成了htmlFor。
    • JSX允许在标签内部使用大括号{}来嵌入JavaScript表达式。

二、JSX的使用

1、创建React元素:使用JSX语法可以方便地创建React元素。例如:

javascript 复制代码
const element = <h1>Hello, JSX!</h1>;

2、渲染React元素:使用ReactDOM.render()方法可以将React元素渲染到页面中。例如:

javascript 复制代码
ReactDOM.render(element, document.getElementById('root'));
复制代码
在React 18及更高版本中,可以使用ReactDOM.createRoot()方法进行渲染:
javascript 复制代码
ReactDOM.createRoot(document.getElementById('root')).render(element);

3、嵌入JavaScript表达式:在JSX中,可以使用大括号{}来嵌入JavaScript表达式。这些表达式会被计算并插入到HTML中。例如:

javascript 复制代码
const name = 'React';
const element = <h1>Hello, {name}!</h1>;

4、条件渲染:可以使用JavaScript的条件操作符(如if/else、三元运算符、逻辑与运算符)来实现条件渲染。例如:

javascript 复制代码
const isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;

或者:

javascript 复制代码
const unreadMessages = ['React', 'Re: React', 'Re:Re: React'];
const element = (
  <div>
    <h1>Hello!</h1>
    {unreadMessages.length > 0 && <h2>You have {unreadMessages.length} unread messages.</h2>}
  </div>
);
复制代码
5、列表渲染:可以使用数组的map()方法来渲染列表。在渲染列表时,应该为每个列表项添加一个唯一的key属性。例如:
javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>);
const element = <ul>{listItems}</ul>;
复制代码
6、样式处理

行内样式:可以使用style属性来添加行内样式。样式值应该是一个对象,属性名采用camelCase。例如:
javascript 复制代码
const divStyle = { color: 'blue', backgroundColor: 'lightgray' };
const element = <div style={divStyle}>Styled div</div>;
复制代码
类名:可以使用className属性来添加类名。这与HTML中的class属性类似,但命名方式需要改为camelCase。例如:
javascript 复制代码
const element = <div className="my-class">My Div</div>;

三、的注意事项

1、必须包含在单个父元素内:JSX表达式必须有一个父元素包裹。如果要返回多个元素,可以使用<div>或者React提供的<React.Fragment>来包裹。

2、JSX中的注释:在JSX中添加注释需要使用大括号和JavaScript注释语法。例如:

javascript 复制代码
const element = (
  <div>
    {/* 这是一个注释 */}
    <h1>Hello, world!</h1>
  </div>
);

3、避免(xss)注入攻击:React会自动对嵌入在JSX中的所有值进行转义,防止注入攻击。这意味着无法通过JSX插入恶意代码。例如:

javascript 复制代码
const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;
复制代码
在上述代码中,即使title包含恶意代码,React也会将其转义为字符串,从而确保应用的安全。

四、JSX​​​​​​​的编译

Babel转译器会把JSX转换成一个名为React.createElement的方法调用。例如:

javascript 复制代码
const element = <h1 className="greeting">Hello, world!</h1>;

会被转换为:

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

这个方法首先会进行一些避免bug的检查,之后会返回一个对象,这个对象被称为"React元素"。它代表所有显示在屏幕上的东西。React通过读取这些对象来构建DOM并保持数据内容一致。

相关推荐
雪碧聊技术24 分钟前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan28 分钟前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
会发光的猪。1 小时前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒1 小时前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun1 小时前
react的import 导入语句中的特殊符号
前端·react.js
前端青山1 小时前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
励志前端小黑哥2 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟2 小时前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特3 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts