馃銆屼负浠€涔堟垜鐨勭粍浠朵笉鏄剧ず鏁版嵁锛熴€嶁€斺€斾粠鏂版墜宕╂簝鐜板満璇磋捣

鍒氬React閭ｄ細鍎匡紝浣犳槸涓嶆槸涔熼亣鍒拌繃杩欑鎯呭喌锛熸槑鏄庣収鐫€鏁欑▼鍐欎簡props锛岄〉闈㈠嵈涓€鐗囩┖鐧姐€傚埆鎱岋紒鍜变滑浠婂ぉ灏辨妸prop浼犻€掕繖鐐逛簨鎺板紑浜嗘弶纰庝簡璇达紝淇濆噯浣犵湅瀹岀洿鎷嶅ぇ鑵匡細"鍘熸潵杩欎箞绠€鍗曪紒"

馃殌鍦烘櫙涓€锛氬熀纭€浼犲€煎氨鍍忛€掑ザ鑼?/h3>

鎯宠薄浣犵粰鏈嬪弸閫掑ザ鑼垛€斺€斿緱鏄庣‘鍛婅瘔浠栬繖鏄€屽皯鍐板崐绯栫殑鐝嶇彔濂惰尪銆嶅鍚э紵React缁勪欢涔熸槸杩欎釜鐞嗗効锛?/p>

jsx澶嶅埗
// 姝ｇ‘濮垮娍 鉁旓笍
="鐝嶇彔濂惰尪" iceLevel="灏戝啺" sugarLevel="鍗婄硸"/>

// 缈昏溅鐜板満 鉂岋紙婕忎簡寮曞彿褰撳彉閲忎紶閫掞級
={鐝嶇彔濂惰尪}/>

鈥?strong>鈥嬮噸鐐规潵浜嗏€?/strong>鈥嬶細瀛楃涓茬洿鎺ヤ紶锛屽彉閲忚鐢▄}鍖呬綇銆傛悶鍙嶄簡鐨勮瘽...鎭枩浣犲枩鎻恥ndefined澶хぜ鍖咃紒

馃攳 楂橀閿欒鑷煡娓呭崟锛?/p>

1. 璇ュ姞{}鐨勫湴鏂规病鍔狅紙鎶婂瓧绗︿覆褰撳彉閲忥級
2. 涓嶈鍔犵殑鍦版柟涔卞姞锛堟妸鍙橀噺鍐欐垚瀛楃涓诧級
3. 缁勪欢鏍规湰娌℃帴鏀秔rops锛堝啓婕忎簡props鍙傛暟锛?/li>

---

馃З鍦烘櫙浜岋細瀵硅薄鎵撳寘浼犲€艰褰撳績

褰撲綘瑕佷紶鏁翠釜濂惰尪搴楄彍鍗曟椂锛屼竴涓釜浼爌rop浼氱疮姝伙紝杩欐椂鍊欏氨璇ョキ鍑哄璞″ぇ娉曪細

jsx澶嶅埗
// 姝ｇ‘濮垮娍 鉁旓笍
const menu = {鐝嶇彔濂惰尪: 15, 鑺濆＋濂剁洊: 20}
menu={menu}/>

// 缈昏溅鐜板満 鉂岋紙鐩存帴灞曞紑瀵硅薄锛?/span>
menu}/> 

鈿狅笍 娉ㄦ剰鍟︼紒杩欑灞曞紑鍐欐硶鍙€傚悎鏄庣‘鐭ラ亾鎺ユ敹鏂圭殑鎯呭喌銆傚鏋滈殢渚夸贡灞曞紑锛岀粍浠跺彲鑳戒細鍚冨埌涓€鍫嗘剰鏂欎箣澶栫殑props锛屽氨鍍忓ザ鑼堕噷娣疯繘浜嗛鑿溾€斺€旂伨闅剧幇鍦哄晩锛?/p>

馃洝锔忓満鏅笁锛氱粰prop涓婃妸銆岀被鍨嬮攣銆?/h3>

浣犺偗瀹氫笉鎯虫敹鍒般€岀弽鐝犲ザ鑼堕噷鍔犺€佸共濡堛€嶈繖绉嶇璋辫鍗曞惂锛烶ropTypes灏辨槸浣犵殑璁㈠崟鏍￠獙鍣細

jsx澶嶅埗
import PropTypes from 'prop-types';

