React（一）react概述、組件、事件-有解無憂

一、React概述

1.腳本方式創建react初始模板

2.react的封裝

二、組件

1.函式方式定義組件

2.函陣列件傳參

3.類方式定義組件

4.類組件傳參

三、事件

一、React概述

React 是一個宣告式，高效且靈活的用于構建用戶界面的 JavaScript 庫，使用 React 可以將一些簡短、獨立的代碼片段組合成復雜的 UI 界面，這些代碼片段被稱作“組件”，

詳細教程可參見官網：
React 官方中文檔案 – 用于構建用戶界面的 JavaScript 庫https://react.docschina.org/

React框架的書寫方式分為兩種，一種是腳本方式（JavaScript標簽引入，練習使用）；一種是react腳手架方式（常用），

1.腳本方式創建react初始模板

為了能夠正常使用react框架進行編程，我們創建好自己的專案之后，需要在頁面中引入兩個CDN鏈接：react庫 和 react-dom庫；

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

對于這兩個遠程地址也可直接在官網下載到本地之后直接用<script src=""></script>引入專案中；如下：

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

除此之外還應注意，React 認為渲染邏輯本質上與其他 UI 邏輯內在耦合，比如，在 UI 中需要系結處理事件、在某些時刻狀態發生變化時需要通知到 UI，以及需要在 UI 中展示準備好的資料，所以在React中使用的是JSX語法，但是瀏覽器不識別JSX，我們就需要引入babel（Babel 中文網 · Babel - 下一代 JavaScript 語法的編譯器）來決議翻譯，而且需要在script寫上對應屬性，格式如下：

//引入Babel
<script src="./babel.min.js"></script>

<script type="text/babel">
    //內容
</script>

引入所需要的鏈接之后，就需要創建掛載點（其實就是一個帶有id名的div）了，專門用于插入后續生成的內容，如下：

<div id="root"></div>

這樣，一個完整的react初始模板就完成了，總結起來為三步：

（1）在頁面中引入 react 庫和 react-dom 庫；

（2）引入 Babel；

（3）創建掛載點，

完整代碼如下：

<!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>react入門</title>
  </head>

  <body>
    <!-- 掛載點：后續生成的內容插入這里 -->
    <div id="root"></div>
    <!-- 引入react的js檔案 -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <!-- 瀏覽器不識別JSX，需要引入babel來決議翻譯，而且需要在script寫上對應屬性 -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
      
    </script>
  </body>
</html>

2.react的封裝

封裝react共有三步：

（1）創建虛擬DOM物件；創建物件包含有3個引數，標簽名、屬性(物件格式)、標簽內的內容；

（2）獲取掛載點；

（3）渲染頁面，

格式如下：

  <body>
    <!-- 引入react的js檔案 -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <script src="./babel.min.js"></script>
    <!-- 掛載點：后續生成的內容插入這里 -->
    <div id="root"></div>

    <script type="text/babel">
      // 1.創建虛擬DOM物件
      const vNode = React.createElement(
        //引數表示：標簽，屬性(物件格式)，內容
        "div",
        {
          id: "mydiv",
          className: "cls",
        },
        "hello react!"
      );

      // 2.獲取掛載點
      const root = document.getElementById("root");

      // 3.頁面渲染
      ReactDOM.render(vNode, root);
    </script>
  </body>
</html>

此封裝程序也可用JSX語法來寫：

<body>
    <!-- 引入react的js檔案 -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <!-- 掛載點：后續生成的內容插入這里 -->
    <div id="root"></div>
    <!-- 瀏覽器不識別JSX，需要引入babel來決議翻譯，而且需要在script寫上對應屬性 -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
      // 1.創建標簽物件
      // JSX語法：在JS代碼中寫XML(類HTML)
      const vNode = (
        <div id="mydiv" className="cls">
          hello react JSX!
        </div>
      );
      // 2.獲取掛載點
      const root = document.getElementById("root");
      // 2.渲染頁面
      ReactDOM.render(vNode, root);
    </script>
  </body>

可以看出，JSX語法最大區別在于省去了創建虛擬DON物件的步驟，而是直接創建一個標簽物件，在該標簽物件中直接按照HTML格式書寫代碼即可，其余兩步則不變，

二、組件

組件，從概念上類似于 JavaScript 函式，它接受任意的入參（即 “props”），并回傳用于描述頁面展示內容的 React 元素，React 定義組件有兩種方式：

函式方式，rfc react function component；某些不能使用；

類方式，rcc react class component；功能更為強大；

1.函式方式定義組件

<body>
    <!-- 掛載點：后續生成的內容插入這里 -->
    <div id="root"></div>
    <!-- 引入react的js檔案 -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <!-- 瀏覽器不識別JSX，需要引入babel來決議翻譯，而且需要在script寫上對應屬性 -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
      // 利用函式的封裝性和復用性實作組件的復用
      // 規范要求：函式名稱大寫駝峰命名
      function Hello() {
        return <h1>Hello 組件！</h1>;
      }
      let h = Hello();

      // -------------------------------------------------------------
      // JSX語法
      // 復用
      // JSX語法中呼叫函式需要寫JS語法，JS語法在JSX中寫時需要使用{}括起來
      // h = (
      //   <div>
      //     {Hello()}
      //     {Hello()}
      //     {Hello()}
      //   </div>
      // );
      // -------------------------------------------------------------
      // 語法糖寫法：標簽方式呼叫(推薦)
      h = <Hello />;
      // 語法糖復用
      h = (
        <div>
          <Hello />
          <Hello />
          <Hello />
        </div>
      );
      // -------------------------------------------------------------
      // 渲染
      ReactDOM.render(h, document.getElementById("root"));
    </script>
  </body>

