jsx(1)-介紹

什么是jsx

image.png
image.png

JSX其實是嵌入到JavaScript中的一種結(jié)構(gòu)語法；

babel會將<h2></h2>轉(zhuǎn)換成React.createElement，這個React.createElement是瀏覽器可以識別的代碼。
千萬不要給<h2></h2>加雙引號，就變成了字符串。
<h2></h2>是jsx語法
看起來像html in js
react就是all in js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
      const element = <h2>我是h2</h2>;

      const root = ReactDOM.createRoot(document.querySelector("#root"));

      root.render(element);
    </script>
  </body>
</html>

https://babeljs.io/

"use strict";

const element = /*#__PURE__*/ React.createElement("h2", null, "\u6211\u662Fh2");
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(element);

    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          message: "Hello World"
        }
      }

      render() {
        const { message } = this.state

        return (
          <div>
            <h2>{message}</h2>
          </div>
        )
      }
    }

babel

"use strict";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "Hello World"
    };
  }
  render() {
    const { message } = this.state;
    return /*#__PURE__*/ React.createElement(
      "div",
      null,
      /*#__PURE__*/ React.createElement("h2", null, message)
    );
  }
}

為什么react選擇了jsx

html里面的東西和js里面的東西是很難分割的，js要監(jiān)聽html的事件，html要渲染js里面的東西。
所以react就把他們放在一起，用jsx語法實現(xiàn)了html In js這個功能。讓你們不存在綁定來綁定去的關(guān)系，直接放到一起。而這個組合在一起的地方，就是組件。

jsx書寫規(guī)范

  1. JSX的頂層只能有一個根元素，所以我們很多時候會在外層包裹一個div元素（或者使用后面我們學(xué)習(xí)的Fragment）；
  2. 為了方便閱讀，我們通常在jsx的外層包裹一個小括號()，這樣可以方便閱讀，并且jsx可以進(jìn)行換行書寫；
  3. JSX中的標(biāo)簽可以是單標(biāo)簽，也可以是雙標(biāo)簽；
    ? 注意：如果是單標(biāo)簽，必須以/>結(jié)尾；

jsx中插入內(nèi)容

? JSX嵌入變量作為子元素
? 情況一：當(dāng)變量是Number、String、Array類型時，可以直接顯示
? 情況二：當(dāng)變量是null、undefined、Boolean類型時，內(nèi)容為空；(react渲染的時候直接忽略)
? 如果希望可以顯示null、undefined、Boolean，那么需要轉(zhuǎn)成字符串；
? 轉(zhuǎn)換的方式有很多，比如toString方法、和空字符串拼接，String(變量)等方式；
? 情況三：Object對象類型不能作為子元素（not valid as a React child）
? JSX嵌入表達(dá)式
? 運算表達(dá)式
? 三元運算符
? 執(zhí)行一個函數(shù)

邏輯特別復(fù)雜的化，可以寫到外面的函數(shù)里面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>計數(shù)器</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
      // 1.定義App根組件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            movies: ["流浪地球", "星際穿越", "獨行月球"],
          };
        }

        render() {
          // 3.返回jsx的內(nèi)容
          return (
            <div>
              <ul>{this.getMovieEls()}</ul>
            </div>
          );
        }

        getMovieEls() {
          const liEls = this.state.movies.map((movie) => <li>{movie}</li>);
          return liEls;
        }
      }

      // 2.創(chuàng)建root并且渲染App組件
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>

jsx中綁定屬性

? 比如元素都會有title屬性
? 比如img元素會有src屬性
? 比如a元素會有href屬性
? 比如元素可能需要綁定class
? 比如原生使用內(nèi)聯(lián)樣式style

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>計數(shù)器</title>
</head>
<body>
  
  <div id="root"></div>

  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/babel.js"></script>

  <script type="text/babel">
    // 1.定義App根組件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          title: "哈哈哈",
          imgURL: "https://ts1.cn.mm.bing.net/th/id/R-C.95bc299c3f1f0e69b9eb1d0772b14a98?rik=W5QLhXiERW4nLQ&riu=http%3a%2f%2f20178405.s21i.faiusr.com%2f2%2fABUIABACGAAgoeLO-wUo4I3o2gEw8Qs4uAg.jpg&ehk=N7Bxe9nqM08w4evC2kK6yyC%2bxIWTjdd6HgXsQYPbMj0%3d&risl=&pid=ImgRaw&r=0",
          href: "https://www.baidu.com",

          isActive: true,
          objStyle: {color: "red", fontSize: "30px"}
        }
      }

      render() {
        const { title, imgURL, href, isActive, objStyle } = this.state

        // 需求: isActive: true -> active
        // 1.class綁定的寫法一: 字符串的拼接
        const className = `abc cba ${isActive ? 'active': ''}`
        // 2.class綁定的寫法二: 將所有的class放到數(shù)組中
        const classList = ["abc", "cba"]
        if (isActive) classList.push("active")
        // 3.class綁定的寫法三: 第三方庫classnames -> npm install classnames

        return (
          <div>
            { /* 1.基本屬性綁定 */ }
            <h2 title={title}>我是h2元素</h2>
            {/*<img src={imgURL} alt=""/>*/}
            <a href={href}>百度一下</a>

            
            { /* 2.綁定class屬性: 最好使用className */ }
            <h2 className={className}>哈哈哈哈</h2>
            <h2 className={classList.join(" ")}>哈哈哈哈</h2>

            
            { /* 3.綁定style屬性: 綁定對象類型 */ }
            <h2 style={{color: "red", fontSize: "30px"}}>呵呵呵呵</h2>
            <h2 style={objStyle}>呵呵呵呵</h2>
          </div>
        )
      }
    }

    // 2.創(chuàng)建root并且渲染App組件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
  </script>

</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容