欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React JSX基礎(chǔ)語法教程示例

 更新時間：2023年09月15日 14:20:15   作者：羽旋杯水  
這篇文章主要為大家介紹了React JSX基礎(chǔ)語法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

1、什么是 JSX

JSX 是 JavaScript 的一種語法擴(kuò)展?？梢越M裝 UI 界面，同時可以和 JavaScript 語法配合使用。

2、為什么使用 JSX

  • 使用熟悉的語法定義 HTML 元素，提供更加語義化的標(biāo)簽，使用 JSX 編寫模板更簡單快速
  • 更加直觀：JSX 讓組件更加簡單、明了、直觀
  • 抽象了 React 元素的創(chuàng)建過程，使得編寫組件變得更加簡單

舉例說明如下：

// react17版本之前
const children1 = React.createElement("li", null, "第一個組件內(nèi)容！");
const children2 = React.createElement("li", null, "第二個組件內(nèi)容！");
const root = React.createElement(
  "ul",
  { className: "list" },
  children1,
  children2
);
// react17版本之后
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const root = _jsxs("ul", {
  className: "list",
  children: [
    _jsx("li", {
      children: "Hello",
    }),
    _jsx("li", {
      children: "World",
    }),
  ],
});

JSX 等價如下：

const root = (
  <ul className="list">
    <li>Hello</li>
    <li>World</li>
  </ul>
);

顯然 JSX 寫法更便于頁面的編寫與維護(hù)，且簡單、直觀。

3、JSX 書寫規(guī)范

  • JSX 的最外層只能有一個根元素，可以使用 div 、span 等標(biāo)簽
  • 正常情況下，我可以在最外層包裹一個小括號（），方便我們更好的格式化代碼
  • JSX 中的標(biāo)簽可以是單標(biāo)簽，也可以是雙標(biāo)簽；注意：如果是單標(biāo)簽，必須以/>結(jié)尾
  • 在使用變量時，我們可以將其放在一個大括號中，大括號內(nèi)可以放置任何有效的 JavaScript 表達(dá)式

代碼示例如下：

const root = (
  <div className="list">
    <div>第一個組件內(nèi)容！</div>
    <img src="xxx.jpg" />
    {1 === 1 && <div>第二個組件內(nèi)容！</div>}
  </div>
);

4、JSX 注釋

通常有以下三種注釋

<ul className="list">
  {/* 1、單行注釋 */}
  <li>第一個組件內(nèi)容！</li> // 2、行尾注釋
  <li>第二個組件內(nèi)容！</li>
  {/*
        3、多行注釋
        1
        2
        3
        */}
</ul>

5、JSX 嵌入變量

變量在 JSX 使用，需要用大括號 { } 包裹；注意：使用的變量需要提前定義。如下。

const MyComponent = () => {
  const text = "Hello World！";
  return <div>{text}</div>;
};
export default MyComponent;

6、JSX 嵌入表達(dá)式

  • 運算符表達(dá)式
  • 三元表達(dá)式
  • 函數(shù)調(diào)用
const MyComponent = () => {
  const isFinish = true;
  const calc = () => {
    const a = 1;
    const b = 2;
    return a + b;
  };
  return (
    <div>
      {/*1.運算符表達(dá)式*/}
      <span>2 + 3 的和為：{2 + 3}</span>
      {/*2.三元表達(dá)式*/}
      <span>家庭作業(yè)是否完成：{isFinish ? "是" : "否"}</span>
      {/*3.進(jìn)行函數(shù)調(diào)用*/}
      <span>{calc()}</span>
    </div>
  );
};
export default MyComponent;

7、JSX 綁定屬性

注意：在給元素綁定 style 時，外層的大括號是表示可傳入變量或者表達(dá)式。而內(nèi)部的大括號是一個對象，它里面是鍵值對，表示元素的樣式屬性及屬性值。另外，當(dāng)屬性是由多個單詞組成的時候，需要用駝峰命名法來表示，例如：fontSize

const MyComponent = () => {
  const title = "我是標(biāo)題的全部內(nèi)容！";
  const url = "https://www.baidu.com";
  const className = "span";
  return (
    <div>
      {/* 1、綁定普通屬性 */}
      <h2 title={title}>我是標(biāo)題...</h2>
      <a href={url}>百度一下</a>
      {/* 2.綁定class */}
      <span className={className}>我是span標(biāo)簽</span>
      <span className={["tag", "span"].join(" ")}>我是span標(biāo)簽2</span>
      {/* 3.綁定style */}
      <span style={{ color: "red", fontSize: 16 }}>我的字體顏色是紅色</span>
    </div>
  );
};
export default MyComponent;

8、JSX 綁定事件

可以看出 React 元素的事件處理和 DOM 元素的很相似，但存在一些語法上的差異：

  • React 的事件采用駝峰式命名，而不是純小寫的方式
  • 使用 JSX 語法時，需要傳入一個函數(shù)作為事件處理函數(shù)，而不是一個字符串
  • 使用函數(shù)時不能加括號，不然會直接執(zhí)行
  • 如果函數(shù)過于簡單，可在 JSX 中直接編寫函數(shù)內(nèi)容
