浣跨敤 React 涓€骞村悗锛屾垜瀛﹀埌鐨勬渶閲嶈缁忛獙

Posted 2021-04-26 鍓嶇澶у叏

鑻辨枃锛?Tomas Eglinskas   璇戞枃锛歨hking 

blog.hhking.cn/2018/09/12/mindset-lessons-from-a-year-with-react/

No, I didn鈥檛 wrote that, but I know it got your attention 馃敧

寮€濮嬪涔犱竴椤规柊鐨勬妧鏈椂鍊欎护浜哄緢鑻︽伡銆備綘缁忓父鍙戠幇鑷繁澶勪簬鏁欑▼鍜屾枃绔犵殑娴锋磱閲岋紝杩樹即闅忕潃鏃犳暟鐨勪釜浜鸿鐐广€傚苟涓旀瘡涓汉閮藉０绉颁粬浠壘鍒颁簡鈥滄纭€屽畬缇庣殑鏂瑰紡鈥濄€?/span>

杩欒鎴戜滑闇€瑕佸幓杈ㄥ埆锛氭垜浠€夋嫨鐨勬暀绋嬫槸鍚︿細娴垂鏃堕棿銆?/span>

鍦ㄦ綔鍏ヨ繖鐗囨捣娲嬩箣鍓嶏紝鎴戜滑蹇呴』瑕佺悊瑙ｈ鎶€鏈殑鍩烘湰姒傚康銆傜劧鍚庢垜浠渶瑕佸缓绔嬪熀浜庢妧鏈殑鎬濈淮妯″紡銆傚鏋滄垜浠紑濮嬪涔?React锛屾垜浠鍏堣浠?React 鐨勬柟寮忓幓鎬濊€冦€傚悗闈㈡垜浠墠鍙互寮€濮嬪皢鍚勭鎬濈淮妯″紡铻嶄负涓€浣撱€?/span>

鍦ㄨ繖绡囨枃绔狅紝鎴戝皢浠庝釜浜轰娇鐢?React 鐨勭粡鍘嗘潵浠嬬粛浠庝腑瀛﹀埌鐨勪竴浜涘叧浜庤繖绉嶆€濈淮鐨勭粡楠屻€傛垜浠皢鍥為【宸ヤ綔鏃堕棿鍜屽仛涓汉椤圭洰鐨勫鏅氾紝鐢氳嚦鎴戝湪鏈湴 JavaScript 娲诲姩涓殑婕旇銆?/span>

鎴戜滑寮€濮嬪惂锛?/span>

React 鍦ㄤ笉鏂彂灞曪紝浣犻渶瑕佷笌鏃朵勘杩?/span>

濡傛灉浣犺寰?16.3.0 鐗堟湰鐨勯娆″叕鍛婏紝浣犱細鎯宠捣褰撴椂澶у鏄涔堢殑婵€鍔ㄣ€?/span>

涓嬮潰鏄垜浠湅鍒扮殑涓€浜涘彉鍖栧拰鎻愬崌锛?/span>

• Official Context API

• createRef API

• forwardRef API

• StrictMode

• Component Lifecycle Changes

React 鐨勬牳蹇冨洟闃熷拰鎵€鏈夌殑璐＄尞鑰呮鍦ㄥ仛鐫€浼熷ぇ鐨勫伐浣?鈥斺€?鍔姏鏀硅繘鎴戜滑鎵€鍠滅埍鐨勬妧鏈€傚湪 16.4.0 鐗堟湰鎴戜滑鐪嬪埌浜?Pointer Events銆?/span>

姣棤鐤戦棶鏇村鐨勫彉鍖栧皢浼氭潵涓达紝杩欏彧鏄椂闂撮棶棰橈細寮傛娓叉煋 (Async Rendering)銆佺紦瀛?(Caching) 銆乿ersion 17.0.0 浠ュ強鍏朵粬鏈煡鐨勩€?/span>

鎵€浠ワ紝濡傛灉浣犳兂鎴愪负浣间郊鑰咃紝浣犲繀椤荤揣璺熺潃绀惧尯閲屽彉鍖栫殑鑴氭銆?/span>

浜嗚В浜嬬墿鐨勫伐浣滃師鐞嗭紝浠ュ強琚紑鍙戝嚭鏉ョ殑鍘熷洜銆備簡瑙ｆ鍦ㄨВ鍐崇殑闂锛屼互鍙婂紑鍙戞槸濡備綍鍙樺緱瓒婃潵瓒婄畝鍗曘€傝繖浼氳浣犲彈鐩婂尓娴呫€?/span>

