---
涓€銆佸垵鎺SX鍙婂叾鍦≧eact涓殑濂囧浣滅敤
1.1 JSX鐨勭畝浠?/p>
JSX锛岃瑾変负JavaScript涓嶺ML鐨勭編濡欑粨鏅讹紝鏄疪eact妗嗘灦涓竴绉嶇嫭鐗圭殑璇硶鎵╁睍銆傚畠涓哄紑鍙戣€呮彁渚涗簡涓€绉嶄互绫籜ML鐨勬柟寮忔潵濉戦€犵粴涓藉褰╃殑鐢ㄦ埛鐣岄潰銆傛兂璞′竴涓嬶紝浣犺兘澶熺洿鎺ュ湪JavaScript鐨勬捣娲嬩腑鐣呮父锛屽悓鏃舵尌娲扝TML鐨勯瓟娉曪紝JSX渚夸负浣犲紑鍚簡杩欐墖绁炵涔嬮棬銆傚畠涓嶄粎浠呯畝鍖栦簡浠ｇ爜鐨勭粨鏋勶紝鏇村湪鏌愮绋嬪害涓婃彁鍗囦簡寮€鍙戠殑鏁堢巼锛岃缂栫▼鍙樺緱鏇村姞鐩磋鍜屾湁瓒ｃ€?/p>
1.2 JSX涓嶫avaScript鐨勫崈涓濅竾缂?/p>
铏界劧JSX浼间箮甯︽湁涓€浜涚绉樼殑鑹插僵锛屼絾瀹冨叾瀹炰笌JavaScript绱у瘑鐩歌繛銆傛墍鏈夌殑JSX浠ｇ爜鍦ㄨ繍琛屾椂閮戒細琚阀濡欏湴杞崲涓烘垜浠墍鐔熸倝鐨勬櫘閫欽avaScript瀵硅薄銆傝繖绉嶈浆鎹㈡満鍒剁‘淇濅簡浠ｇ爜鐨勯珮鏁堟墽琛岋紝鍚屾椂鍊熷姪浜咼avaScript鐨勫己澶у姛鑳斤紝璁╀唬鐮佹棦娓呮櫚鍙堢洿瑙傘€傝繖灏卞儚鏄竴鍦洪瓟娉曡〃婕旓紝JSX浣滀负涓昏锛岃€孞avaScript鍒欐槸瀹冧笉鍙垨缂虹殑鍔╂墜銆?/p>
1.3 浣跨敤JSX鐨勯瓍鍔涙墍鍦?/p>
鉁ㄤ唬鐮佸彲璇绘€э細JSX璇硶鐨勭畝娲佹爣绛剧粨鏋勶紝濡傚悓涓€寮犳竻鏅扮殑鍦板浘锛岃浣犲浠ｇ爜鐨勭粨鏋勪竴鐩簡鐒躲€?/p>
馃殌寮€鍙戞晥鐜囷細鍒╃敤绫籋TML鐨勮娉曪紝寮€鍙戣€呰兘澶熸洿蹇瀯寤哄拰淇敼缁勪欢锛屽噺灏戜簡绻佺悙鐨勫瓧绗︿覆鎿嶄綔锛屼豢浣涙墜鎻′竴鎶婄濂囩殑鍓戙€?/p>
馃寛闆嗘垚鎬э細JSX鏃犵紳鍦颁笌JavaScript浜よ瀺锛岃鏁版嵁缁戝畾銆佷簨浠跺鐞嗙瓑鎿嶄綔鏇村姞寰楀績搴旀墜锛屽鍚屽湪鑸炲彴涓婅嚜鐢辫垶韫堢殑鑸炶€呫€?/p>
浜屻€佹彮寮€JSX鍩虹璇硶鐨勭绉橀潰绾?/h3>
2.1 鎺㈢储JSX鍏冪礌鐨勫熀鏈粨鏋?/p>
---
绗簩绔?JSX鏍稿績鐗规€х殑娣卞叆鐞嗚В
2.2 JSX灞炴€х殑鐏垫椿搴旂敤
鍦↗SX涓紝灞炴€т笌HTML涓殑浣跨敤鏂瑰紡鏈夊紓鏇插悓宸ヤ箣濡欍€傛兂璞′竴涓嬶紝濡傛灉浣犳兂鍞竴鏍囪瘑涓€涓厓绱狅紝浣犲彲浠ュ埄鐢╧ey灞炴€ф潵瀹炵幇銆傛兂璞′竴涓嬩綘鍦ㄦ瀯寤轰竴涓垪琛ㄧ粍浠讹紝姣忎釜鍏冪礌閮芥湁涓€涓嫭鐗圭殑鏍囪瘑锛岃繖鍙樺緱杞昏€屾槗涓俱€?/p>
```javascript
function List() {
const items = ['Apple', 'Banana', 'Cherry'];
return (
{items.map(item => (
{item} // 杩欓噷浣跨敤灞炴€у睍绀烘瘡涓厓绱犵殑鍐呭
))}
);
}
```
杩欑灞炴€х殑搴旂敤浣垮緱缁勪欢闂寸殑浜や簰鏇翠负鐩磋鍜岀畝娲併€?/p>
2.3 JSX涓殑鏉′欢涓庡惊鐜€昏緫
JSX鍏佽浣犲湪鏍囩鍐呴儴鐩存帴浣跨敤鏉′欢璇彞鍜屽惊鐜鍙ワ紝璁╅€昏緫澶勭悊鏇翠负鐩磋銆傛兂璞′竴涓嬩綘鍦ㄥ睍绀轰竴涓敤鎴蜂俊鎭紝鍙湁鐢ㄦ埛淇℃伅瀛樺湪鏃舵墠鏄剧ず濮撳悕锛屽惁鍒欎笉鏄剧ず銆傛棤璁虹敤鎴蜂俊鎭槸鍚﹀瓨鍦紝閮戒細鏄剧ず鐢ㄦ埛鐨勭數瀛愰偖浠躲€傝繖鏍风殑閫昏緫澶勭悊鍦↗SX涓彉寰楅潪甯哥畝鍗曘€?/p>
```javascript
function User({ info }) {
return (
{info && Name: {info.name} } // 浣跨敤鏉′欢璇彞鍒ゆ柇鏄惁闇€瑕佹樉绀哄鍚?/p>
Email: {info.email} // 涓嶈info鏄惁瀛樺湪閮戒細鏄剧ず鐢靛瓙閭欢淇℃伅
);
}
```
杩欑缁撳悎浣垮緱JSX鏇村姞鐏垫椿鍜屽己澶с€?/p>
绗笁绔?JSX楂樼骇鐗规€х殑鎺㈢储涔嬫梾
3.1 JSX缁勪欢鐨勫ゥ绉樹笌搴旂敤
鍦≧eact涓紝缁勪欢鏄竴绉嶉伒寰壒瀹氱粨鏋勭殑JSX鍑芥暟銆備緥濡傦紝涓€涓畝鍗曠殑闂€欑粍浠跺拰涓€涓鍣ㄧ粍浠剁殑瀹氫箟鍜屼娇鐢ㄦ柟寮忓涓嬶細
```javascript
function Greeting({ name }) {
return Hello, {name}!;;
}
function Container() {
return ... ; // 鍐呴儴鍙兘鍖呭惈澶氫釜缁勪欢鍜屽叾浠栧唴瀹?/p>
}
---
4.2 浣跨敤JSX鎵撻€犵偒閰风晫闈?/p>
璁╂垜浠潵鍒涘缓涓€涓猅odo搴旂敤鐨勫舰寮忕晫闈€傛兂璞′竴涓嬶紝鐢ㄦ埛鑳藉杞绘澗鍦拌繘琛屽緟鍔炰簨椤圭殑娣诲姞銆佸畬鎴愬拰鍒犻櫎鎿嶄綔銆?/p>
`TodoForm`缁勪欢锛岀畝娲佽€岀洿瑙傦細
```jsx
function TodoForm(props) {
return (
// 鐢ㄦ埛鍦ㄧ偣鍑诲悗锛屽皢鍚姩娣诲姞寰呭姙浜嬮」鐨勬祦绋嬨€?/p>
);
}
```
鍐嶆潵鐪媊TodoList`缁勪欢锛屽畠鍔ㄦ€佸湴灞曠ず鎵€鏈夌殑寰呭姙浜嬮」锛?/p>
```jsx
function TodoList(props) {
return (
{props.todos.map(todo => (
// 浣跨敤鐙壒鐨処D浣滀负姣忎釜鍒楄〃椤圭殑key锛岀‘淇漅eact鑳藉楂樻晥鏇存柊鐣岄潰銆?/li>
{todo.text} // 鏄剧ず寰呭姙浜嬮」鐨勫唴瀹广€?/p>
// 瀹屾垚寰呭姙浜嬮」銆?/p>
// 鍒犻櫎寰呭姙浜嬮」銆?/p>
))}
);
}
```
4.3 鏁版嵁浜や簰涓庝簨浠跺鐞嗚繘闃?/p>
鎺ヤ笅鏉ワ紝鎴戜滑灏嗘瀯寤轰竴涓洿瀹屾暣鐨凾odo搴旂敤锛屽姞鍏ユ暟鎹氦浜掑拰浜嬩欢澶勭悊鍔熻兘銆傛垜浠皢浣跨敤React鐨勭姸鎬佺鐞嗗姛鑳芥潵瀹炵幇杩欎簺鍔熻兘銆?/p>
`TodoApp`缁勪欢缁ф壙鑷猔React.Component`锛屽畠鎷ユ湁绠＄悊寰呭姙浜嬮」鐨勭姸鎬佸拰鏂规硶锛?/p>
```jsx
class TodoApp extends React.Component {
constructor(props) {
super(props); // 璋冪敤鐖剁被鐨勬瀯閫犲嚱鏁般€傚垵濮嬪寲缁勪欢鐨勭姸鎬侊紝鍖呮嫭寰呭姙浜嬮」鍒楄〃鍜岃緭鍏ユ鐨勫€笺€?/p>
6.2 娣卞叆鎺㈢储杩涢樁瀛︿範璧勬簮
闅忕潃浣犲React鐨勯€愭笎娣卞叆锛岄櫎浜嗗熀纭€璇硶涔嬪锛屼綘鏇存繁鍏ュ湴浜嗚В浜嗙粍浠堕棿鐨勯€氫俊涓庣姸鎬佺鐞嗕互鍙奐SX鐨勫疄闄呭簲鐢ㄣ€傞偅涔堬紝瀵逛簬杩涢樁瀛︿範璧勬簮锛屾垜鏈変互涓嬫帹鑽愶細
鍦ㄧ嚎璇剧▼鎺ㄨ崘锛氭厱璇剧綉涓婄殑React瀛︿範璧勬簮涓板瘜澶氭牱锛屼粠鍩虹鍒拌繘闃舵暀绋嬩竴搴斾勘鍏紝瀹冧滑灏嗗府鍔╀綘绯荤粺鍦版繁鍖栫悊瑙ｃ€傛瘡涓€涓暀绋嬮兘鏄疄鎴樺鍚戯紝涓轰綘鐨勫涔犱箣璺娣诲姩鍔涖€?/p>
瀹樻柟鏂囨。涓庢妧鏈崥瀹細React瀹樼綉鏄幏鍙栨渶鏂版妧鏈俊鎭拰缁嗚妭鐨勬渶浣冲満鎵€銆傜浉鍏虫妧鏈崥瀹㈡彁渚涗簡浼楀涓撳鐨勬繁鍏ュ垎鏋愬拰鏈€浣冲疄璺碉紝杩欎簺璧勬簮鏃犵枒浼氭垚涓轰綘瀛︿範鍜屽弬鑰冪殑瀹濆簱銆?/p>
6.3 鎺ヤ笅鏉ュ浣曟洿涓婁竴灞傛ゼ
浣犲凡缁忔帉鎻′簡React鐨勫熀纭€鐭ヨ瘑锛岄偅涔堜笅涓€姝ョ殑瀛︿範璁″垝涓庡缓璁槸浠€涔堝憿锛?/p>
瀛︿範Hooks锛歊eact Hooks灏嗗府鍔╀綘鏇存湁鏁堝湴绠＄悊鐘舵€佸拰鍓綔鐢紝涓轰綘鐨勫紑鍙戝鏉傛暟瀛楀簲鐢ㄧ殑鑳藉姏鍔犳寔銆備簡瑙ｅ浣曚娇鐢╱seState銆乽seEffect绛塇ooks锛屽皢澶уぇ鎻愬崌浣犵殑寮€鍙戞晥鐜囧拰浠ｇ爜璐ㄩ噺銆?/p>
鎬ц兘浼樺寲锛氫负浜嗘瀯寤洪珮鏁堛€佹祦鐣呯殑React搴旂敤锛屼簡瑙ｅ浣曡繘琛屾€ц兘浼樺寲鑷冲叧閲嶈銆備粠鏈嶅姟鍣ㄧ娓叉煋鍒版噿鍔犺浇绛夋妧鏈紝鎺屾彙杩欎簺鎶€宸у皢浣夸綘鐨勫簲鐢ㄦ洿鍔犱紭绉€銆?/p>
瀹炴垬椤圭洰锛氱湡姝ｇ殑杩涙鏉ヨ嚜浜庡疄璺点€傚弬涓庢垨鍒涘缓鏇村鐨凴eact椤圭洰锛屽皢鎵€瀛︾煡璇嗗簲鐢ㄥ埌瀹為檯鍦烘櫙涓紝绉疮瀹炴垬缁忛獙锛岃浣犵殑鎶€鑳芥洿涓婁竴灞傛ゼ銆?/p>
鎸佺画瀛︿範鍜屽疄璺碉紝浣犲皢鏇村姞鐔熺粌鍦拌繍鐢↗SX鍜孯eact鏋勫缓楂樻晥銆佸姩鎬佺殑Web搴旂敤锛屽紑鍚綘鐨勫墠绔紑鍙戣€呬箣鏃咃紒 |
