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'))
兩種創建組件方式的對比
- 用建構式創建出來的組件：專業的名字叫做“無狀態組件”
- 用class關鍵字創建出來的組件：專業的名字叫做“有狀態組件”
用建構式創建出來的組件，和用class創建出來的組件，這兩種不同的組件之間的本質區別就是：有無state屬性！！！
有狀態組件和無狀態組件之間的本質區別就是：有無state屬性！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/155325.html
標籤：JavaScript
上一篇：react-jsx語法