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
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類