react之建立組建並使用props

2022-02-21 01:49:35 字數 1003 閱讀 5551

import react from "react"

import reactdom from "react-dom"

import './index.css'

import * as serviceworker from './serviceworker'

import hello from "./components/hello"

const user =

class hello2 extends react.component

}}//使用...展開運算子將陣列和物件展開。

reactdom.render(

,document.getelementbyid("root"))

serviceworker.unregister();

除了class建立組建外我們還可以通過下面的方式

檔案src/components/hello.jsx

//  第一種建立組建的方式 乙個普通的建構函式就是乙個組建。

// 組建的首字母必須大寫

import react from "react";

//建立並匯出組建 第一種方法

export default function hello(props)

,性別,今年歲

}//把組建暴露出去

//export default hello

我們把通過function關鍵字創造建構函式建立出來的元件稱之為「無狀態元件」。

把使用class方式建立的組建稱之為 「有狀態元件"。

什麼區別?

function建立的元件只有props屬性,沒有自己的私有資料和生命週期函式。

class 都有。

如果不使用this.state屬性,也就是不需要更新頁面的值,那麼這個時候就可以使用無狀態元件的建立方式了。因為無狀態元件沒有私有資料(this.state)和生命週期函式所以的話執行效率會高一些

在vue中使用highmaps並引入proj4js

最近公司有個需求,需要在中國地圖上顯示各省,市 直轄市,區 縣等顯示使用者使用量,本來有兩種實現方式,但設計圖是採用氣泡圖形式展現的,所以就研究了一下highcharts的氣泡圖 demo效果圖如下 在vue專案中使用氣泡圖碰到了兩個問題 1 使用氣泡圖需要用到proj4.js,但是在vue中引入時...

Qt之建立並使用共享庫

在 windows 中,有動態鏈結庫 dll dynamic link library 在 linux 中,有共享庫 shared library 它們是相同的!由於平台和編譯器的差異,輸出的庫檔案也不同 要建立乙個共享庫,需要執行以下幾個步驟 檔案 新建檔案或專案,選擇 library c 庫 選...

React之元件的建立

1.函式 無狀態 元件的建立 doctype html en utf 8 viewport content width device width,initial scale 1.0 document title head node modules react umd react.developmen...