石頭自清潔掃拖機(jī)器人G10S評(píng)測(cè)：多年黑科技集大成之作 懶人終極福音
科技圈經(jīng)常能看到一個(gè)詞叫“縫合怪”，用來(lái)形容那些把好多功能或者外觀結(jié)合在一起的產(chǎn)品，通常這樣的詞是貶義詞，但如果真的是產(chǎn)品縫合的好、縫合的實(shí)用的話，那它就成了中性詞，今
在React開(kāi)發(fā)過(guò)程中，狀態(tài)管理是一個(gè)繞不開(kāi)的話題。無(wú)論是新手還是有經(jīng)驗(yàn)的開(kāi)發(fā)者，都會(huì)面臨如何有效管理組件狀態(tài)的挑戰(zhàn)。React為我們提供了多種狀態(tài)管理方案，如直接的狀態(tài)傳遞（俗稱(chēng)"屬性鉆取"）、Context API、以及像Redux這樣的外部狀態(tài)管理庫(kù)。每種方案都有其適用場(chǎng)景與優(yōu)缺點(diǎn)，今天就讓我們就來(lái)先聊聊什么是“屬性鉆取”。
狀態(tài)管理對(duì)于任何動(dòng)態(tài)應(yīng)用而言都是核心且不可避免的一環(huán)。在React中，組件的狀態(tài)是其動(dòng)態(tài)屬性值的體現(xiàn)，比如復(fù)選框是否被選中、文本框內(nèi)輸入的文本是什么等等。React為每個(gè)組件提供了一個(gè)動(dòng)態(tài)數(shù)據(jù)存儲(chǔ)——通過(guò)類(lèi)組件的 this.state 或函數(shù)組件的 useState() 鉤子，我們可以訪問(wèn)和修改組件的內(nèi)部狀態(tài)。當(dāng)組件狀態(tài)發(fā)生變化時(shí)，React會(huì)自動(dòng)重新渲染組件，展示最新的狀態(tài)。
在React的組件化開(kāi)發(fā)中，理解Props（屬性）的概念是基礎(chǔ)中的基礎(chǔ)。Props是組件間通信的橋梁，它讓我們可以將數(shù)據(jù)從一個(gè)組件傳遞到另一個(gè)組件。今天，我們不僅要聊聊Props是什么，還要深入探討一下屬性鉆取（Prop Drilling）的世界，看看它在React開(kāi)發(fā)中是如何發(fā)揮作用的。
在React中，當(dāng)我們定義一個(gè)用戶(hù)自定義組件并使用JSX傳遞屬性和子組件時(shí)，React會(huì)將這些信息封裝成一個(gè)對(duì)象——這就是所謂的Props。通過(guò)Props，我們可以輕松實(shí)現(xiàn)組件間的數(shù)據(jù)傳遞和復(fù)用。
比如下面這段代碼，展示了如何使用Props在頁(yè)面上顯示“Hello, Hulk”：
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}const root = ReactDOM.createRoot(document.getElementById('root'));const element = <Welcome name="Hulk" />;root.render(element);在典型的React應(yīng)用中，數(shù)據(jù)經(jīng)常需要通過(guò)Props在組件間傳遞。當(dāng)涉及到多層嵌套的組件時(shí)，手動(dòng)共享這些數(shù)據(jù)可能會(huì)變得復(fù)雜且困難。此外，如果需要在兩個(gè)子組件之間共享數(shù)據(jù)，這個(gè)任務(wù)就更加棘手了。這時(shí)，就需要一種全局的狀態(tài)管理方式來(lái)簡(jiǎn)化這一過(guò)程。
屬性鉆取是指在React中，數(shù)據(jù)需要通過(guò)多個(gè)相互連接的組件傳遞給最終需要它的組件的過(guò)程。這個(gè)過(guò)程被稱(chēng)為“鉆取”，因?yàn)樗鼜?qiáng)迫中間的每個(gè)組件都接收不必要的數(shù)據(jù)，并將其傳遞給下一個(gè)組件，如此反復(fù)，直到數(shù)據(jù)到達(dá)目的地。這種方式可能會(huì)在很大程度上影響組件的復(fù)用性和應(yīng)用的性能。
在編寫(xiě)整潔、可復(fù)用且遵循DRY原則（Don't Repeat Yourself）的代碼時(shí)，通過(guò)多個(gè)組件傳遞數(shù)據(jù)可能不是一個(gè)好方法。
然而，對(duì)于較小的應(yīng)用來(lái)說(shuō)，屬性鉆取有時(shí)是有利的，因?yàn)樾枰芾淼慕M件和條件較少。
在React應(yīng)用開(kāi)發(fā)中，屬性鉆取（Prop Drilling）是一種常見(jiàn)的模式，它涉及將props從一個(gè)組件通過(guò)多個(gè)層級(jí)傳遞到另一個(gè)組件。雖然這種方法在某些情況下可用，但通常建議避免使用屬性鉆取，原因如下：
屬性鉆取要求開(kāi)發(fā)者手動(dòng)將狀態(tài)和數(shù)據(jù)通過(guò)所有不需要它的中間層級(jí)傳遞，以更新樹(shù)中較低位置的組件狀態(tài)。這導(dǎo)致代碼變得冗長(zhǎng)且難以維護(hù)。每當(dāng)你需要修改、添加或移除狀態(tài)時(shí)，都可能需要在多個(gè)組件間修改props傳遞方式，增加了維護(hù)成本。
在大型項(xiàng)目中，屬性鉆取尤其令人沮喪。組件層級(jí)可能非常深，維護(hù)和重構(gòu)過(guò)程中跟蹤某個(gè)prop的流向變得非常復(fù)雜，尤其是當(dāng)涉及多個(gè)團(tuán)隊(duì)或模塊時(shí)，協(xié)調(diào)變更會(huì)非常困難。
雖然React高效地處理了大部分性能問(wèn)題，但無(wú)謂的props傳遞可以引起不必要的組件重新渲染，尤其是在大型應(yīng)用中，這會(huì)導(dǎo)致性能下降。
假設(shè)我們正在開(kāi)發(fā)一個(gè)應(yīng)用，當(dāng)用戶(hù)登錄應(yīng)用后，會(huì)在頁(yè)面上顯示一條歡迎信息，稱(chēng)呼用戶(hù)的名字。我們的應(yīng)用結(jié)構(gòu)大致如下：
import { useState } from 'react';function App() { const [user, setUser] = useState({ name: 'Aegon' }); return ( <div> <Navbar /> <MainPage user={user} /> </div> );}function Navbar() { return <nav style={{ background: '#10ADDE', color: '#fff' }}>Demo App</nav>;}function MainPage({ user }) { return ( <div> <h3>Main Page</h3> <Content user={user} /> </div> );}function Content({ user }) { return ( <div> <Message user={user} /> </div> );}function Message({ user }) { return <p>Welcome {user.name}</p>;}export default App;在上述例子中，我們通過(guò)層層傳遞user對(duì)象，最終將其傳遞給了Message組件。這種方法雖然直接，但隨著應(yīng)用規(guī)模的增長(zhǎng)，會(huì)引入不必要的復(fù)雜性，導(dǎo)致組件間的耦合增加，并且對(duì)數(shù)據(jù)流的追蹤和管理變得困難。
對(duì)于避免屬性鉆取問(wèn)題，React提供了一個(gè)強(qiáng)大的API —— Context API。Context API允許開(kāi)發(fā)者跨組件層級(jí)直接傳遞數(shù)據(jù)，無(wú)需通過(guò)每個(gè)層級(jí)手動(dòng)傳遞props。
通過(guò)使用Context，我們可以創(chuàng)建一個(gè)包含用戶(hù)信息的context，并在App組件中提供該context的值。這樣，任何需要該信息的組件都可以通過(guò)Context消費(fèi)這些值，而無(wú)需通過(guò)中間組件傳遞。
使用Context API重構(gòu)后，代碼將更加簡(jiǎn)潔，組件之間的耦合度也會(huì)大大降低，使得數(shù)據(jù)流管理更為直觀和易于維護(hù)。
關(guān)于 Context API 的內(nèi)容，我將會(huì)在下一篇內(nèi)容進(jìn)行介紹，最后別忘了關(guān)注「前端達(dá)人」，這里不僅有深入淺出的技術(shù)文章，還有最新的前端趨勢(shì)解讀，幫助你保持技術(shù)的前瞻性和競(jìng)爭(zhēng)力。你的關(guān)注、點(diǎn)贊和轉(zhuǎn)發(fā)是對(duì)我最大的支持，也是我持續(xù)分享高質(zhì)量?jī)?nèi)容的動(dòng)力。
本文鏈接：http://www.tebozhan.com/showinfo-26-83779-0.html聊一聊什么是 React 屬性鉆取（Prop Drilling）
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)