涓嶈瀹虫€曟妸浣犵殑浠ｇ爜鎷嗗垎鎴愭洿灏忕殑鍧?/span>

React 鏄熀浜庣粍浠剁殑銆傛墍浠ヤ綘搴旇鍒╃敤杩欎釜姒傚康锛岃€屼笉鏄鎬曟妸澶х殑妯″潡鎷嗗垎鏇村皬鐨勬ā鍧椼€?/span>

鏈夋椂鍊欙紝涓€涓畝鍗曠殑缁勪欢鍙兘鍙湁 4-5 琛屼唬鐮侊紝鍦ㄦ煇浜涙儏鍐典笅锛岃繖瀹屽叏娌℃湁闂銆?/span>

杩欐牱鍋氾紝鍙互璁╂柊浜哄姞鍏ユ椂锛屼笉闇€瑕佽姳鍑犲ぉ鐨勬椂闂村幓鐞嗚В杩欎簺浠ｇ爜鏄浣曡繍琛岀殑銆?/span>

// isn't this easy to understand?

return (

  [

   <ChangeButton

    onClick={this.changeUserApprovalStatus}

    text="Let鈥檚 switch it!"

   />,

   <UserInformation status={status}/>

  ]

);

浣犱笉蹇呰缁勪欢閮藉寘鍚鏉傜殑閫昏緫銆傚畠浠彲浠ュ彧褰撹瑙夌粍浠躲€傚鏋滆繖鏍峰彲浠ユ彁楂樹唬鐮佺殑鍙鎬у拰鏂逛究娴嬭瘯锛屽苟鍑忓皯浠ｇ爜鐨勨€滃潖鍛抽亾鈥濓紝閭ｄ箞瀵瑰洟闃熺殑姣忎釜浜烘潵璇撮兘鏄釜浼熷ぇ鐨勮儨鍒┿€?/span>

import ErrorMessage from './ErrorMessage';

const NotFound = () => (

  <ErrorMessage

    title="Oops! Page not found."

    message="The page you are looking for does not exist!"

    className="test_404-page"

  />

);

涓婇潰杩欎釜渚嬪瓙锛屽睘鎬ч兘鏄浐瀹氱殑銆傛墍浠ユ垜浠彲浠ユ湁涓函缁勪欢鎺у埗缃戠珯鐨勯敊璇俊鎭?Not Found锛屼粎姝よ€屽凡銆?/span>

骞朵笖锛屽鏋滀綘涓嶅枩娆?CSS 鐨?class 閫夋嫨鍣ㄤ綔涓?class 鍚嶅埌澶勯兘鏄紝鎴戜細鎺ㄨ崘浣跨敤 styled components銆傝繖鏍峰彲浠ユ彁楂樺彲璇绘€с€?/span>

const Number = styled.h1`

  font-size: 36px;

  line-height: 40px;

  margin-right: 5px;

  padding: 0px;

`;

//..

<Container>

  <Number>{skipRatePre}</Number>

  <InfoName>Skip Rate</InfoName>

</Container>

濡傛灉浣犳媴蹇冨垱寤哄お澶氱粍浠舵槸鍥犱负澶鏂囦欢浼氭薄鏌撶洰褰曪紝閭ｄ箞閲嶆柊鑰冭檻濡備綍鏋舵瀯浣犵殑浠ｇ爜銆傛垜涓€鐩村湪浣跨敤鍒嗗舰缁撴瀯 (fractal structrue)锛屽畠闈炲父妫掋€?/span>

涓嶈灞€闄愪簬鍩虹 鈥斺€?杞悜楂樼骇

鏈夋椂浣犲彲鑳戒細璁や负浣犲鏌愪簺涓滆タ鐞嗚В涓嶅锛屼笉鑳借浆鍚戦珮绾у簲鐢ㄣ€備絾鏄€氬父浣犱笉蹇呰繃澶氭媴蹇?鈥斺€?鎺ュ彈鎸戞垬骞惰瘉鏄庤嚜宸辩殑鎷呭績鏄敊鐨勩€?/span>

