1.鐢╮eact鍐欎竴涓椂閽熷啓涓€涓彲浠ユ瘡绉掓洿鏂扮殑鏃堕挓}//瀵硅薄浣滀负React瀛愬璞℃棤鏁堬紙鍙戠幇鏃堕棿锛?019骞?鏈?鏃ユ槦鏈熸棩20:34:51GMT+0800锛堜腑鍥芥爣鍑嗘椂闂达級锛夈€傚鏋滄偍鎵撶畻娓叉煋瀛愰泦鍚堬紝璇锋敼鐢ㄦ暟缁勩€?/newDate()鏄竴涓璞℃暟鎹被鍨嬬殑鍊硷紝React鍏冪礌涓嶆帴鍙楀璞′綔涓轰粬浠殑瀛╁瓙ReactDOM.render(ele,document.querySelector('#root'))}tick()setInterval(tick,1000)//濡傛灉涓嶅寘瑁瑰湪鍑芥暟涓紝鏃堕挓涓嶄細姣忕鏇存柊涓€娆★紝浣嗘槸React鍜孷ue閮芥槸鏁版嵁椹卞姩鐨勶紝浣嗘槸杩欐鍜屾暟鎹┍鍔ㄦ棤鍏筹紝姣?绉掗噸鏂板垱寤轰竴涓猠le锛岀劧鍚庡憟鐜板埌椤甸潰锛岃鍥惧彂鐢熷彉鍖栵紱涓轰簡浣跨敤鏁版嵁椹卞姩锛屾垜浠渶瑕佷娇鐢≧eact缁勪欢2.React缁勪欢React缁勪欢涓紝jsx鍏冪礌锛堜篃鍙玶eact鍏冪礌锛夋槸react涓粍浠剁殑鍩烘湰缁勪欢锛屽畾涔夌粍浠舵湁涓ょ鏂瑰紡锛氬嚱鏁帮紙function锛夊畾涔夌粍浠剁被锛坈lass锛夊畾涔夌粍浠跺畾涔夌粍浠惰姹傦細缁勪欢鍚嶇О棣栧瓧姣嶅繀椤诲ぇ鍐欙紝浠ヤ究鍐檍sx鏃跺尯鍒嗗師鐢焗tml鏍囩缁勪欢瀹氫箟濂藉悗锛屽彲浠ヤ綔涓轰竴涓爣绛句娇鐢ㄥ湪jsx璇硶涓娇鐢ㄣ€傚鏋滀娇鐢ㄥ嚱鏁板畾涔夌粍浠讹紝鍒欏繀椤昏繑鍥炰竴涓猨sx鍏冪礌銆?.1React鐨勫嚱鏁扮粍浠秗eact浣跨敤鍑芥暟瀹氫箟缁勪欢灏辨槸澹版槑涓€涓嚱鏁帮紱璇ュ嚱鏁版帴鏀朵竴涓猵rops鍙傛暟锛沺rops鏄竴涓璞★紝鏄覆鏌撴垨閫氳繃鐖剁粍浠?Property)浼犻€掔殑鏁版嵁锛涘嚱鏁拌繑鍥炰竴涓猨sx鍏冪礌锛岀粍浠朵腑闇€瑕佺殑鏁版嵁鍙互閫氳繃props浼犲叆锛?/1.鍑芥暟瀹氫箟缁勪欢鍑芥暟Welcome(props){//props鏄竴涓璞★紝鐢变娇鐢ㄧ粍浠舵椂鍐欏湪缁勪欢琛屼腑鐨勫睘鎬у拰灞炴€у€肩粍鎴愶紱锛沜onsole.log(data)杩斿洖(
{props.data.name};{props.data.age}
{props.x}
)}ReactDOM.render(
,document.querySelector('#root'));ReactDOM.render()浼氭墽琛屼笉鍚岀殑鎿嶄綔鏍规嵁绗竴涓弬鏁扮殑绫诲瀷锛涘鏋滄槸缁勪欢锛屽湪鎵цrender鏃讹紝灏嗗綋鍓嶇粍浠剁殑鍐呰仈灞炴€ф墦鍖呭皝瑁呮垚涓€涓璞★紝灏嗚瀵硅薄浼犻€掔粰缁勪欢鍑芥暟锛屾墽琛岀粍浠跺嚱鏁拌幏鍙栧搴旂殑铏氭嫙DOM瀵硅薄锛屽皢铏氭嫙DOM杞崲涓虹湡瀹濪OM瀵硅薄锛屾彃鍏ュ埌鐪熷疄DOM涓?.2React绫荤粍浠堕€氳繃class瀹氫箟缁勪欢閫氳繃class瀹氫箟缁勪欢锛岄渶瑕佸湪React涓婄户鎵緾omponent銆傝繖涓被鍦ㄥ畾涔夌殑缁勪欢鍘熷瀷涓婂繀椤绘湁涓€涓猺ender鍑芥暟锛宺ender鍑芥暟闇€瑕佽繑鍥炰竴涓《灞傜殑jsx鍏冪礌鈥斺€旂湅馃尠classHeaderextendsComponent{constructor(){super()}render(){//鍦╮ender鍑芥暟涓€氳繃this.props璁块棶propsreturn({this.props.content}
)}}classHelloextendsComponent{constructor(props){super()//娉ㄦ剰this.props涓嶈兘鏄湪鏋勯€犲嚱鏁颁腑璁块棶锛宲rops浼氫綔涓哄舰鍙備紶鍏render(){return({this.props.data.toLocaleString()}
{props.time.toLocaleString()}
}setInterval(()=>{//姣忎竴绉抧ewDate鐨勫€奸兘浼氬彉鍖栵紝鍗砏elcome鐨勬椂闂磒rop灞炴€т細鍙樺寲,瑙嗗浘浼氳嚜鍔ㄦ敼鍙榣etnow=newDate()ReactDOM.render(,document.querySelector('#root'))},1000)-鐪嬸煂伴€氳繃灞炴€х粰鍒嗙粍浼犳暟鎹紝璇︾粏绛旈鍔熻兘鍙傝€冨墠绔珮绾ч潰璇曢User(props){console.log(props)璁﹞name,age}=props;return}letdata={name:'mabin',age:18}//ReactDOM.render(<鐢ㄦ埛鍚?{data.name}age={data.age}/>,document.getElementById('root'))ReactDOM.render(,document.getElementById('root'))//鍙互浣跨敤灞曞紑杩愮畻绗﹀皢涓€涓璞′紶閫掔粰缁勪欢鐨刾rops锛岀浉褰撲簬涓婇潰鐨勫啓娉?.2鐘舵€侊紙state锛夋槧灏勮鍥緍eact缁勪欢鏁版嵁鏈変袱绉嶆潵婧愶細props鍜宻tate灞炴€э紙props锛夛細鏄埗缁勪欢浼犻€掕繃鏉ョ殑鐘舵€侊紙state锛夛細鏄粍浠惰嚜宸辨帶鍒剁殑鐘舵€侊紝state鏄粍浠剁殑绉佹湁鏁版嵁銆?.2.1浣跨敤state濡傛灉鍦≧eact涓娇鐢╯tate锛屽垯蹇呴』浣跨敤绫诲垱寤虹粍浠讹紱鍦ㄦ瀯閫犲嚱鏁颁腑鍒濆鍖栦竴涓姸鎬侊紱閫氳繃灏嗗璞″垎閰嶇粰this.state杩涜鍒濆鍖栵紱鐘舵€佷腑鐨勬暟鎹笉鑳界洿鎺ヤ慨鏀广€傚鏋滆鏇存柊鏁版嵁锛岄渶瑕佽皟鐢╯etState鏂规硶锛屼細鍚堝苟銆俿etState鏈変袱绉嶅啓娉曪紝涓€绉嶆槸瀵硅薄鍐欐硶锛屽彟涓€绉嶆槸鍑芥暟鍐欐硶銆傚鏋滀笅涓€涓姸鎬佷緷璧栦簬涓婁竴涓姸鎬侊紝鎴戜滑闇€瑕佷娇鐢ㄥ嚱鏁扮殑褰㈠紡鍑芥暟锛歵his.setState((prevState)=>{})瀵硅薄锛歵his.setState({num:5})鐘舵€佹敼鍙樺苟瑙﹀彂娓叉煋鍑芥暟鏇存柊DOM3.2.2缁戝畾浜嬩欢閲嶆柊鍙嶅簲act缁戝畾浜嬩欢鏃讹紝闇€瑕佷娇鐢ㄩ┘宄颁簨浠剁殑浜嬩欢鍚峯nClick={浜嬩欢澶勭悊鍑芥暟}瀹氫箟浜嬩欢鍑芥暟鏃讹紝涓€鑸湪鍘熷瀷涓婂０鏄庝簨浠跺嚱鏁帮紝缁戝畾浜嬩欢鏃讹紝閫氳繃璁块棶杩欎釜浜嬩欢鍑芥暟this.add渚嬪瓙锛氭垜浠啓涓€涓鏁板櫒鏉ヤ綋楠孯eact鐨勬暟鎹┍鍔ㄧ被CountextendsComponent{constructor(){super()//鍦ㄦ瀯閫犲嚱鏁颁腑鍒濆鍖栦竴涓猻tate;閫氳繃灏嗗璞″垎閰嶇粰this.state杩涜鍒濆鍖栵紱//鍙娇鐢ㄧ被鍙湁澹版槑鐨勭粍浠舵墠鏈夌姸鎬乼his.state={num:1,x:2}//this.add=this.add.bind(this)}add=()=>{//濡傛灉浣犳兂淇敼react涓殑state鍙兘閫氳繃this.setState()鏂规硶鏉ヤ慨鏀?/setState鏂规硶浼氱粨鍚堛€俿etState鏈変袱绉嶅啓娉曪紝涓€绉嶆槸瀵硅薄锛屼竴绉嶆槸鍑芥暟//1.setState鍙互鎺ュ彈涓€涓洖璋冿紝鍥炶皟闇€瑕佽繑鍥炰竴涓柊鐨勭姸鎬佸璞★紝杩欎釜鏂扮殑瀵硅薄鍙渶瑕佸寘鍚睘鎬у嵆鍙淇敼銆傛瘮濡傝繖閲屾垜浠淇敼num锛岃繑鍥炲璞″彧闇€瑕佸寘鍚玭um涓嶅寘鍚玿锛宺eact浼氳嚜鍔ㄥ悎骞?/濡傛灉涓嬩竴涓姸鎬佷緷璧栦簬涓婁竴涓姸鎬侊紝鎴戜滑闇€瑕佷娇鐢ㄥ嚱鏁?*鐨勫舰寮弔his.setState((prevState)=>{console.log(prevState);//prevState涔嬪墠鐨勭姸鎬佸璞eturn{num:prevState.num+1}})*///2.setState涔熸槸鍙互鎺ュ彈鐨勫璞″寘鍚鏇存柊鐨勭姸鎬佸睘鎬э紱this.setState({num:this.state.num+1})//鎴戜滑鍙戠幇鎴戜滑鏇存柊鏁版嵁鍚庯紝椤甸潰涓娇鐢╪um鐨勫湴鏂圭殑鍊艰嚜鍔ㄨ窡鐫€鏀瑰彉浜嗭紱//react涔熸槸鏁版嵁椹卞姩鐨勶紝褰撴垜浠皟鐢╯etState淇敼state锛宺eact浼氶噸鏂拌皟鐢╮ender鍑芥暟鑾峰彇铏氭嫙DOM鐒跺悗璋冪敤DOM-diff绠楁硶閲嶆柊娓叉煋淇敼閮ㄥ垎锛泒render(){//react缁戝畾浜嬩欢鏃堕渶瑕佷娇鐢ㄩ┘宄颁簨浠跺悕onClick={Eventhandlerfunction}//瀹氫箟浜嬩欢鍑芥暟鏃讹紝涓€鑸湪鍘熷瀷涓婂０鏄庝簨浠跺嚱鏁帮紝褰撶粦瀹氫竴涓簨浠讹紝閫氳繃this.addreturn(NUM:{this.state.num}
X:{this.state.x}
add1tonum{this.props.name}}
{this.props.age}
{this.props.data}
)澶嶅埗浠ｇ爜}}//姝ゆ椂Panel涓虹埗缁勪欢锛孒eader涓哄瓙缁勪欢銆傜埗瀛愮粍浠堕€氫俊鏃讹紝parent浼犻€抍hild锛屼緷鐒舵槸閫氳繃props浼犻€掔殑class銆侾anelextendsComponent{render(){return({this.props.news}