const MyComponent = () => {
  const onClick = () => {
    window.alert("您點擊了按鈕1");
  };
  return (
    <div>
      <button onClick={onClick}>按鈕1</button>
      <button
        onClick={() => {
          window.alert("您點擊了按鈕2");
        }}
      >
        按鈕2
      </button>
    </div>
  );
};
export default MyComponent;

9、JSX 條件渲染

常見的條件渲染的方式有以下三種：

  • 方式一：條件判斷語句，適合邏輯較多的情況
  • 方式二：三元運算符，適合邏輯比較簡單
  • 方式三：與運算符&&，如果條件成立，渲染&&后面的組件；如果條件不成立，則都不渲染
const MyComponent = () => {
  const renderTitle = (key) => {
    if (key > 1) {
      return <span>我是標(biāo)題1</span>;
    }
    return <span>我是標(biāo)題2</span>;
  };
  return (
    <div>
      {renderTitle(2)}
      {2 > 1 ? <span>我會顯示出來</span> : <span>我會隱藏</span>}
      {2 > 1 && <span>我會顯示出來</span>}
    </div>
  );
};
export default MyComponent;

10、JSX 列表渲染

我們通常使用 Javascript 的 map 函數(shù)來處理 JSX 數(shù)組列表循環(huán)渲染；如下

const MyComponent = () => {
  const array = ["1", "2", "3", "4"];
  return (
    <ul>
      {array.map((i) => (
        <li key={i}>{i}</li>
      ))}
    </ul>
  );
};
export default MyComponent;

注意：在渲染是，我們需要給渲染項添加一個 key，不然會報錯：warning: Each child in a list should have a unique "key" prop.

key 和 React 中的 diff 算法密切相關(guān)。

以上就是React JSX基礎(chǔ)語法教程示例的詳細(xì)內(nèi)容，更多關(guān)于React JSX基礎(chǔ)語法的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • 探究react-native 源碼的圖片緩存問題

    探究react-native 源碼的圖片緩存問題

    本篇文章主要介紹了探究react-native 源碼的圖片緩存問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-08-08
  • TypeScript在React項目中的使用實踐總結(jié)

    TypeScript在React項目中的使用實踐總結(jié)

    這篇文章主要介紹了TypeScript在React項目中的使用總結(jié),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-04-04
  • react-native 實現(xiàn)購物車滑動刪除效果的示例代碼

    react-native 實現(xiàn)購物車滑動刪除效果的示例代碼

    這篇文章主要介紹了react-native 實現(xiàn)購物車滑動刪除效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • 一文詳解React中如何實現(xiàn)組件懶加載

    一文詳解React中如何實現(xiàn)組件懶加載

    懶加載是一種優(yōu)化技術(shù),旨在延遲加載不必要的資源,直到它們真正需要時再進(jìn)行加載,那么React的懶加載是如何實現(xiàn)的呢,下面小編就來和大家詳細(xì)講講吧
    2025-03-03
  • React實現(xiàn)一個支持動態(tài)插槽的Layout組件

    React實現(xiàn)一個支持動態(tài)插槽的Layout組件

    這篇文章主要為大家詳細(xì)介紹了如何使用React實現(xiàn)一個支持動態(tài)注冊內(nèi)容的插槽組件,文中的示例代碼簡潔易懂,有需要的小伙伴可以了解一下
    2025-02-02
  • React 條件渲染最佳實踐小結(jié)(7種)

    React 條件渲染最佳實踐小結(jié)(7種)

    這篇文章主要介紹了React 條件渲染最佳實踐小結(jié)(7種)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • React 全面解析excel文件

    React 全面解析excel文件

    這篇文章主要介紹了React 全面解析excel文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 淺談React原生APP更新

    淺談React原生APP更新

    當(dāng)一個APP在運行的時候, 開發(fā)者想要將自己的代碼更新到用戶的手機(jī)上時, 一般都有兩種方案, 一是熱更新, 二就是APP更新.熱更新暫且不說,這篇文章就講講 APP 如何更新。
    2021-06-06
  • React根據(jù)配置生成路由的示例代碼

    React根據(jù)配置生成路由的示例代碼

    React路由看似只能由Route組件包裹組件的結(jié)構(gòu)來構(gòu)成,但是其實也可以通過編寫路由數(shù)組配置然后通過數(shù)組循環(huán)來生成Route組件包裹組件的結(jié)構(gòu),所以本文給大家介紹了React根據(jù)配置生成路由的方法,需要的朋友可以參考下
    2024-11-11
  • React diff算法原理詳細(xì)分析

    React diff算法原理詳細(xì)分析

    經(jīng)典的diff算法中，將一棵樹轉(zhuǎn)為另一棵樹的最低時間復(fù)雜度為 O(n^3)，其中n為樹種節(jié)點的個數(shù)。假如采用這種diff算法，一個應(yīng)用有1000個節(jié)點的情況下，需要比較十億次才能將dom樹更新完成，顯然這個性能是無法讓人接受的
    2022-11-11

最新評論