這次我們來學習React中的組件病蛉。組件是React的核心汽烦。
根據(jù)React官網(wǎng)的介紹，組件可以將UI切分成一些獨立的屹篓、可復用的部件疙渣，這樣你就只需專注于構建每一個單獨的部件。
組件有兩大特點：
1堆巧、 封裝
2昌阿、 重用
好處
- 提高開發(fā)效率
- 方便復用
- 簡化調(diào)試步驟
- 提升整個項目的可維護性
- 便于協(xié)同開發(fā)
組件的創(chuàng)建
組件創(chuàng)建有兩種：
第一種
通過JavaScript函數(shù)創(chuàng)建(無狀態(tài)組件)
// 創(chuàng)建組件 - 函數(shù)組件
function Parent() {
return (
<div>
<h2>我是小陳同學</h2>
<p>你好，小陳同學</p>
</div>
)
}
第二種
通過class創(chuàng)建(有狀態(tài)組件)
// 創(chuàng)建組件 - 類組件
class Child extends React.Component {
render () {
return (
<div>
<h2>我是小陳同學</h2>
<p>你好恳邀，小陳同學</p>
</div>
)
}
}
函數(shù)組件和類組件的區(qū)別
-
接收父組件傳遞過來的數(shù)據(jù)方式不同
- 函數(shù)組件 - props
- 類組件 - this.props
-
狀態(tài)
- 函數(shù)組件沒有狀態(tài)
- 類組件是有狀態(tài)的懦冰，職能比較豐富具有獨立的業(yè)務邏輯
-
this
- 函數(shù)組件不能訪問this，若想訪問的話谣沸，就得換一種創(chuàng)建方式
- 類組件可以訪問
-
性能
- 函數(shù)組件性能更優(yōu)刷钢，因為組件被精簡成一個render方法的函數(shù)來實現(xiàn)的，由于是無狀態(tài)組件乳附，所以無狀態(tài)組件就不會在有組件實例化的過程内地，無實例化過程也就不需要分配多余的內(nèi)存，從而性能得到一定的提升赋除。
-
生命周期
- 因為無狀態(tài)組件是不需要組件生命周期管理和狀態(tài)管理阱缓，所以底層實現(xiàn)這種形式的組件時是不會實現(xiàn)組件的生命周期方法。所以無狀態(tài)組件是不能參與組件的各個生命周期管理的举农。
函數(shù)組件好處荆针，無狀態(tài)組件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用
使用場景
- 推薦使用無狀態(tài)組件(函數(shù)組件)航背，輸入即輸出喉悴，不會有任何的副作用
組件通信
-
從上到下
在組件標簽上通過自定屬性（key=value）的形式，進行數(shù)據(jù)的綁定
-
在子組件內(nèi)部玖媚，如果是class組件通過this.props接收箕肃；如果是函數(shù)組件通過props接收
只能層層一級一級往下傳遞，不能跨組件傳遞
組件通信
在父組件中定義一個帶有參數(shù)的函數(shù)今魔，然后通過自定義 屬性的方式傳遞給子組件
import React, { Component } from 'react'
import Baby from './baby'
class List extends Component {
// 類的構造函數(shù)
getChildData (val) {
console.log(val)
}
render () {
let { getChildData } = this
return (
<div>
<h1>父組件 - 父子組件通信</h1>
<Baby fun = { getChildData } />
</div>
)
}
}
export default List
在子組件中接收到父組件傳遞過來的函數(shù)勺像，然后通過箭頭函數(shù)的形式進行執(zhí)行并且傳遞具體的數(shù)據(jù)
import React, { Component } from 'react'
class Baby extends Component {
render () {
let { fun } = this.props
return (
<div>
<hr/>
<p>子組件</p>
<button onClick={ () => { fun('123') } }>通知父組件</button>
</div>
)
}
}
export default Baby
