React主打函數(shù)式編程，配合上JSX語法，基本上可以把每個模塊都封裝為單獨組件，用組件一時爽，一直用一直爽。

1.函數(shù)式組件

在React中最簡單的即是創(chuàng)建一個函數(shù)式，沒有生命周期的組件，這與 Vue 的單文件 .vue 一個完整生命周期組件不同，舉個例子。

// 定義weblcome 組件 function Welcome(props) {return <h1>Hello, {props.name}</h1>; } 復(fù)制代碼

這里的props屬性對象是React中組件單向數(shù)據(jù)傳遞的唯一標(biāo)示，在函數(shù)式組件中，我們可以通過 props.name 來獲取 其他組件傳遞的name 屬性，這點和Vue是沒有本質(zhì)區(qū)別的。

// 子組件 獲取name屬性 function Welcome(props) {return <h1>Hello, {props.name}</h1>; }// 父組件傳入name屬性 const element = <Welcome name="Sara" />; ReactDOM.render(element,document.getElementById('root') );復(fù)制代碼

2.class 組件

函數(shù)式組件由于沒有生命周期的定義，雖然簡潔，但是拓展方面較差，我們把上面的welcome，改寫為class組件

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;} } 復(fù)制代碼

welcome繼承自React.Component 組基類，在class組件中，作用域為當(dāng)前組件，所以使用this對象來代替。

class組件有完整的生命周期，當(dāng)組件插入到DOM中時，會依次調(diào)用生命周期函數(shù)。

render() 是class組件中必須實現(xiàn)的方法 當(dāng)每次render 被觸發(fā)是都會檢查 this.props 和this.state 的變化、 同理適用于任何class 組件的檢查方式 所以在處理函數(shù)時，要考慮好應(yīng)該在組件生命周期的那一步觸發(fā)，反之容易涼涼，或影響性能

3.順滑的組件抽取方式

每個class組件， 無論單獨調(diào)用，還是循環(huán)調(diào)用，都有自己的生命周期和單獨的state。

舉個實際場景。 比如：維護一個列表，列表中有， 全部，完成，失敗，進行中，等狀態(tài)type。 首先想到的是維護一個type 數(shù)組，然后通過map 循環(huán)的方式來產(chǎn)生列表 好處是數(shù)據(jù)操作方便，缺點就是和其他 n個列表公用一個state ，沒有辦法將其中某個item的狀態(tài)區(qū)分開來

通過維護一個item組件，每個item都有自己的state，隨心所欲的操作

all in all 每個通過map 循環(huán)的item， 都可以根據(jù)業(yè)務(wù)考慮封裝為一個組件，因為你定義的時候就是一個變量， 不會像vue 通過v-for 指令渲染，后期抽離的成本不是很大。

Warning 如果shouldComponentUpdate 返回false 則不會render

當(dāng)組件的props 或者state 變化時會觸發(fā)更新。 會依次執(zhí)行下面的生命周期

static getDerivedStateFromProps()

shouldComponentUpdate() // 必要時來做性能優(yōu)化，在第一期提過

render() // 必須要用

getSnapshotBeforeUpdate()

componentDidUpdate() // 最常用的組件狀態(tài)更新判斷

最比較常用的除了 componentDidMount() 之外，還有 componentDidUpdate() 來判斷組件是否需要更新。

4.使用propTypes進行類型檢查 propsTypes 是React友好的類型檢查，通常和組件搭配使用。

使用方法非常簡單，上圖

二、 組件通訊方式 在單向通信中，最常見的就是通過prop方式。

父 - 子

子組件定義好item參數(shù) 父組件按照propTyes進行傳參 子組件通過 this.props.item 取值

子 - 父

// 子組件 HomeItem.defaultProps = {item: {},// 定義回調(diào)函數(shù)fetchData: () => {}, };HomeItem.propTypes = {item: PropTypes.object,fetchData: PropTypes.func, }; 復(fù)制代碼// 在子組件handleSuccessDel = () => {const successUrl = {url: `/xq/statuses/destroy/${this.state.uid}.json`,params: {},};const draftUrl = {url: '/xq/statuses/draft/delete.json',params: { id: this.props.item.textId },};const delUrl = this.props.item.typeName === '草稿' ? draftUrl : successUrl;httpClient.post(delUrl.url, delUrl.params).then((res) => {if (res.success) {this.setState({showModal: false,});Toast({ text: '刪除成功', type: 'success' });// 通過參數(shù)執(zhí)行父組件傳過來的callback 進而引起父組件狀態(tài)改變this.props.fetchData();}}).catch((err) => {console.error(err);});}; 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5ca05d176fb9a05e304a8ae6

總結(jié)

以上是生活随笔為你收集整理的一起学React--组件定义和组件通讯的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。