鍋氬墠绔殑涓�瀹氶兘鐭ラ亾鐜板湪鏄笁澶ф鏋垛�斺�擵ue銆丷eact銆丄ngular涓夎冻榧庣珛鐨勬椂浠ｃ�俈ue鏄叕璁ょ殑鏈�瀹规槗鍏ラ棬鐨勶紝鍥犱负瀹冩枃浠剁粨鏋勪笂鏈変紶缁熺殑HTML鐨勫奖瀛愶紝璁╁垰鎺ヨЕ瀹冪殑鍓嶇浜哄憳鍒氬埌寰堚�滀翰鍒団�濄�侫ngular铏界劧涔熸湁淇濈暀HTML锛屼絾瀹冨嵈鏄渶闅惧叆闂ㄧ殑锛岀┒鍏跺師鍥犲彲鑳藉拰浠栨槸鐢盙oogle鐨勫悗绔▼搴忓憳寮�鍙戠殑锛屽張鏄敤鐨勭函Typescript锛屽紓姝ヤ娇鐢≧xjs锛屽浜庡墠绔柊浜烘潵璇撮棬妲涘お楂樸�俁eact鍏ラ棬闅惧害閫備腑锛岀綉涓婂悇绉嶈█璁鸿React涓婃墜姣擵ue闅撅紝鍙兘闅惧氨闅惧湪涓嶈兘娣卞埢鐞嗚ВJSX锛屾垨鑰呭ES6鐨勪竴浜涚壒鎬х悊瑙ｅ緱涓嶅娣卞埢锛屽鑷磋寰楁湁浜涚偣闅句互鐞嗚В锛岀劧鍚庤React姣旇緝闅句笂鎵嬨�備粖澶╁氨鏉ユ暣鐞嗕竴浜汻eact鍏ラ棬闇�瑕佹帉鎻″摢浜涚煡璇嗙偣銆�
涓轰粈涔堣寮曞叆 React
鍦ㄥ啓 React 鐨勬椂鍊欙紝浣犲彲鑳戒細鍐欑被浼艰繖鏍风殑浠ｇ爜锛�
import React from 'react'
function A() {
// ...other code
return 鍓嶇妗冨洯
}浣犺偗瀹氱枒鎯戣繃锛屼笂闈㈢殑浠ｇ爜閮芥病鏈夌敤鍒� React锛屼负浠�涔堣寮曞叆 React 鍛紵
濡傛灉浣犳妸 import React from 'react' 鍒犳帀锛岃繕浼氭姤涓嬮潰杩欐牱鐨勯敊璇細
閭ｄ箞绌剁珶鏄摢閲岀敤鍒颁簡杩欎釜 React锛屽鑷存垜浠紩鍏� React 浼氭姤閿欏憿锛屼笉鎳傝繖涓師鍥狅紝閭ｄ箞灏辨槸 JSX 娌℃湁鎼炲緱澶槑鐧姐��
浣犲彲浠ヨ涓婇潰鐨勪唬鐮�(蹇界暐瀵煎叆璇彞)鏀惧埌 鍦ㄧ嚎 babel 閲岃繘琛岃浆鍖栦竴涓嬶紝鍙戠幇 babel 浼氭妸涓婇潰鐨勪唬鐮佽浆鍖栨垚:
function A() {
// ...other code
return React.createElement("h1", null, "鍓嶇妗冨洯");
}鍥犱负浠庢湰璐ㄤ笂璁诧紝JSX 鍙槸涓�React.createElement(component, props, ...children)鍑芥暟鎻愪緵鐨勮娉曠硸銆�
涓轰粈涔堣鐢� className 鑰屼笉鐢� class
1.React 涓�寮�濮嬬殑鐞嗗康鏄兂涓庢祻瑙堝櫒鐨� DOM API 淇濇寔涓�鑷磋�屼笉鏄� HTML锛屽洜涓� JSX 鏄� JS 鐨勬墿灞曪紝鑰屼笉鏄敤鏉ヤ唬鏇� HTML 鐨勶紝杩欐牱浼氬拰鍏冪礌鐨勫垱寤烘洿涓烘帴杩戙�傚湪鍏冪礌涓婅缃�class闇�瑕佷娇鐢�className杩欎釜 API锛�
const element = document.createElement("div")
element.className = "hello" 2.娴忚鍣ㄩ棶棰橈紝ES5 涔嬪墠锛屽湪瀵硅薄涓笉鑳戒娇鐢ㄤ繚鐣欏瓧銆備互涓嬩唬鐮佸湪 IE8 涓皢浼氭姏鍑洪敊璇細
const element = {
attributes: {
class: "hello"
}
} 3.瑙ｆ瀯闂锛屽綋浣犲湪瑙ｆ瀯灞炴�х殑鏃跺�欙紝濡傛灉鍒嗛厤涓�涓�class鍙橀噺浼氬嚭闂锛�
const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
const { className } = { className: 'foo' }
const { class: className } = { class: 'foo' } 涓轰粈涔堝睘鎬ц鐢ㄥ皬椹煎嘲
鍥犱负 JSX 璇硶涓婃洿鎺ヨ繎 JavaScript 鑰屼笉鏄� HTML锛屾墍浠� React DOM 浣跨敤camelCase锛堝皬椹煎嘲鍛藉悕锛夋潵瀹氫箟灞炴�х殑鍚嶇О锛岃�屼笉浣跨敤 HTML 灞炴�у悕绉扮殑鍛藉悕绾﹀畾銆�
鍙傝�冿細JSX 绠�浠�
涓轰粈涔� constructor 閲岃璋冪敤 super 鍜屼紶閫� props
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
}鑰屼笖鏈夎繖涔堜竴娈佃瘽锛屼笉浠呰鎴戜滑璋冪敤 super 杩樿鎶� props 浼犻�掕繘鍘伙紝浣嗘槸娌℃湁鍛婅瘔鎴戜滑涓轰粈涔堣杩欎箞鍋氥��
涓轰粈涔堣璋冪敤 super?
鍏跺疄杩欎笉鏄� React 鐨勯檺鍒讹紝杩欐槸 JavaScript 鐨勯檺鍒讹紝鍦ㄦ瀯閫犲嚱鏁伴噷濡傛灉瑕佽皟鐢� this锛岄偅涔堟彁鍓嶅氨瑕佽皟鐢� super銆傚湪 React 閲岋紝鎴戜滑甯稿父浼氬湪鏋勯�犲嚱鏁伴噷鍒濆鍖� state锛宼his.state = xxx 锛屾墍浠ラ渶瑕佽皟鐢� super銆傝鎯呰锛�Class 鐨勭户鎵� - ECMAScript 6鍏ラ棬
涓轰粈涔堣浼犻�� props?
浣犲彲鑳戒互涓哄繀椤荤粰 super 浼犲叆 props锛屽惁鍒� React.Component 灏辨病娉曞垵濮嬪寲 this.props锛�
class Component {
constructor(props) {
this.props = props;
// ...
}
}涓嶈繃锛屽鏋滀綘涓嶅皬蹇冩紡浼犱簡 props锛岀洿鎺ヨ皟鐢ㄤ簡 super()锛屼綘浠嶇劧鍙互鍦� render 鍜屽叾浠栨柟娉曚腑璁块棶 this.props锛堜笉淇＄殑璇濆彲浠ヨ瘯璇曞槢锛夈��
涓哄暐杩欐牱涔熻锛熷洜涓� React 浼氬湪鏋勯�犲嚱鏁拌璋冪敤涔嬪悗锛屼細鎶� props 璧嬪�肩粰鍒氬垰鍒涘缓鐨勫疄渚嬪璞�锛�
const instance = new YourComponent(props);
instance.props = props;浣嗚繖鎰忓懗鐫�浣犲湪浣跨敤 React 鏃讹紝鍙互鐢� super() 浠ｆ浛 super(props) 浜嗕箞锛�
閭ｈ繕鏄笉琛岀殑锛屼笉鐒跺畼缃戜篃涓嶄細寤鸿浣犺皟鐢� props 浜嗭紝铏界劧 React 浼氬湪鏋勯�犲嚱鏁拌繍琛屼箣鍚庯紝涓� this.props 璧嬪�硷紝浣嗗湪 super() 璋冪敤涔嬪悗涓庢瀯閫犲嚱鏁扮粨鏉熶箣鍓嶏紝 this.props 浠嶇劧鏄病娉曠敤鐨勩��
// Inside React
class Component {
constructor(props) {
this.props = props;
// ...
}
}
// Inside your code
class Button extends React.Component {
constructor(props) {
super(); // 馃槵 蹇樹簡浼犲叆 props
console.log(props); // 鉁� {}
console.log(this.props); // 馃槵 undefined
}
// ...
}瑕佹槸鏋勯�犲嚱鏁颁腑璋冪敤浜嗘煇涓闂� props 鐨勬柟娉曪紝閭ｈ繖涓� bug 灏辨洿闅惧畾浣嶄簡銆傚洜姝ゆ垜寮虹儓寤鸿濮嬬粓浣跨敤super(props)锛屽嵆浣胯繖涓嶆槸蹇呴』鐨勶細
class Button extends React.Component {
constructor(props) {
super(props); // 鉁� We passed props
console.log(props); // 鉁� {}
console.log(this.props); // 鉁� {}
}
// ...
}濡傛灉浣犳兂閬垮厤浠ヤ笂鐨勯棶棰橈紝浣犲彲浠ラ�氳繃 class 灞炴�ф彁妗� 鏉ョ畝鍖栦唬鐮侊細
class Clock extends React.Component {
state = {date: new Date()};
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
}涓轰粈涔堢粍浠剁敤澶у啓寮�澶�
JSX 鏄� React.createElement(component, props, 鈥hildren) 鎻愪緵鐨勮娉曠硸锛宑omponent 鐨勭被鍨嬫槸锛歴tring/ReactClass type銆傛垜浠叿浣撶湅涓�涓嬪湪浠�涔堟儏鍐典笅浼氱敤鍒� string 绫诲瀷锛屼粈涔堟儏鍐典笅鐢ㄥ埌 ReactClass type 绫诲瀷銆�
- string 绫诲瀷react浼氳寰椾粬鏄竴涓師鐢焏om鑺傜偣
- ReactClass type 绫诲瀷 鑷畾涔夌粍浠�
瀵逛簬灏忓啓瀛楃涓诧紝灏变細鐩存帴鍒涘缓 dom 鍏冪礌锛屽鏋� html 骞舵病鏈夎繖涓厓绱狅紝鏄垱寤轰笉鍑烘潵鐨勩�傝�屽ぇ瀛楃涓蹭紶杩涘幓鐨勪笉鏄竴涓瓧绗︿覆锛屾槸涓�涓粍浠�(鍏跺疄灏辨槸涓�涓璞�)锛岄偅涔堝氨涓嶄細鐩存帴鍘诲垱寤� dom 鍏冪礌锛岃繕浼氬仛鍏朵粬鐨勫鐞嗐��
涓轰粈涔堣 setState锛岃�屼笉鏄洿鎺� this.state.xx = oo
- 娉ㄦ剰锛氫娇鐢�
setState()鏂规硶淇敼鐘舵�侊紝鐘舵�佹敼鍙樺悗锛�React浼氶噸鏂版覆鏌撶粍浠� - 娉ㄦ剰锛氫笉瑕佺洿鎺ヤ慨鏀箂tate灞炴�х殑鍊硷紝鍍忚繖鏍�
this.state.test = '杩欐牱鏂瑰紡锛屼笉浼氶噸鏂版覆鏌撶粍浠�';锛岃繖鏍蜂笉浼氶噸鏂版覆鏌撶粍浠�
setState 鏄悓姝ヨ繕鏄紓姝�
杩欎篃鏄痳eact鍦╣ithub鐨刬ssue涓殑闂锛屽苟涓斿緱鍒� react 鍒涘浜�Dan鐨勫洖绛�銆�
涓嬮潰鏄疍an缁欏嚭鐨勪袱涓悊鐢憋紝鎴戣繖涓畝鍗曟�荤粨涓�涓嬶紝鎰熷叴瓒ｇ殑鍙互娣卞叆鐮旂┒銆�
- 淇濊瘉鍐呴儴锛堟暟鎹級缁熶竴
- setState寮傛鏇存柊鐘舵�佷娇寰楀苟鍙戞洿鏂扮粍浠舵垚涓哄彲鑳�
鍙傝�冿細React 涓� setState() 涓轰粈涔堟槸寮傛鐨勶紵
setState 鏇存柊 state 浣曟椂鍚屾浣曟椂寮傛
setState鍙兘鏄悓姝ョ殑锛屼篃鍙兘鏄紓姝ョ殑銆�鎵ц杩囩▼浠ｇ爜鍚屾鐨勶紝鍙槸鍚堟垚浜嬩欢鍜岄挬瀛愬嚱鏁扮殑璋冪敤椤哄簭鍦ㄦ洿鏂颁箣鍓嶏紝瀵艰嚧鍦ㄥ悎鎴愪簨浠跺拰閽╁瓙鍑芥暟涓病娉曠珛椹嬁鍒版洿鏂板悗鐨勫��锛屽舰寮忎簡鎵�璋撶殑鈥滃紓姝モ�濓紝鎵�浠ヨ〃鐜板嚭鏉ユ湁鏃舵槸鍚屾锛屾湁鏃舵槸鈥滃紓姝モ�濄��
鍙湪鍚堟垚浜嬩欢鍜岄挬瀛愬嚱鏁颁腑鏄�滃紓姝モ�濈殑锛屽湪鍘熺敓浜嬩欢鍜� setTimeout/setInterval绛夊師鐢� API 涓兘鏄悓姝ョ殑銆傜畝鍗曠殑鍙互鐞嗚В涓鸿 React 鎺у埗鐨勫嚱鏁伴噷闈㈠氨浼氳〃鐜板嚭鈥滃紓姝モ�濓紝鍙嶄箣琛ㄧ幇涓哄悓姝ャ��
涓轰簡鍋氭�ц兘浼樺寲锛屽皢 state 鐨勬洿鏂板欢缂撳埌鏈�鍚庢壒閲忓悎骞跺啀鍘绘覆鏌撳浜庡簲鐢ㄧ殑鎬ц兘浼樺寲鏄湁鏋佸ぇ濂藉鐨勶紝濡傛灉姣忔鐨勭姸鎬佹敼鍙橀兘鍘婚噸鏂版覆鏌撶湡瀹� dom锛岄偅涔堝畠灏嗗甫鏉ュ法澶х殑鎬ц兘娑堣�椼��
鍙傝�冿細React 涓璼etState鏇存柊state浣曟椂鍚屾浣曟椂寮傛锛�
缁勪欢鐨勭敓鍛藉懆鏈�
缁勪欢鐢熷懡鍛ㄦ湡鍑芥暟鐨勫畾涔夛細浠庣粍浠惰鍒涘缓锛屽埌缁勪欢鎸傝浇鍒伴〉闈笂杩愯锛屽啀鍒伴〉闈㈠叧闂粍浠惰鍗歌浇锛岃繖涓変釜闃舵鎬绘槸浼撮殢鐫�缁勪欢鍚勭鍚勬牱鐨勪簨浠讹紝閭ｄ箞杩欎簺浜嬩欢锛岀粺绉颁负缁勪欢鐨勭敓鍛藉懆鏈熷嚱鏁帮紒
react16鍦ㄧ敓鍛藉懆鏈熻繖鍧楁湁浜嗗緢澶х殑鏀瑰姩锛岃鎯呰锛�16.3 鏂扮増react鐢熷懡鍛ㄦ湡 鍥剧ず
鍙傝�冿細
鏂版墜瀛︿範 react 杩锋儜鐨勭偣