【React】JSX基础

一、简介

JSX是JavaScript XML的缩写，它是一种在JavaScript代码中编写类似HTML模板的结构的方法。JSX是React框架中构建用户界面（UI）的核心方式之一。

1.什么是JSX

JSX允许开发者使用类似HTML的声明式模板来构建组件。它结合了HTML的直观性和JavaScript的编程能力，使得开发者能够更高效地构建动态用户界面。

const message = 'this is message';  function App() {   return (     <div>       <h1>this is title</h1>       {message}     </div>   ); } 

二、JSX高频场景

1.JS表达式

在JSX中，可以使用大括号{}来嵌入JavaScript表达式，包括变量、函数调用、方法调用等。

• 使用引号传递字符串。
• 使用JavaScript变量。
• 函数调用和方法调用。
• 使用JavaScript对象。

需要注意的是，某些JavaScript语句，如if、switch、变量声明等，不属于表达式，不能直接在JSX中使用。

const message = 'this is message'; function getAge() { return 18; }  function App() {   return (     <div>       <h1>this is title</h1>       {'this is str'}       {message}       {getAge()}     </div>   ); } 

2.列表渲染

在JSX中，可以使用JavaScript的map方法来实现列表的渲染。

const list = [   { id: 1001, name: 'Vue' },   { id: 1002, name: 'React' },   { id: 1003, name: 'Angular' } ];  function App() {   return (     <div>       <ul>         {list.map(item => <li key={item.id}>{item.name}</li>)}       </ul>     </div>   ); } 

3.条件渲染

在React中，可以使用逻辑与运算符&&或三元表达式?:来实现条件渲染。

const flag = true; const loading = false;  function App() {   return (     <>       {flag && <span>this is span</span>}       {loading ? <span>loading...</span> : <span>this is span</span>}     </>   ); } 

4.复杂条件渲染

对于更复杂的条件渲染，可以结合自定义函数和判断语句来实现。

const type = 1; // 0, 1, or 3  function getArticleJSX() {   if (type === 0) {     return <div>无图模式模版</div>;   } else if (type === 1) {     return <div>单图模式模版</div>;   } else if (type === 3) {     return <div>三图模式模版</div>;   } }  function App() {   return (     <>       {getArticleJSX()}     </>   ); } 

5.结语

JSX是React开发中不可或缺的一部分，它提供了一种强大而灵活的方式来构建用户界面。通过掌握JSX的基础知识和高频使用场景，开发者可以更高效地构建动态且响应式的Web应用。