react之了解jsx

简介: react之了解jsx

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

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

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

特性:

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

const element =

Hello, JSX!

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

ReactDOM.render(element, document.getElementById('root'));
在React 18及更高版本中,可以使用ReactDOM.createRoot()方法进行渲染:
ReactDOM.createRoot(document.getElementById('root')).render(element);
3、嵌入JavaScript表达式:在JSX中,可以使用大括号{}来嵌入JavaScript表达式。这些表达式会被计算并插入到HTML中。例如:

const name = 'React';
const element =

Hello, {name}!

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

const isLoggedIn = true;
const element = isLoggedIn ?

Welcome back!

:

Please sign up.

;
或者:

const unreadMessages = ['React', 'Re: React', 'Re:Re: React'];
const element = (


Hello!


{unreadMessages.length > 0 &&

You have {unreadMessages.length} unread messages.

}

);
5、列表渲染:可以使用数组的map()方法来渲染列表。在渲染列表时,应该为每个列表项添加一个唯一的key属性。例如:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  • {number}
  • );
    const element =
    • {listItems}
    ;
    6、样式处理

    行内样式:可以使用style属性来添加行内样式。样式值应该是一个对象,属性名采用camelCase。例如:
    const divStyle = { color: 'blue', backgroundColor: 'lightgray' };
    const element =

    Styled div
    ;
    类名:可以使用className属性来添加类名。这与HTML中的class属性类似,但命名方式需要改为camelCase。例如:
    const element =
    My Div
    ;
    三、的注意事项
    1、必须包含在单个父元素内:JSX表达式必须有一个父元素包裹。如果要返回多个元素,可以使用
    或者React提供的来包裹。

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

    const element = (


    {/ 这是一个注释 /}

    Hello, world!



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

    const title = response.potentiallyMaliciousInput;
    const element =

    {title}

    ;
    在上述代码中,即使title包含恶意代码,React也会将其转义为字符串,从而确保应用的安全。
    四、JSX​​​​​​​的编译
    Babel转译器会把JSX转换成一个名为React.createElement的方法调用。例如:

    const element =

    Hello, world!

    ;
    会被转换为:

    const element = React.createElement(
    'h1',
    { className: 'greeting' },
    'Hello, world!'
    );
    这个方法首先会进行一些避免bug的检查,之后会返回一个对象,这个对象被称为“React元素”。它代表所有显示在屏幕上的东西。React通过读取这些对象来构建DOM并保持数据内容一致。

    相关文章
    |
    7月前
    |
    前端开发 JavaScript 开发者
    React:JSX语法入门
    React:JSX语法入门
    95 0
    |
    3月前
    |
    前端开发 JavaScript
    学习react基础(3)_setState、state、jsx、使用ref的几种形式
    本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
    75 3
    学习react基础(3)_setState、state、jsx、使用ref的几种形式
    |
    4月前
    |
    XML JavaScript 前端开发
    React Jsx语法入门
    【8月更文挑战第13天】React Jsx语法入门
    46 4
    |
    26天前
    |
    JavaScript 前端开发 容器
    React零基础入门02--JSX语法基础
    React零基础入门02--JSX语法基础
    React零基础入门02--JSX语法基础
    |
    2月前
    |
    XML 前端开发 JavaScript
    React JSX
    React 使用 JSX(一种类似 XML 的 JavaScript 语法扩展)来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如,`<h1>Hello, world!</h1>` 实际上是创建一个 React 元素,通过 `ReactDOM.render()` 渲染到 DOM。注意,JSX 中使用 `className` 替代 HTML 的 `class` 属性。
    |
    26天前
    |
    存储 前端开发 JavaScript
    react之jsx编译原理
    react之jsx编译原理
    |
    2月前
    |
    XML 前端开发 JavaScript
    React JSX
    10月更文挑战第7天
    16 2
    |
    4月前
    |
    前端开发 JavaScript
    React Server Component 使用问题之添加jsx的组件化能力,如何操作
    React Server Component 使用问题之添加jsx的组件化能力,如何操作
    |
    4月前
    |
    前端开发 JavaScript 开发者
    React组件与JSX之间的区别是什么
    【8月更文挑战第9天】 React组件与JSX之间的区别是什么
    68 4
    |
    4月前
    |
    XML 前端开发 JavaScript
    【React新手必看】JSX,让你的代码舞动起来!
    【8月更文挑战第24天】JSX(JavaScript XML)是React开发的核心,作为一种JavaScript语法扩展,它支持在代码中使用类似HTML的标签。JSX并非模板语言,在编译过程中转换为纯JavaScript,使React能高效更新DOM并渲染页面。其优势在于直观性、简洁性和灵活性:简化复杂用户界面构建、减少代码量,并支持HTML标签、React组件及JavaScript变量的表达式插入。基本用法涉及定义组件UI,如创建包含标题和段落的简单组件。
    91 0