react-組件

来源:https://www.cnblogs.com/ygjzs/archive/2020/01/16/12201395.html
-Advertisement-
Play Games

react中的組件組件 react組件介紹 在React中，構造函數，就是一個最基本的組件 如果想要把組件放到頁面中，可以把 構造函數的名稱，當作 組件的名稱，以 HTML標簽形式引入頁面中即可 註意：React在解析所有的標簽的時候，是以標簽的首字母來區分的，如果標簽的首字母是小寫，那麼就按照 普 ...


react中的組件組件

react組件介紹

在React中，構造函數，就是一個最基本的組件
如果想要把組件放到頁面中，可以把 構造函數的名稱，當作 組件的名稱，以 HTML標簽形式引入頁面中即可
註意：React在解析所有的標簽的時候，是以標簽的首字母來區分的，如果標簽的首字母是小寫，那麼就按照 普通的 HTML 標簽來解析，如果 首字母是大寫，則按照 組件的形式去解析渲染
結論：組件的首字母必須是大寫

function Hello(props) {
  // 在組件中，如果想要使用外部傳遞過來的數據，必須，顯示的在 構造函數參數列表中，定義 props 屬性來接收；
  // 通過 props 得到的任何數據都是只讀的，不能從新賦值
  // props.name = '000'
  return <div>
    <h1>這是在Hello組件中定義的元素 --- {props.name}</h1>
  </div>
}

class和function

//  class 實現面向對象的新形式

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.say = function () {
  console.log('娃哈哈，你行嗎？')
}
Person.info = 123

//變數聲明提升
var p1 = new Person('zs', 20)
// console.log(p1.say())
// console.log(Person.info)





//  class 後面跟上類名， 類名後面，不需要加 () ，直接上 {}
class Per {
  // 在每個class類內部，都有一個 constructor 構造器， 如果沒有顯示定義 構造器，那麼類內部預設都有個看不見的 constructor
  // constructor 的作用，就好比 咱們之前的 function Person(){ }
  // 每當，使用 new 關鍵字，創建 class 類實例的時候，必然會優先調用 constructor 構造器
  // constructor(){}
  // !定義在最對象上
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  //!定義在對象的原型上
  // 這是實例方法，必須通過 new 出來的對象調用
  say() {
    console.log('ok a ')
  }

  static info = 123

  static sayHello() {
    console.log('這是靜態方法')
  }
}

var p2 = new Per('王多多', 22)
console.log(p2)
console.log(Per.info)
console.log(Per.sayHello())

class中的繼承

父組件向子組件傳遞數據

class Person {
  constructor(name, age) {
    console.log(3)
    this.name = name
    this.age = age
  }

  say() {
    console.log('這是 Person中的 say 方法')
  }
  static info = 123
}


// 使用 extends 實現繼承，extends 前面的是子類，後面的是父類
class Chinese extends Person {
  constructor(name, age, color, language) {
    console.log(1)
    // 註意： 當使用 extends 關鍵字實現了繼承， 子類的 constructor 構造函數中，必須顯示調用 super() 方法，這個 super 表示父類中 constructor 的引用
    super(name, age)
    this.color = color
    this.language = language
    console.log(2)
  }
}


// var p1 = new Person('zs', 12)
// console.log(p1)

var c1 = new Chinese('張三', 22, 'yellow', '漢語')
console.log(c1)
// 父類中任何東西，子類都能繼承到
// c1.say();
// console.log(Chinese.info)


// 真正的面向對象語言是由 三部分組成： 封裝、繼承、多態
// 多態 和 介面、虛擬方法有關

//!Javascript沒有多態，下麵只是多態的介紹
class Animal {
  // 父類只定義了方法的名稱，和作用，但是並沒有具體的實現邏輯
  say() {
    // console.log('喵喵')
  }
}

class Cat extends Animal {
  // 當子類繼承了父類之後，必然要繼承父類中的方法，但是，發現say方法空有其殼，如果子類想要調用 say， 必須自己先實現這個方法，才能調用；
  say() {
    console.log('miaomiao')
  }
}

class Dog extends Animal {
  say() {
    console.log('wangwang')
  }
}

兩種組件對比

function組件

import React from 'react'
// 在 function 定義的組件中，如果想要使用 props，必須先定義，否則無法直接使用
// 但是，在class定義的組件中，可以直接使用 this.props 來直接訪問，不需要預先接收 props
export default function Hello(props) {
  // console.log(props)
  return <p>haha --- {props.name}</p>
}

class組件

import React from 'react'