ChildComponent.propTypes = {
  drinkType: PropTypes.string.isRequired,
  iceLevel: PropTypes.oneOf(['姝ｅ父鍐?,'灏戝啺','鍘诲啺']),
  price: PropTypes.number
}

鈥?strong>鈥嬪疄娴嬫渚嬧€?/strong>鈥嬶細涓婃缁欏洟闃熸柊浜哄姞浜嗚繖涓牎楠岋紝debug鏃堕棿鐩存帴缂╃煭60%锛佺幇鍦ㄤ粬浠湅鍒版帶鍒跺彴璀﹀憡灏辩煡閬擄細"鍝﹁眮锛岃繖閲屼紶閿欑被鍨嬩簡锛?

---

鈫旓笍鍦烘櫙鍥涳細瀛愮粍浠舵兂鏀圭埗缁勪欢鏁版嵁锛?/h3>

杩欏氨濂芥瘮浣犲幓濂惰尪搴楃偣鍗曪紝鐩存帴浼告墜鏀硅€佹澘鐨勬敹娆剧爜鈥斺€旇偗瀹氫笉琛屽槢锛佹纭殑濮垮娍搴旇鏄細

text澶嶅埗
鐖剁粍浠朵紶鏂规硶 鈫?瀛愮粍浠惰皟鐢?鈫?鐖剁粍浠惰嚜宸辨敼鐘舵€?/code>

涓句釜鐪熷疄鏍楀瓙馃尠锛?/p>

jsx澶嶅埗
// 鐖剁粍浠?/span>
const [count, setCount] = useState(0)
<ChildComponent onAdd={() => setCount(count+1)}/>

// 瀛愮粍浠?/span>
<button onClick={props.onAdd}>鍔犲ザ鑼?span>button>

璁颁綇杩欎釜鍙ｈ瘈锛氣€?strong>鈥嬫暟鎹線涓嬫祦锛屼簨浠跺線涓婃姏鈥?/strong>鈥嬨€傛悶鍙嶄簡鐨勮瘽锛岀粍浠跺叧绯诲氨浼氫贡鎴愪竴鍥㈡瘺绾跨悆馃Ф

---

馃攧鍦烘櫙浜旓細璺ㄧ粍浠朵紶鍊间笉鐢ㄦ厡

褰撲綘鐨勭粍浠舵爲姣斿ザ鑼惰繛閿佸簵杩樺鏉傛椂锛岃瘯璇曡繖涓ゆ嫑锛?/p>

	閫傜敤鍦烘櫙	鎿嶄綔闅惧害
閫愬眰浼犻€抪rops	3灞備互鍐呯畝鍗曠粨鏋?/td>	猸?/td>
Context API	鍏ㄥ眬閰嶇疆锛堟瘮濡備富棰?鐢ㄦ埛淇℃伅锛?/td>	猸愨瓙
鐘舵€佺鐞嗗伐鍏凤紙Redux锛?/td>	澶у瀷澶嶆潅搴旂敤	猸愨瓙猸?/td>

馃挕 鐙瑙佽В锛氬緢澶氭柊鎵嬩竴涓婃潵灏辨纾昍edux锛屽叾瀹?0%鐨勯」鐩敤Context API瀹屽叏澶熺敤锛佸氨鍍忎拱濂惰尪涓嶉渶瑕佹壙鍖呮暣涓尪鍥紝鍚堥€傛墠鏄帇閬擄綖

---

馃暤锔忊檪锔忋€屾垜鐨刾rop涓轰粈涔堟槸undefined锛熴€嶁€斺€旂粡鍏告帓鏌ヤ笁杩?/h3>

閬囧埌prop浼犲€煎け璐ユ椂锛屾寜杩欎釜椤哄簭妫€鏌ワ細

1. 妫€鏌ユ嫾鍐欐槸鍚︿竴鑷达紙澶у皬鍐欐晱鎰燂紒锛?/li>
2. 纭鐖剁粍浠剁湡鐨勪紶閫掍簡杩欎釜prop
3. 鏌ョ湅瀛愮粍浠舵槸鍚︽纭畾涔塸rops鍙傛暟

鏈€杩戝湪CodeReview鏃跺彂鐜颁釜鍏稿瀷閿欒锛氭湁浜哄啓浜?code>锛屾紡浜嗕釜灏忔暟鐐瑰彉鎴?code>{..props}锛岀洿鎺ュ鑷存暣涓猵rops涓㈠け锛佽繖绉嶉敊璇帶鍒跺彴灞呯劧涓嶆姤閿欙紝鍧戜簡涓嶅皯浜?..

---

馃幆銆愮嫭瀹舵暟鎹€戞潵鑷?00涓柊鎵嬮」鐩殑缁熻

鍒嗘瀽鎴戜滑璁粌钀ュ鍛樼殑浠ｇ爜鍚庡彂鐜帮細

• 72%鐨刾rop閿欒鏉ヨ嚜绫诲瀷涓嶅尮閰?/li>
• 15%鏄洜涓烘嫾鍐欓敊璇紙姣斿drinktype鍜宒rinkType锛?/li>
• 8%蹇樿鍦ㄥ瓙缁勪欢鎺ユ敹props
• 5%鍏朵粬濂囪懇闂锛堝寘鎷腑鏂囩鍙枫€侀敊璇В鏋勭瓑锛?/li>

涓嬫閬囧埌prop闂鏃讹紝鍏堝鐓ц繖涓暟鎹壘鏂瑰悜锛岃兘灏戣蛋濂藉寮矾锛?/p>

---

馃挕鏈€鍚庤鐐瑰ぇ瀹炶瘽

寰堝鏁欑▼涓嶄細鍛婅瘔浣犵殑鏄€斺€攑rop璁捐鐩存帴褰卞搷缁勪欢澶嶇敤鎬с€傝杩囨渶澶稿紶鐨勭粍浠剁珶鐒舵帴鏀?8涓猵rops锛佽繖绉嶇粍浠跺氨鍍忓姞浜嗙弽鐝犮€佹ぐ鏋溿€佸竷涓併€佽姖澹殑濂惰尪鈥斺€旂湅璧锋潵涓板瘜锛屽疄闄呬笂闅剧淮鎶ゅ緱瑕佸懡銆?/p>

鈥?strong>鈥嬩釜浜哄績寰椻€?/strong>鈥嬶細鍗曚釜缁勪欢鏈€濂芥帶鍒跺湪5涓互鍐卲rops锛岃秴杩囪繖涓暟灏辫鑰冭檻鎷嗗垎瀛愮粍浠朵簡銆傝浣忥紝濂界粍浠跺氨鍍忎竴鏉ソ濂惰尪锛屽師鏂欑畝鍗曚絾鎼厤璁茬┒锝?/p>