直屏旗艦來了 iQOO 12和K70 Pro同臺(tái)競(jìng)技
旗艦機(jī)基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據(jù)博主數(shù)碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
在React開發(fā)過程中，狀態(tài)管理是一個(gè)繞不開的話題。無論是新手還是有經(jīng)驗(yàn)的開發(fā)者，都會(huì)面臨如何有效管理組件狀態(tài)的挑戰(zhàn)。React為我們提供了多種狀態(tài)管理方案，如直接的狀態(tài)傳遞（俗稱"屬性鉆取"）、Context API、以及像Redux這樣的外部狀態(tài)管理庫。每種方案都有其適用場(chǎng)景與優(yōu)缺點(diǎn)，今天就讓我們就來先聊聊什么是“屬性鉆取”。
狀態(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ǔ)——通過類組件的 this.state 或函數(shù)組件的 useState() 鉤子，我們可以訪問和修改組件的內(nèi)部狀態(tài)。當(dāng)組件狀態(tài)發(fā)生變化時(shí)，React會(huì)自動(dòng)重新渲染組件，展示最新的狀態(tài)。
在React的組件化開發(fā)中，理解Props（屬性）的概念是基礎(chǔ)中的基礎(chǔ)。Props是組件間通信的橋梁，它讓我們可以將數(shù)據(jù)從一個(gè)組件傳遞到另一個(gè)組件。今天，我們不僅要聊聊Props是什么，還要深入探討一下屬性鉆取（Prop Drilling）的世界，看看它在React開發(fā)中是如何發(fā)揮作用的。
在React中，當(dāng)我們定義一個(gè)用戶自定義組件并使用JSX傳遞屬性和子組件時(shí)，React會(huì)將這些信息封裝成一個(gè)對(duì)象——這就是所謂的Props。通過Props，我們可以輕松實(shí)現(xiàn)組件間的數(shù)據(jù)傳遞和復(fù)用。
比如下面這段代碼，展示了如何使用Props在頁面上顯示“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)常需要通過Props在組件間傳遞。當(dāng)涉及到多層嵌套的組件時(shí)，手動(dòng)共享這些數(shù)據(jù)可能會(huì)變得復(fù)雜且困難。此外，如果需要在兩個(gè)子組件之間共享數(shù)據(jù)，這個(gè)任務(wù)就更加棘手了。這時(shí)，就需要一種全局的狀態(tài)管理方式來簡(jiǎn)化這一過程。
屬性鉆取是指在React中，數(shù)據(jù)需要通過多個(gè)相互連接的組件傳遞給最終需要它的組件的過程。這個(gè)過程被稱為“鉆取”，因?yàn)樗鼜?qiáng)迫中間的每個(gè)組件都接收不必要的數(shù)據(jù)，并將其傳遞給下一個(gè)組件，如此反復(fù)，直到數(shù)據(jù)到達(dá)目的地。這種方式可能會(huì)在很大程度上影響組件的復(fù)用性和應(yīng)用的性能。
在編寫整潔、可復(fù)用且遵循DRY原則（Don't Repeat Yourself）的代碼時(shí)，通過多個(gè)組件傳遞數(shù)據(jù)可能不是一個(gè)好方法。
然而，對(duì)于較小的應(yīng)用來說，屬性鉆取有時(shí)是有利的，因?yàn)樾枰芾淼慕M件和條件較少。
在React應(yīng)用開發(fā)中，屬性鉆取（Prop Drilling）是一種常見的模式，它涉及將props從一個(gè)組件通過多個(gè)層級(jí)傳遞到另一個(gè)組件。雖然這種方法在某些情況下可用，但通常建議避免使用屬性鉆取，原因如下：
屬性鉆取要求開發(fā)者手動(dòng)將狀態(tài)和數(shù)據(jù)通過所有不需要它的中間層級(jí)傳遞，以更新樹中較低位置的組件狀態(tài)。這導(dǎo)致代碼變得冗長(zhǎng)且難以維護(hù)。每當(dāng)你需要修改、添加或移除狀態(tài)時(shí)，都可能需要在多個(gè)組件間修改props傳遞方式，增加了維護(hù)成本。
在大型項(xiàng)目中，屬性鉆取尤其令人沮喪。組件層級(jí)可能非常深，維護(hù)和重構(gòu)過程中跟蹤某個(gè)prop的流向變得非常復(fù)雜，尤其是當(dāng)涉及多個(gè)團(tuán)隊(duì)或模塊時(shí)，協(xié)調(diào)變更會(huì)非常困難。
雖然React高效地處理了大部分性能問題，但無謂的props傳遞可以引起不必要的組件重新渲染，尤其是在大型應(yīng)用中，這會(huì)導(dǎo)致性能下降。
假設(shè)我們正在開發(fā)一個(gè)應(yīng)用，當(dāng)用戶登錄應(yīng)用后，會(huì)在頁面上顯示一條歡迎信息，稱呼用戶的名字。我們的應(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;在上述例子中，我們通過層層傳遞user對(duì)象，最終將其傳遞給了Message組件。這種方法雖然直接，但隨著應(yīng)用規(guī)模的增長(zhǎng)，會(huì)引入不必要的復(fù)雜性，導(dǎo)致組件間的耦合增加，并且對(duì)數(shù)據(jù)流的追蹤和管理變得困難。
對(duì)于避免屬性鉆取問題，React提供了一個(gè)強(qiáng)大的API —— Context API。Context API允許開發(fā)者跨組件層級(jí)直接傳遞數(shù)據(jù)，無需通過每個(gè)層級(jí)手動(dòng)傳遞props。
通過使用Context，我們可以創(chuàng)建一個(gè)包含用戶信息的context，并在App組件中提供該context的值。這樣，任何需要該信息的組件都可以通過Context消費(fèi)這些值，而無需通過中間組件傳遞。
使用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)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quá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)