一、簡介

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 3function 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應用。