React 考点：从入门到提升的必备知识指南
React锛氫粠鍏ラ棬鍒拌繘闃剁殑蹇呭鎸囧崡
React锛岀敱Facebook寮€鍙戝苟鍦℅itHub涓婂紑婧愮殑JavaScript搴擄紝鏄瀯寤哄崟椤靛簲鐢ㄥ拰绉诲姩搴旂敤鐢ㄦ埛鐣岄潰鐨勭悊鎯抽€夋嫨銆傚畠鐨勬牳蹇冧紭鍔垮湪浜庡皢鐣岄潰甯冨眬鍜岀姸鎬佺鐞嗗垎绂伙紝鍊熷姪缁勪欢鍜岃櫄鎷烡OM鎻愰珮鎬ц兘鍜屽彲缁存姢鎬с€備互涓嬫槸React浠庡叆闂ㄥ埌杩涢樁鐨勫繀澶囨寚鍗椼€?/p>涓€銆佹牳蹇冨師鐞?/h3>
React閫氳繃铏氭嫙DOM鏉ユ彁楂樻€ц兘銆傚畠閫氳繃姣旇緝铏氭嫙DOM鍜屽疄闄匘OM鐨勫樊寮傦紝灏藉彲鑳藉噺灏戝疄闄匘OM鐨勬洿鏂帮紝浠庤€屾湁鏁堟彁楂樻晥鐜囥€?/p>浜屻€丷eact缁勪欢
缁勪欢鏄疪eact涓殑鍩烘湰鏋勫缓鍧楋紝鍙互鏄竴娈靛姛鑳芥€х殑浠ｇ爜鎴栫被銆傜粍浠跺彲浠ユ帴鏀跺睘鎬э紙props锛夊拰鐘舵€侊紙state锛夛紝骞惰兘澶熸覆鏌揢I銆備緥濡傦紝涓€涓畝鍗曠殑React缁勪欢浠ｇ爜濡備笅锛?/p>
```jsx
import React from 'react';
function HelloWorld() {
return
Hello, I am a React component!
;}
export default HelloWorld;
```
涓夈€佺姸鎬佺鐞?/h3>鐘舵€侊紙state锛夋槸React缁勪欢鍐呴儴鐨勬暟鎹瓨鍌紝鐢ㄤ簬淇濆瓨缁勪欢鐨勭姸鎬佷俊鎭€傚綋鐘舵€佸彂鐢熷彉鍖栨椂锛岀粍浠朵細閲嶆柊娓叉煋浠ュ弽鏄犳渶鏂扮殑鐘舵€併€備緥濡傦紝涓€涓畝鍗曠殑璁℃暟鍣ㄧ粍浠跺涓嬶細
```jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
);
}
export default Counter;
```
鍥涖€佺粍浠惰繘闃?/h3>鍖呮嫭绾嚱鏁扮粍浠跺拰绫荤粍浠躲€丷eact Hooks绛夎繘闃剁煡璇嗐€傜函鍑芥暟缁勪欢鎬ц兘鏇撮珮锛屽洜涓哄畠浠笉浼氫慨鏀圭姸鎬佹垨灞炴€с€俁eact Hooks鏄疪eact 16.8鐗堟湰寮曞叆鐨勬柊鐗规€э紝鍏佽鍦ㄦ棤鐘舵€佸嚱鏁扮粍浠朵腑浣跨敤鐘舵€佸拰鐢熷懡鍛ㄦ湡鏂规硶銆備緥濡傦細
```jsx
import React, { useState } from 'react';
function Greeting() {
const [name, setName] = useState('John');
return (
Hello, {name}
setName(e.target.value)} />
);
}
export default Greeting;
```
浜斻€佷簨浠跺鐞嗗拰鍙嶉浜嬩欢澶勭悊鏄疪eact涓庣敤鎴蜂氦浜掔殑鍏抽敭閮ㄥ垎銆俁eact鎻愪緵浜嗗師鐢熺殑浜嬩欢绯荤粺锛屽彲浠ユ柟渚垮湴澶勭悊鐢ㄦ埛杈撳叆銆備緥濡傦紝涓€涓氦浜掑紡鎸夐挳缁勪欢濡備笅锛?/p>
```jsx
import React, { useState } from 'react';
function ButtonExample() {
const [message, setMessage] = useState('');
const handleClick = () => {
setMessage('Button clicked!');
};
return (
{message}
);
}
export default ButtonExample;
``` 鎺ョ潃浠嬬粛浜哛eact璺敱鍩虹锛屽嵆浣跨敤React Router搴撳湪鍗曢〉搴旂敤绋嬪簭涓鐞嗕笉鍚岀殑椤甸潰銆傝繖瀵逛簬鏋勫缓澶у瀷搴旂敤绋嬪簭鎴栧鏉傜殑Web搴旂敤绋嬪簭鑷冲叧閲嶈銆?React鏄竴涓己澶ц€岀伒娲荤殑搴擄紝鐢ㄤ簬鏋勫缓楂樻晥鐨勫崟椤靛簲鐢ㄥ拰绉诲姩搴旂敤鐢ㄦ埛鐣岄潰銆傛帉鎻℃湰鏂囦粙缁嶇殑鍏抽敭鐭ヨ瘑鐐瑰皢浣挎偍鑳藉鏈夋晥鍦颁娇鐢≧eact杩涜寮€鍙戙€備紭鍖栦笌閮ㄧ讲React搴旂敤鐨勫疄璺垫寚鍗楌煔€
鍦≧eact搴旂敤寮€鍙戜腑锛屾€ц兘浼樺寲鍜岀敓浜х幆澧冪殑閮ㄧ讲閮芥槸鑷冲叧閲嶈鐨勭幆鑺傘€傝鎴戜滑涓€璧锋帰璁ㄥ浣曚娇浣犵殑React搴旂敤鏇村揩閫熴€佹洿娴佺晠鍦版湇鍔′簬鐢ㄦ埛銆?/p>
浠ｇ爜鍒嗗壊锛?鎻愬崌鍔犺浇閫熷害鐨勭瀵嗘鍣?/p>
璁╂垜浠粠鎻愰珮搴旂敤鐨勫惎鍔ㄩ€熷害寮€濮嬨€備娇鐢≧eact.lazy鍜孲uspense锛屼綘鍙互杞绘澗瀹炵幇浠ｇ爜鍒嗗壊锛屽垎娈靛姞杞界粍浠躲€傝繖鎰忓懗鐫€鍙湁褰撶粍浠剁湡姝ｉ渶瑕佽娓叉煋鏃讹紝瀹冧滑鎵嶄細琚姞杞藉拰鎵撳寘銆傝繖澶уぇ鎻愰珮浜嗗簲鐢ㄧ殑鍒濆鍔犺浇閫熷害锛屼负鐢ㄦ埛甯︽潵鏇村ソ鐨勪綋楠屻€傝鎴戜滑鐪嬩竴涓嬩唬鐮佺ず渚嬶細
瀵煎叆蹇呰鐨勬ā鍧楋細
```javascript
import React from 'react';
import { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';
```
鐒跺悗锛屼娇鐢≧eact.lazy鍔犺浇涓€涓粍浠讹細
```javascript
const LazyComponent = lazy(() => import('./LazyComponent'));
```
鍦ㄥ簲鐢ㄤ腑浣跨敤杩欎釜寤惰繜鍔犺浇鐨勭粍浠讹細
```javascript
function App() {
return (
);
}
```灏嗕綘鐨勫簲鐢ㄦ覆鏌撳埌DOM涓細
React閰嶇疆鍩烘湰璺敱鎸囧崡馃搻 馃専 馃殌 馃挕 馃殾 馃敡 馃帹 鏋勫缓楂樻晥React搴旂敤鐨勫叧閿楠わ紒鎴戜滑涓嶄粎鏋勫缓搴旂敤锛屾垜浠繕浼樺寲瀹冧滑骞堕儴缃插埌鐢熶骇鐜锛佽繖鏄竴涓繀涓嶅彲灏戠殑姝ラ锛岀‘淇濇偍鐨勫簲鐢ㄧ▼搴忛珮鏁堛€佸仴澹笖鏄撲簬缁存姢銆傝鎴戜滑娣卞叆浜嗚В濡備綍閰嶇疆鍩烘湰璺敱鍜岄儴缃叉偍鐨凴eact搴旂敤绋嬪簭銆傪煔€馃摝鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪馃憠鍩烘湰璺敱閰嶇疆: 褰撴偍鍦ㄦ瀯寤哄崟椤靛簲鐢ㄦ椂锛屼娇鐢≧eact Router鍙互涓烘偍鐨勫簲鐢ㄧ▼搴忔彁渚涙竻鏅扮殑瀵艰埅缁撴瀯銆備紭鍖栨偍鐨凴eact搴旂敤:鍦ㄥ紑鍙戝拰閮ㄧ讲闃舵閮借杩涜鎬ц兘浼樺寲銆傚叾涓竴浜涚瓥鐣ュ寘鎷娇鐢≧eact鐨勪唬鐮佸垎鍓茬壒鎬ц繘琛岀粍浠舵噿鍔犺浇绛夈€傞儴缃插埌鐢熶骇鐜:閫氳繃浣跨敤宸ュ叿濡倃ebpack鍜宯pm鏉ユ瀯寤虹敓浜х幆澧冪殑浠ｇ爜鐗堟湰鍚庯紝閫夋嫨閫傚綋鐨勯儴缃叉柟寮忥紙濡侫WS銆丠eroku鎴朧ercel绛変簯鏈嶅姟锛夎繘琛岄儴缃层€備笉鏂疄璺?閬靛惊鏈€浣冲疄璺靛苟涓嶆柇灏濊瘯鏂扮殑React鐗规€у拰鎶€鏈彲浠ュ府鍔╂偍鎻愰珮寮€鍙戞妧鑳藉苟鏋勫缓鍑洪珮鏁堢殑搴旂敤绋嬪簭銆傝鎴戜滑涓€璧锋帰绱㈣繖涓濡欑殑鏃呯▼鍚э紒馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専閭ｄ箞浣犵殑椤圭洰鐩綍搴旇鍍忚繖鏍疯缃細鐩綍缁撴瀯鈹溾攢鈹€ src鈹? 鈹溾攢鈹€ App.js鈹? 鈹溾攢鈹€ Home.js鈹? 鈹溾攢鈹€ About.js鈹? 鈹溾攢鈹€ routes.js锛堝瓨鏀捐矾鐢遍厤缃級鈹溾攢鈹€ public鈹? 鈹溾攢鈹€ index.html锛堝叆鍙ｆ枃浠讹級鈹溾攢鈹€ package.json锛堥」鐩厤缃枃浠讹級鈹溾攢鈹€ node_modules锛堜緷璧栨ā鍧楋級绛夌瓑浣犵殑App.js鏂囦欢鍙兘鐪嬭捣鏉ュ儚杩欐牱锛歩mport React from 'react';import { BrowserRouter as Router, Route } from 'react-router-dom';function App() {return (HomeAbout);}function Home() {return Home Page;}function About() {return About Page;}export default App;鎺ヤ笅鏉ヤ綘鍙互娣诲姞鏇村鐨勮矾鐢遍厤缃湪浣犵殑routes.js鏂囦欢涓苟寮曞叆鐩稿簲鐨勭粍浠朵互瀹炵幇浣犵殑搴旂敤闇€姹傘€傝繖鏄竴涓畝鍗曠殑渚嬪瓙锛歩mport React from 'react';import { Route } from 'react-router-dom';import Home from './Home';import About from './About';const routes = (ReactDOM.render((
版权声明：《React 考点：从入门到提升的必备知识指南》来自【石家庄人才网】收集整理于网络，不代表本站立场，所有图片文章版权属于原作者，如有侵略，联系删除。
https://www.ymil.cn/baibaoxiang/28177.html