閫氳繃鎺屾彙楂樼骇鍐呭骞舵帹鍔ㄤ綘鑷繁锛屼綘鍙互鐞嗚В鏇村鍩虹鐭ヨ瘑浠ュ強濡備綍灏嗕粬浠繍鐢ㄥ湪鏇村ぇ鐨勯」鐩笂銆?/span>

杩欓噷鏈夎澶氭ā寮忓彲浠ュ皾璇曪細

• 澶嶅悎缁勪欢锛圕ompound Components锛?/span>

• 楂橀樁缁勪欢 锛圚igh Order Components锛?/span>

• Render Props

• Smart/Dumb 缁勪欢 锛圫mart/Dumb Components锛?/span>

• 绛夌瓑 (灏濊瘯鍘诲垎鏋?

鍘荤爺绌朵粬浠紝浣犱細鐭ラ亾涓轰粈涔堜娇鐢ㄥ畠浠€佸湪鍝噷浣跨敤瀹冧滑銆傜敤璧?React 浣犱細鎰熻鏇村姞寰楀績搴旀墜銆?/span>

// looks like magic?

// it's not that hard when you just try

render() {

  const children = React.Children.map(this.props.children,

   (child, index) => {

      return React.cloneElement(child, {

        onSelect: () => this.props.onTabSelect(index)

    });    

});  

return children;

}

鍚屾椂锛屼笉瑕佸鎬曞湪宸ヤ綔涓娇鐢ㄦ柊涓滆タ 鈥斺€?褰撶劧锛屽湪涓€瀹氳寖鍥村唴銆?/span>

鏈変汉鍙兘浼氳川鐤戯紝杩欏緢姝ｅ父銆備綘鐨勪换鍔″氨鏄敤寮烘湁鍔涚殑璇佹嵁鏉ユ崓鍗綘鐨勫伐浣滃拰鍐冲畾銆?/span>

浣犵殑鐩爣搴旇鏄В鍐崇幇鏈夌殑闂锛岃鍚庣画寮€鍙戞洿绠€鍗曪紝鎴栬€呮竻鐞嗕竴浜涢潰鏉″紡浠ｇ爜銆傚嵆浣夸綘鐨勫缓璁鎷掔粷锛屼綘鐨勬敹鑾蜂篃浼氭瘮淇濇寔娌夐粯寰楀埌鐨勬洿澶氥€?/span>

涓嶈杩囧害澶嶆潅

杩欎釜鍚捣鏉ュ儚鏄釜鐩稿弽鐨勮鐐癸紝浣嗘槸鏈夋墍涓嶅悓銆傚湪鐢熸椿涓紝鍚勪釜鍦版柟锛屾垜浠兘闇€瑕佷繚鎸佸钩琛°€傛垜浠笉搴旇杩囧害璁捐鏉ョ偒鑰€锛岃€屾槸瑕佸姟瀹烇紝缂栧啓鏄撲簬鐞嗚В骞跺疄鐜板叾鍔熻兘鐨勪唬鐮併€?/span>

濡傛灉浣犱笉闇€瑕?Redux锛屼絾鏄綘鎯充娇鐢ㄥ畠锛屽洜涓哄緢澶氫汉閮藉湪涓嶇煡閬撳畠鐪熸鐢ㄩ€旂殑鎯呭喌涓嬩娇鐢ㄥ畠銆備綘涓嶈杩欐牱鍋氥€傝鏈夎嚜宸辩殑涓诲紶锛屽鏋滄湁浜烘帹鍊掍綘锛屼笉瑕佸鎬曠珯璧锋潵銆?/span>

鏈夋椂鍊欎綘鍙兘浼氭兂锛岄€氳繃浣跨敤鏈€鏂扮殑鎶€鏈苟缂栧啓澶嶆潅鐨勪唬鐮侊紝浣犲彲浠ュ悜涓栫晫瀹ｇО锛氣€滄垜涓嶆槸鍒濈骇锛屾垜鏄腑绾?楂樼骇寮€鍙戣€呫€傜湅鐪嬫垜鑳藉仛浠€涔堬紒鈥?/span>

鑰佸疄璇达紝杩欎究鏄垜寮€鍙戣€呯敓娑垵鏈熺殑蹇冩€併€備絾鏄殢鐫€鏃堕棿鐨勬帹绉伙紝浣犱細鏄庣櫧锛屼笉涓虹偒鑰€銆佲€滆兘瀹炵幇鈥濈殑浠ｇ爜鏇村鏄撴帴鍙椼€?/span>

1. 浣犵殑鍚屼簨鍙互鎺ユ墜浣犵殑椤圭洰锛屼綘涓嶆槸鍞竴璐熻矗寮€鍙戙€佷慨澶嶃€佹祴璇曞伐浣滅殑浜恒€?/span>

2. 鍥㈤槦鍙互涓嶉渶瑕侀€氳繃闀挎椂闂寸殑浼氳灏辩煡閬撳叾浠栦汉鍋氱殑浜嬫儏銆傚嚑鍒嗛挓璁ㄨ灏辫冻澶熶簡銆?/span>

3. 褰撲綘鍚屼簨澶栧嚭搴﹀亣涓ゅ懆鏃讹紝浣犲彲浠ユ帴鎵嬩粬浠殑宸ヤ綔銆傝€屼笖浣犱笉闇€瑕佸伐浣?8 灏忔椂锛屽洜涓轰綘 1 灏忔椂灏卞彲浠ユ悶瀹氥€?/span>

浜轰滑灏婇噸璁╁埆浜虹敓娲绘洿杞绘澗鐨勪汉銆傚洜姝ゅ鏋滀綘鐨勭洰鏍囨槸鑾峰緱鍒汉鐨勫皧鏁€佹彁鍗囨帓鍚嶃€佹彁鍗囪嚜宸憋紝閭ｄ箞浣犲簲璇ヤ负鍥㈤槦鑰屼笉鏄负浣犺嚜宸辩紪鍐欎唬鐮併€?/span>

浣犱細鎴愪负澶у鏈€鍠滄鐨勫洟闃熸垚鍛樸€?/span>

閲嶆瀯锛岄噸鏋勶紝鍐嶉噸鏋?鈥斺€?杩欐槸姝ｅ父鐨勩€?/span>

浣犲彲鑳戒細鍑犲崄娆＄殑鏀瑰彉鎯虫硶锛岃櫧鐒堕」鐩粡鐞嗘敼鍙樺緱鏇撮绻併€傛湁浜轰細璇勮浣犵殑宸ヤ綔锛屼綘涔熶細璇勮浠栥€傛墍浠ョ粨鏋滄槸锛屼綘灏嗕細寰堝娆＄殑淇敼浣犵殑浠ｇ爜銆?/span>

浣嗘槸鍒媴蹇冿紝杩欐槸涓甯哥殑瀛︿範杩囩▼銆備笉鐘敊銆佷唬鐮佷笉鎶ラ敊锛屾垜浠氨鏃犳硶鎻愬崌鑷繁銆?/span>

璺屽€掔殑娆℃暟瓒婂锛岄噸鏂扮珯璧锋潵灏卞彉寰楄秺瀹规槗銆?/span>

浣嗘槸杩欓噷鏈変釜鎻愰啋锛氫綘瑕佷繚璇佸幓娴嬭瘯浣犵幇鍦ㄧ殑杞欢銆傚啋鐑熸祴璇曘€佸崟鍏冩祴璇曘€侀泦鎴愭祴璇曘€佸揩鐓ф祴璇?鈥斺€?鍒笉濂芥剰鎬濆幓娴嬭瘯銆?/span>

姣忎釜浜洪兘鐪嬪埌鎴栬€呭皢浼氱湅鍒版祴璇曞彲浠ヨ妭绾﹀疂璐垫椂闂寸殑鍦烘櫙銆?/span>

濡傛灉浣犲拰寰堝浜轰竴鏍凤紝閮借涓哄仛杩欎簺鏄氮璐规椂闂达紝璇曠潃浠ヤ笉鍚岀殑瑙掑害鎯充竴鎯炽€?/span>

1. 浣犱笉闇€瑕佸拰浣犲悓浜嬩竴璧峰悜浠栬В閲婃槸濡備綍宸ヤ綔鐨勩€?/span>

2. 浣犱笉闇€瑕佸拰浣犲悓浜嬩竴璧峰悜浠栬В閲婁负浣曚細鍑虹幇閿欒銆?/span>

3. 浣犱笉闇€瑕佸府浣犲悓浜嬩慨 bug銆?/span>

4. 浣犱笉闇€瑕佷慨 3 鍛ㄥ悗鎵嶅彂鐜扮殑 bug銆?/span>

5. 浣犲皢鏈夋椂闂村仛浣犳兂鍋氱殑浜嬫儏銆?/span>

杩欎簺閮芥槸鏈夊緢澶氱泭澶勭殑銆?/span>

濡傛灉浣犲枩娆㈠畠锛屼綘浼氫笉鏂垚闀?/span>

鍦ㄨ繃鍘荤殑涓€骞撮噷锛屾垜鐨勭洰鏍囨槸鏇村ソ鐨勪娇鐢?React銆傛垜鎯冲仛涓€涓叧浜庡畠鐨勬紨璁层€傛垜鎯冲叾浠栦汉鍜屾垜涓€鏍蜂韩鍙楀畠銆?/span>

鎴戝彲浠ヤ笉鍋滄瓏鐨勬暣鏅氬潗鍦ㄩ偅缂栫▼锛岃鐪嬪悇绉嶆紨璁插苟浜彈姣忎竴鍒嗛挓銆?/span>

浜嬪疄鏄紝褰撲綘鎯宠浠€涔堬紝浣犱細鍙戠幇锛屼笉鐭ユ€庝箞鐨勫氨浼氭湁浜哄紑濮嬪府鍔╀綘銆傚湪涓婁釜鏈堬紝鎴戜负 200 浜哄仛浜嗛娆″叧浜?React 鐨勬紨璁层€?/span>

鍦ㄨ繖杩囧幓鐨勪竴骞撮噷锛屾垜鍙樺緱鏇村姞寮哄ぇ锛孯eact 鐢ㄥ緱鏇村姞寰楀績搴旀墜 鈥斺€?鍚勭妯″紡锛岃寖寮忓拰鍐呴儴鍘熺悊銆傛垜鍙互杩涜楂樼骇鍐呭鐨勮璁哄苟鍚戝埆浜鸿鎺堟垜涔嬪墠瀹虫€曟帴瑙︾殑璇濋銆?/span>

浠婂ぉ鎴戜緷鏃ф劅鍒板叴濂嬪拰浜彈锛屼竴濡備竴骞村墠鐨勬劅鍙椼€?/span>

鍥犳锛屾垜寤鸿姣忎釜浜洪兘闂棶鑷繁锛氣€滀綘鏄惁鍠滄浣犲湪鍋氱殑浜嬫儏锛熲€?/span>

濡傛灉涓嶅枩娆紝閭ｅ氨缁х画瀵绘壘浣犲彲浠ヨ皥璁哄嚑涓皬鏃躲€佹瘡鏅氬涔犲苟涓斾娇浣犲紑蹇冪殑閭ｄ釜鐗瑰埆鐨勪簨鎯呫€?/span>

鍥犱负鎴戜滑蹇呴』鎵惧埌鏈€鎺ヨ繎鎴戜滑鍐呭績鐨勪笢瑗裤€傛垚鍔熶笉鑳藉己杩紝鑰屾槸涓诲姩鑾峰彇銆?/span>

濡傛灉鎴戝彲浠ュ洖鍒颁竴骞村墠锛岄偅涔堝湪杩涜杩欎釜澶х殑鏃呯▼涔嬪墠锛岃繖浜涘氨鏄垜鎯冲鑷繁璇寸殑銆?/span>

Thank you for reading!

銆愬叧浜庢姇绋裤€?/p>

濡傛灉澶у鏈夊師鍒涘ソ鏂囨姇绋匡紝璇风洿鎺ョ粰鍏彿鍙戦€佺暀瑷€銆?/p>

鈶?nbsp;鐣欒█鏍煎紡锛?/span>
銆愭姇绋裤€?銆?nbsp;鏂囩珷鏍囬銆? 鏂囩珷閾炬帴

鈶?nbsp;绀轰緥锛?/span>
銆愭姇绋裤€戙€婁笉瑕佽嚜绉版槸绋嬪簭鍛橈紝鎴戝崄澶氬勾鐨?nbsp;IT 鑱屽満鎬荤粨銆嬶細http://blog.jobbole.com/94148/

鈶?nbsp;鏈€鍚庤闄勪笂鎮ㄧ殑涓汉绠€浠嬪搱~

瑙夊緱鏈枃瀵逛綘鏈夊府鍔╋紵璇峰垎浜粰鏇村浜?/span>

鍏虫敞銆屽墠绔ぇ鍏ㄣ€嶏紝鎻愬崌鍓嶇鎶€鑳?/span>