2.函陣列件傳參

<body>
    <!-- 掛載點：后續生成的內容插入這里 -->
    <div id="root"></div>
    <!-- 引入react的js檔案 -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <!-- 瀏覽器不識別JSX，需要引入babel來決議翻譯，而且需要在script寫上對應屬性 -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
      // 定義函陣列件
      // JSX語法中執行JS代碼要用{}包裹
      function HelloName(props) {
        //return <h1>Hello{props}</h1>;
        return <h1>Hello{props.name}</h1>;
      }
      // 呼叫組件
      //let h = HelloName("你好"); //傳值
      let h = HelloName({ name: "good" }); //傳物件

      // -----------------------------------------------------------------------
      // 語法糖寫法(推薦)
      h = <HelloName name="語法糖呼叫" />;
      // 復用
      h = (
        <div>
          <HelloName name="語法糖呼叫" />
          <HelloName name="推薦使用語法糖" />
        </div>
      );
      // -----------------------------------------------------------------------
      // 渲染
      ReactDOM.render(h, document.getElementById("root"));
    </script>
  </body>

3.類方式定義組件

<body>
    <!-- 掛載點：后續生成的內容插入這里 -->
    <div id="root"></div>
    <!-- 引入react的js檔案 -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <!-- 瀏覽器不識別JSX，需要引入babel來決議翻譯，而且需要在script寫上對應屬性 -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
      // 定義一個類組件
      class Hello extends React.Component {
        //定義類繼承React父類
        // 類方法:類屬性+類方法
        // 類方法
        // 默認語法糖標簽呼叫會呼叫此方法(意思就是如果用語法糖寫法只能用render,用其他則會報錯,所以建議使用render方法)
        render() {
          return <h1>Hello 類組件!</h1>;
        }
      }
      // 實體化
      let h = new Hello().render();
      // 語法糖呼叫
      h = <Hello />;
      h = (
        <div>
          {new Hello().render()}
          {new Hello().render()}
          <Hello />
          <Hello />
        </div>
      );
      // 渲染
      ReactDOM.render(h, document.getElementById("root"));
    </script>
  </body>

4.類組件傳參

<body>
    <!-- 掛載點：后續生成的內容插入這里 -->
    <div id="root"></div>
    <!-- 引入react的js檔案 -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <!-- 瀏覽器不識別JSX，需要引入babel來決議翻譯，而且需要在script寫上對應屬性 -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
      // 定義類組件并接收引數
      class HelloName extends React.Component {
        render() {
          // this代表當前類內,可以通過它呼叫類成員
          return <h1>Hello {this.props.name}</h1>;
        }
      }
      // 實體化
      let h = new HelloName({ name: "類組件傳參" }).render();
      // 語法糖傳參
      h = <HelloName name="語法糖傳參" />;
      // 復用
      h = (
        <div>
          {new HelloName({ name: "JS呼叫類組件1" }).render()}
          {new HelloName({ name: "JS呼叫類組件2" }).render()}
          <HelloName name="語法糖呼叫1" />
          <HelloName name="語法糖呼叫2" />
        </div>
      );
      // 渲染
      ReactDOM.render(h, document.getElementById("root"));
    </script>
  </body>

三、事件

React 元素的事件處理和 DOM 元素的很相似，但是有一點語法上的不同：React 事件的命名采用小駝峰式（camelCase），而不是純小寫，使用 JSX 語法時你需要傳入一個函式作為事件處理函式，而不是一個字串，

事件系結使用的是JS原生寫法：

<body>
    <!-- 掛載點：后續生成的內容插入這里 -->
    <div id="root"></div>
    <!-- 引入react的js檔案 -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <!-- 瀏覽器不識別JSX，需要引入babel來決議翻譯，而且需要在script寫上對應屬性 -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
      // 定義組件+事件處理方法
      class App extends React.Component {
        // 類成員方法
        show() {
          alert("點擊成功!");
        }
        render() {
          return (
            <div>
              {/*this代表當前類的成員,此處show不能加括號,因為事件必須點擊后執行,如果加了括號就直接執行了*/}
              <button onClick={this.show}>點擊按鈕</button>
            </div>
          );
        }
      }
      // 渲染
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>

事件中this的指向：嚴格模式下指向window，非嚴格模式下為undefined；

解決方式：

（1）定義普通函式，呼叫時 bind 替換 this 并不觸發執行；
{this.add.bind(this)}
（2）也使用箭頭函式來定義方法，這樣正常進行呼叫;
//定義
add=()=>{}

//呼叫
{this.add}
（3）定義普通函式，呼叫時先呼叫箭頭函式，再由箭頭函式呼叫普通函式，
{()=>this.add}

如下：使用bind函式替換this指向、使用箭頭函式觸發

<body>
    <!-- 掛載點：后續生成的內容插入這里 -->
    <div id="root"></div>
    <!-- 引入react的js檔案 -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <!-- 瀏覽器不識別JSX，需要引入babel來決議翻譯，而且需要在script寫上對應屬性 -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        // 類成員
        // 屬性
        name = "Hello React!";
        // 方法
        show() {
          console.log("普通函式：" + this.name);
        }
        // 箭頭函式方法
        show1 = () => {
          console.log("箭頭函式:" + this.name);
        };
        render() {
          return (
            <div>
              {/*用bind系結this,bind(this)將方法中的this替換為App*/}
              <button onClick={this.show.bind(this)}>普通函式觸發</button>
              <br />
              <button onClick={this.show1}>箭頭函式觸發</button>
            </div>
          );
        }
      }
      // 渲染
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/374805.html

標籤：其他

上一篇：三分鐘手寫一個迷你jQuery，附原始碼

下一篇：JavaScript之存盤