面試 React 框架八股文十問十答第七期

作者：程序員小白條，個(gè)人博客

相信看了本文后，對(duì)你的面試是有一定幫助的！關(guān)注專欄后就能收到持續(xù)更新！

?點(diǎn)贊?收藏?不迷路！?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-800133.html

1）React 廢棄了哪些生命周期？為什么？

在React 16.3版本后，React廢棄了一些生命周期方法，這是為了簡(jiǎn)化API、提高可維護(hù)性以及引入更好的異步渲染機(jī)制。以下是被廢棄的生命周期方法：

• componentWillMount： 該方法在組件即將被掛載到DOM之前調(diào)用。由于異步渲染的引入，React團(tuán)隊(duì)建議在 componentDidMount 中執(zhí)行相應(yīng)的操作，因?yàn)榇藭r(shí)可以確保組件已經(jīng)被掛載。
• componentWillUpdate： 該方法在組件即將重新渲染時(shí)調(diào)用。React 16.3之后，建議使用 componentDidUpdate 替代，因?yàn)檫@樣可以避免在同一生命周期中執(zhí)行可能導(dǎo)致副作用的操作。
• componentWillReceiveProps： 該方法在組件即將接收新的props時(shí)調(diào)用。React團(tuán)隊(duì)認(rèn)為這個(gè)生命周期容易出錯(cuò)且難以理解，因此推薦使用 static getDerivedStateFromProps 或 componentDidUpdate 來(lái)替代。

這些變更的目標(biāo)是為了更好地支持異步渲染，并提供更一致的生命周期方法。

2）React 16.X 中 props 改變后在哪個(gè)生命周期中處理

在React 16.X中，當(dāng)組件接收到新的props時(shí)，props的改變會(huì)在 componentDidUpdate 生命周期中被處理。在這個(gè)生命周期方法中，你可以比較前后的props，執(zhí)行相應(yīng)的操作，例如根據(jù)新的props更新組件的內(nèi)部狀態(tài)。

componentDidUpdate(prevProps) {
  // 檢查props是否發(fā)生變化
  if (this.props.someProp !== prevProps.someProp) {
    // 執(zhí)行相應(yīng)的操作
    // 例如，更新組件的狀態(tài)
    this.setState({/* updated state */});
  }
}

3）React 性能優(yōu)化在哪個(gè)生命周期？它優(yōu)化的原理是什么？

性能優(yōu)化通常在 shouldComponentUpdate 生命周期中進(jìn)行。在這個(gè)生命周期方法中，你可以控制組件是否需要重新渲染。默認(rèn)情況下，React會(huì)在每次 setState 調(diào)用時(shí)重新渲染組件，但通過在 shouldComponentUpdate 中進(jìn)行適當(dāng)?shù)谋容^，你可以避免不必要的渲染，提高性能。

shouldComponentUpdate 接收兩個(gè)參數(shù)：nextProps 和 nextState。你可以比較這些新的props和state與當(dāng)前的props和state，如果它們相等或符合某些條件，返回 false 阻止重新渲染，否則返回 true 允許重新渲染。

這一優(yōu)化原理是避免不必要的渲染，減少了虛擬DOM的比較和實(shí)際DOM的更新操作，從而提升了性能。

4）state 和 props 觸發(fā)更新的生命周期分別有什么區(qū)別？

• props 觸發(fā)更新：
  • 當(dāng)組件的props發(fā)生變化時(shí)，會(huì)觸發(fā)組件的更新。
  • 與props相關(guān)的生命周期方法包括 componentWillReceiveProps（已廢棄）和 componentDidUpdate。
  • 在 componentDidUpdate 中可以比較新舊props，執(zhí)行相應(yīng)的操作。
• state 觸發(fā)更新：
  • 當(dāng)組件的state發(fā)生變化時(shí)，也會(huì)觸發(fā)組件的更新。
  • 與state相關(guān)的生命周期方法包括 shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。
  • 可以在 shouldComponentUpdate 中進(jìn)行狀態(tài)變化的判斷，決定是否進(jìn)行更新，從而進(jìn)行性能優(yōu)化。

5）React中發(fā)起網(wǎng)絡(luò)請(qǐng)求應(yīng)該在哪個(gè)生命周期中進(jìn)行？為什么？

發(fā)起網(wǎng)絡(luò)請(qǐng)求通常應(yīng)該在組件的 componentDidMount 生命周期中進(jìn)行。這是因?yàn)?componentDidMount 在組件掛載到DOM后調(diào)用，這樣可以確保組件已經(jīng)渲染到頁(yè)面上，用戶能夠看到，并且此時(shí)可以執(zhí)行異步操作，如網(wǎng)絡(luò)請(qǐng)求。

在 componentDidMount 中發(fā)起網(wǎng)絡(luò)請(qǐng)求有以下好處：

