定義

JSX 是一個基于 JavaScript + XML 的一個擴展語法?？梢允褂胋abel.js在瀏覽器中處理JSX

基礎語法

聲明變量

const element = <h1>Hello, world!</h1>;

jsx 中設置屬性

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
const element = <img src={user.avatarUrl} />;

jsx 中包含多個子元素

const element = (
    <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
    </div>
);

jsx作為表達式 return 返回

function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

調用方法

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}
const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);

jsx 嵌入復雜表達式

function NumberList(props) {
    const numbers = props.numbers;
    return (
        <ul>
            {numbers.map((number) =>
                <ListItem key={number.toString()}
                    value={number} />
            )}
        </ul>
    );
}

和普通模板的區別

JSX

1、 JSX 使用類似于 js 的語法 ，允許你在 js 中寫入 html 標簽
2、 JSX 是通過 Vue 的 createVNode 函數來創建虛擬節點的。這些虛擬節點會被 Vue 的渲染器處理，最終渲染到頁面上。

普通模板

1、普通模板使用 HTML 標記和Vue的特殊指令
2、普通模板會被 Vue 的編譯器解析成虛擬節點，然后再進行渲染。

總的來說，JSX 更加靈活和強大，適合需要更多控制的情況，尤其是在需要動態生成組件或處理復雜邏輯時。普通模板更易于閱讀和理解，適合簡單的應用或團隊中不熟悉 JSX 的開發者?？梢愿鶕椖康男枨蠛蛨F隊的技術棧選擇使用哪種方式。