// 使用 class 創建的類，通過 extends 關鍵字，繼承了 React.Component 之後，這個類，就是一個組件的模板了
// 如果想要引用這個組件，可以把 類的名稱， 以標簽形式，導入到 JSX 中使用
export default class Hello2 extends React.Component {
  constructor(props) {
    // 註意： 如果使用 extends 實現了繼承，那麼在 constructor 的第一行，一定要顯示調用一下 super()
    //  super() 表示父類的構造函數
    super(props)
    // 在 constructor 中，如果想要訪問 props 屬性，不能直接使用 this.props， 而是需要在 constructor 的構造器參數列表中，顯示的定義 props 參數來接收，才能正常使用；
    // console.log(props)

    // 註意： 這是固定寫法，this.state 表示 當前組件實例的私有數據對象，就好比 vue 中，組件實例身上的 data(){ return {} } 函數
    // 如果想要使用 組件中 state 上的數據，直接通過 this.state.*** 來訪問即可
    this.state = {
      msg: '這是 Hello2 組件的私有msg數據',
      info: '瓦塔西***'
    }
  }
  // 保存信息1： No `render` method found on the returned component instance: you may have forgotten to define `render`.
  // 通過分析以上報錯，發現，提示我們說，在 class 實現的組件內部，必須定義一個 render 函數
  render() {
    // 報錯信息2： Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
    // 通過分析以上報錯，發現，在 render 函數中，還必須 return 一個東西，如果沒有什麼需要被return 的，則需要 return null

    // 雖然在 React dev tools 中，並沒有顯示說 class 組件中的 props 是只讀的，但是，經過測試得知，其實 只要是 組件的 props，都是只讀的；
    // this.props.address = '123'

    // console.log(this.props)


    return <div>
      <h1>這是 使用 class 類創建的組件</h1>
      <h3>外界傳遞過來的數據是： {this.props.address} --- {this.props.info}</h3>

}

導入渲染組件

// 在使用 Hello 組件之前，先導入 組件
import Hello from './components/Hello.jsx'
import Hello2 from './components/Hello2.jsx'
// 註意： 以上兩種創建組件的方式，有著本質上的區別，其中，
// 使用 function 構造函數創建的組件，內部沒有 state 私有數據，只有 一個 props 來接收外界傳遞過來的數據；
// 使用 class 關鍵字 創建的組件，內部，除了有 this.props 這個只讀屬性之外，還有一個 專門用於 存放自己私有數據的 this.state 屬性，這個 state 是可讀可寫的！
// 基於上面的區別：我們可以為這兩種創建組件的方式，下定義了： 使用 function 創建的組件，叫做【無狀態組件】；使用 class 創建的組件，叫做【有狀態組件】
// 有狀態組件和無狀態組件，最本質的區別，就是有無 state 屬性；同時， class 創建的組件，有自己的生命周期函數，但是，function 創建的 組件，沒有自己的生命周期函數；
// 問題來了：什麼時候使用 有狀態組件，什麼時候使用無狀態組件呢？？？
//  1. 如果一個組件需要存放自己的私有數據，或者需要在組件的不同階段執行不同的業務邏輯，此時，非常適合用 class 創建出來的有狀態組件；
//  2. 如果一個組件，只需要根據外界傳遞過來的 props，渲染固定的 頁面結構就完事兒了，此時，非常適合使用 function 創建出來的 無狀態組件；（使用無狀態組件的小小好處： 由於剔除了組件的生命周期，所以，運行速度會相對快一丟丟）

ReactDOM.render(<div>
  <Hello name="zs" age={20}></Hello>
  <Hello2 address="北京" info="程式員"></Hello2>
</div>, document.getElementById('app'))

兩種創建組件方式的對比

  1. 用構造函數創建出來的組件：專業的名字叫做“無狀態組件”
  2. 用class關鍵字創建出來的組件：專業的名字叫做“有狀態組件”

用構造函數創建出來的組件，和用class創建出來的組件，這兩種不同的組件之間的本質區別就是：有無state屬性！！！
有狀態組件和無狀態組件之間的本質區別就是：有無state屬性！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在 Vue 中使用 Typescript
    本篇不會過多講述 ts 語法，著重記錄下 在 Vue 中使用 ts 的方法以及踩坑經過。 ...
  • react-發表評論案例
    評論列表組件 評論顯示 發表評論 ...
  • react-綁定this並傳參的三種方式
    綁定this並傳參的三種方式 1. 在事件中綁定this並傳參： 2. 在構造函數中綁定this並傳參: 3. 用箭頭函數綁定this並傳參： 綁定文本框與state中的值 1. 在Vue.js中，預設可以通過 指令，將表單控制項和我們的 上面的屬性進行雙向數據綁定，數據變化和頁面之間的變化是同步的！ ...
  • react-生命周期
    組件的生命周期 + 概念：在組件創建、到載入到頁面上運行、以及組件被銷毀的過程中，總是伴隨著各種各樣的事件，這些在組件特定時期，觸發的事件，統稱為 組件的生命周期； + 組件生命周期分為三部分： 組件創建階段 ：組件創建階段的生命周期函數，有一個顯著的特點：創建階段的生命周期函數，在組件的一輩子中， ...
  • vue(二)--條件語句
    條件語句：v-if v-else v-else-if v-show v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後。 1.v-if <body> <div id="app"> <p v-if="seen">seen=true現在你看到我了</p> <templa ...
  • 使用gulp
    gulp項目構建 多個開發者共同開發一個項目，每位開發者負責不同的模塊，這就會造成一個完整的項目實際上是由許多的“代碼版段”組成的； 使用less、sass等一些預處理程式，降低CSS的維護成本，最終需要將這些預處理程式進行解析； 合併css、javascript，壓縮html、css、javasc ...
  • ElementUI的el-table的多選的取消選擇和篩選的取消所有過濾器之ref衝突問題
    寫此文的緣由：現如今，網路上，沒有同下的解釋形式（或者在外網，所以我沒找到，或者大佬覺得太簡單所以不屑解釋）。然而，我認為這是對VUE+ElementUI的底層框架的理解深入化問題。（為什麼要深入理解底層，來自學習java時留下的習慣，挖底層代碼是常態） 在API文檔中： <el-button @c ...
  • react-react中的css+評論組件
    一個小案例，鞏固有狀態組件和無狀態組件的使用 通過for迴圈生成多個組件 1. 數據： 入口 評論列表組件 使用CSS模塊化 1. 可以在webpack.config.js中為css loader啟用模塊化： 2. 使用 定義全局樣式 webpack中的配置 style樣式 評論項的組件 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類