• 避免了阻塞渲染：在 componentDidMount 中進(jìn)行網(wǎng)絡(luò)請(qǐng)求，不會(huì)阻塞組件的渲染過程，用戶能夠快速看到頁(yè)面內(nèi)容。
• 避免重復(fù)請(qǐng)求：由于 componentDidMount 只會(huì)在組件掛載時(shí)被調(diào)用一次，因此可以避免重復(fù)發(fā)起相同的網(wǎng)絡(luò)請(qǐng)求。

在請(qǐng)求返回后，可以使用 setState 更新組件的狀態(tài)，觸發(fā)重新渲染以展示從服務(wù)器獲取的數(shù)據(jù)。

6）React 16中新生命周期有哪些

在React 16中引入了新的生命周期方法，主要是為了支持異步渲染和更好地處理副作用。以下是React 16中引入的新生命周期方法：

• static getDerivedStateFromProps(props, state): 這個(gè)靜態(tài)方法在組件每次渲染前被調(diào)用，它接收新的props和當(dāng)前的state作為參數(shù)，用于計(jì)算并返回新的state。與 componentWillReceiveProps 的替代關(guān)系最密切。
• getSnapshotBeforeUpdate(prevProps, prevState): 在更新之前被調(diào)用，它的返回值將作為第三個(gè)參數(shù)傳遞給 componentDidUpdate。主要用于獲取更新前的一些DOM信息，通常和 componentDidUpdate 一起使用。

7） 父子組件的通信方式？

父子組件之間通信的方式有多種，其中常見的包括：

• props傳遞： 父組件通過props向子組件傳遞數(shù)據(jù)。

// 父組件
<ChildComponent data={someData} />

// 子組件
const ChildComponent = (props) => {
  // 使用 props.data
};

• 回調(diào)函數(shù)： 父組件通過回調(diào)函數(shù)將函數(shù)傳遞給子組件，子組件可以調(diào)用這個(gè)函數(shù)與父組件通信。

// 父組件
<ChildComponent onAction={handleAction} />

// 子組件
const ChildComponent = ({ onAction }) => {
  // 調(diào)用父組件傳遞的回調(diào)函數(shù)
  onAction(data);
};

• React Context： 使用React Context可以在組件樹中共享數(shù)據(jù)，父組件提供Context，子組件通過Context訂閱數(shù)據(jù)。
• Redux或其他狀態(tài)管理庫(kù)： 對(duì)于大型應(yīng)用，可以使用狀態(tài)管理庫(kù)進(jìn)行狀態(tài)的集中管理，實(shí)現(xiàn)組件之間的通信。

8）跨級(jí)組件的通信方式？

當(dāng)組件層級(jí)較深，需要進(jìn)行跨級(jí)通信時(shí)，可以使用以下方式：

• React Context： 創(chuàng)建一個(gè)Context，然后在組件樹中提供和消費(fèi)這個(gè)Context，實(shí)現(xiàn)跨級(jí)組件之間的數(shù)據(jù)傳遞。
• Redux或其他狀態(tài)管理庫(kù)： 在全局狀態(tài)管理庫(kù)中存儲(chǔ)和獲取數(shù)據(jù)，實(shí)現(xiàn)跨級(jí)組件的通信。

9）非嵌套關(guān)系組件的通信方式？

對(duì)于非嵌套關(guān)系的組件，可以使用中介者模式或全局狀態(tài)管理庫(kù)等方式進(jìn)行通信。

• 中介者模式： 可以創(chuàng)建一個(gè)中介者組件，負(fù)責(zé)管理和傳遞信息，其他組件通過中介者進(jìn)行通信。
• 全局狀態(tài)管理庫(kù)： 使用像Redux這樣的全局狀態(tài)管理庫(kù)，將需要共享的數(shù)據(jù)存儲(chǔ)在全局狀態(tài)中，各個(gè)組件可以通過訂閱和派發(fā)動(dòng)作來(lái)進(jìn)行通信。

10）如何解決 props 層級(jí)過深的問題

深層次的props傳遞可能導(dǎo)致代碼難以維護(hù)和理解。為了解決這個(gè)問題，可以考慮以下幾種方法：

• 使用React Context： 將需要共享的數(shù)據(jù)使用React Context提供在組件樹的上層，避免通過多層嵌套傳遞。
• 使用狀態(tài)管理庫(kù)： 將共享的狀態(tài)存儲(chǔ)在全局狀態(tài)管理庫(kù)（如Redux）中，各組件通過連接器（Connector）或Hooks來(lái)獲取和更新狀態(tài)。
• 組件組合： 將多個(gè)小組件組合成一個(gè)復(fù)合組件，內(nèi)部進(jìn)行props傳遞，外部只需與復(fù)合組件交互。
• 提取組件： 當(dāng)遇到深層次的props傳遞時(shí)，考慮是否有必要將一些相關(guān)的props提取到一個(gè)新的組件中，以減少每個(gè)組件的props數(shù)量。

通過這些方式，可以更好地管理和組織組件之間的數(shù)據(jù)傳遞，使代碼更清晰和可維護(hù)。

開源項(xiàng)目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

?點(diǎn)贊?收藏?不迷路！?

到了這里，關(guān)于面試 React 框架八股文十問十答第七期的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！