整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
文共3125字，預(yù)計(jì)學(xué)習(xí)時(shí)長(zhǎng)6分鐘
圖片來(lái)源：codeburst @webrealizer
JavaScript的世界正在快速發(fā)展。
前端開(kāi)發(fā)(和網(wǎng)絡(luò)開(kāi)發(fā))的世界正在以極快的速度發(fā)展。如今，如果不借助前端或Webpack、React Hooks、Jest、Vue和NG元素，你會(huì)很快被遠(yuǎn)遠(yuǎn)拋下。不過(guò)，情況正在發(fā)生改變。
盡管開(kāi)發(fā)人員和技術(shù)人員在前端領(lǐng)域中的數(shù)量逐年上升，生態(tài)系統(tǒng)卻有標(biāo)準(zhǔn)化的趨勢(shì)。新技術(shù)和工具的出現(xiàn)正在改變當(dāng)下的規(guī)則。
總體趨勢(shì)肯定會(huì)是一種基于組件構(gòu)成的用戶(hù)界面標(biāo)準(zhǔn)化，會(huì)影響從樣式到測(cè)試甚至狀態(tài)管理的所有方面，并且總體具有更好的模塊度。這將包括圍繞web組件、ES模塊、組件焦點(diǎn)工具等技術(shù)構(gòu)建。
以下是對(duì)未來(lái)幾年前端開(kāi)發(fā)的一些不完全預(yù)測(cè)，僅供參考。
1. 與框架無(wú)關(guān)的Web組件
這大體上代表了未來(lái)。因?yàn)檫@些純web組件與框架無(wú)關(guān)，可以在沒(méi)有框架或任何框架拼寫(xiě)標(biāo)準(zhǔn)化的情況下工作。因?yàn)椴皇褂肑S語(yǔ)言，并受到很多瀏覽器的支持。其bundle的大小和消耗也將是最優(yōu)的，而且VDOM呈現(xiàn)震撼人心。
這些組件提供自定義元素，這是一個(gè)允許定義新的html標(biāo)簽的Javascript應(yīng)用程序編程接口，用于指定布局的HTML模板，當(dāng)然還有本質(zhì)上特定于組件的影子DOM。
在這個(gè)領(lǐng)域中需要了解的主要工具是Lit-html， StencilJS,
SvelteJS當(dāng)然還有 Bit，用于可重用的可以在任何地方直接共享、使用和開(kāi)發(fā)的模塊組件。
當(dāng)考慮到用戶(hù)界面開(kāi)發(fā)的未來(lái)，以及組件時(shí)代中模塊度、可重用性、封裝性和標(biāo)準(zhǔn)化的原則時(shí)，web組件就是答案。
2. 框架沖突的未來(lái)?
現(xiàn)在，在NPM下載中React仍然是前端中的“女王”
我們不會(huì)深入探討“哪個(gè)更好，為什么更好”，相反，如果退回一步的話(huà)，你會(huì)注意到更重要更宏大的部分。圍繞組件的前端技術(shù)的總體“市場(chǎng)份額”正在增長(zhǎng)。新開(kāi)發(fā)人員也在快速涌入，工具的使用空間也越來(lái)越大。
那么未來(lái)5年內(nèi)哪個(gè)框架會(huì)成為支配呢?沒(méi)有人知道。但可以肯定地說(shuō)，它將是在原生JS生態(tài)系統(tǒng)中發(fā)揮作用的最佳位置，web組件在其中支配著文檔對(duì)象模型dom。React在NPM中下載量最高。然而——看看這些數(shù)字。似乎在實(shí)際web使用中差距非常小。
令人震驚吧?
實(shí)際上，Vue和React在實(shí)際使用中很接近
隨著未來(lái)與框架無(wú)關(guān)的web組件的標(biāo)準(zhǔn)化，不少人都想知道可能會(huì)對(duì)用戶(hù)界面框架沖突產(chǎn)生的影響。事實(shí)上，我們都知道React確實(shí)不是一個(gè)框架。
3. 組件分離，重用和構(gòu)成
heBit組件：未來(lái)的代碼共享、重用和開(kāi)發(fā)
當(dāng)談到在不久的將來(lái)的前端開(kāi)發(fā)和用戶(hù)界面組件時(shí)，不可能忽視 Bit驚人的promise功能。
Bit（開(kāi)放源）分離并將組件(或任何可重用的JS代碼)轉(zhuǎn)換為共享的構(gòu)建塊，可供在所有項(xiàng)目和應(yīng)用中使用和共享。神奇的是——還可以使用Bit從不同項(xiàng)目開(kāi)發(fā)相同組件，同時(shí)完全控制源代碼更改和整個(gè)依賴(lài)圖。
簡(jiǎn)單地說(shuō)，通過(guò)Bit可以立即在另一個(gè)項(xiàng)目中使用一個(gè)項(xiàng)目中的組件，并開(kāi)發(fā)和同步更改這兩個(gè)組件。團(tuán)隊(duì)工作時(shí)，這個(gè)工作流將通過(guò)Bit的組件中心 bit.dev 加強(qiáng)，可以在其中組織和共享團(tuán)隊(duì)代碼。
組件中心提供了在組件上共享和協(xié)作所需的一切，從漂亮的搜索和發(fā)現(xiàn)體驗(yàn)到實(shí)時(shí)組件playground，持續(xù)集成和持續(xù)交付的充分支持等。
通過(guò)Bit可以充分構(gòu)建應(yīng)用程序，即時(shí)獲得團(tuán)隊(duì)和開(kāi)源社區(qū)寫(xiě)入的所有組件，并立即共享新組件或建議對(duì)現(xiàn)有組件進(jìn)行更新。
4. ES模塊和內(nèi)容分發(fā)網(wǎng)絡(luò)
ES模塊是在瀏覽器中用模塊工作的標(biāo)準(zhǔn)，被ECMAScript標(biāo)準(zhǔn)化。使用ES模塊可以很容易地將功能封裝進(jìn)模塊中，可以通過(guò)內(nèi)容分發(fā)網(wǎng)絡(luò)等方式使用。隨著Firefox 60的發(fā)布，所有主流的瀏覽器都將支持ES模塊，Node mteam正致力將ES模塊支持添加到Node.js中。另外，用于WebAssembly的ES模塊整合將在未來(lái)幾年內(nèi)實(shí)現(xiàn)。想象一下，JS組件與Bit分離，并通過(guò) bit.dev內(nèi)容分發(fā)網(wǎng)絡(luò)使用。
5. 組件級(jí)別的狀態(tài)管理
那么狀態(tài)管理有什么新變化呢?我們只需要在Redux中就能管理一切事務(wù)嗎?
但這可能很難實(shí)現(xiàn)充分利用組件，使模塊得到重用。React新的Context API 和 Hooks意味著不需要第三方庫(kù)，便可以在功能組件級(jí)別管理狀態(tài)，從而提高模塊度和可重用性。
因此，展望未來(lái)，我們可以嘗試更多地從封裝組件而較少?gòu)娜驊?yīng)用商店的角度來(lái)考慮狀態(tài)管理。
6. 構(gòu)成樣式化組件
Bit模塊:由獨(dú)立邏輯和主題組件構(gòu)成樣式
過(guò)去兩年有很多關(guān)于樣式化組件的討論。從內(nèi)聯(lián)層疊樣式表或?qū)盈B樣式表模塊到JS中的層疊樣式表和樣式組件，甚至像stylable這樣的中途解決方案，有很多解決方案。
未來(lái)幾年，樣式可以作為一種構(gòu)成。這意味著，組件設(shè)計(jì)體系應(yīng)該同時(shí)包含邏輯組件和主題組件，可以使用Bit之類(lèi)的工具構(gòu)成。通過(guò)這種方式可以創(chuàng)建一個(gè)設(shè)計(jì)體系，根據(jù)需要進(jìn)行發(fā)展和改變，不會(huì)將一個(gè)復(fù)雜的庫(kù)強(qiáng)加給不愿意去應(yīng)用的開(kāi)發(fā)人員。設(shè)計(jì)工具本身如Sketch an Figma，利用will組件來(lái)達(dá)到這個(gè)目的(結(jié)合Bi得到最終的組件設(shè)計(jì)體系。
7. 用于數(shù)據(jù)驅(qū)動(dòng)應(yīng)用程序的GraphQL應(yīng)用程序編程接口客戶(hù)端
令人興奮的是，在客戶(hù)端有很大的可能性來(lái)通過(guò)組件使用GraphQL。使用阿波羅可以輕松通過(guò)GraphQL構(gòu)建獲取數(shù)據(jù)的用戶(hù)界面組件。結(jié)合Bit能從正在處理的項(xiàng)目中導(dǎo)入和開(kāi)發(fā)這些組件。
通過(guò)對(duì)應(yīng)用程序編程接口的智能管理，可以簡(jiǎn)化圍繞數(shù)據(jù)驅(qū)動(dòng)應(yīng)用程序開(kāi)發(fā)的工作流，加快開(kāi)發(fā)速度。所以對(duì)未來(lái)幾年的展望絕對(duì)是值得的。
8. 基于組件的設(shè)計(jì)工具
隨著組件變?yōu)榱嗽O(shè)計(jì)體系，設(shè)計(jì)師和開(kāi)發(fā)人員雙方都在向彼此靠近。也就是從雙方來(lái)看，這是可能的。
Sketch已經(jīng)在設(shè)計(jì)組件之間創(chuàng)建了依賴(lài)關(guān)系，因此可以模塊化的方式設(shè)計(jì)和更新。代碼組件的整合已經(jīng)出現(xiàn)，這只是時(shí)間問(wèn)題。
Figma這類(lèi)的工具是徹底基于可重用的用戶(hù)界面元素構(gòu)建的。Framer Team正在為編寫(xiě)代碼的設(shè)計(jì)人員構(gòu)建一個(gè)工具，能夠在一定程度上控制將用戶(hù)界面元素轉(zhuǎn)換為可重用的React組件。
通過(guò)Bit可以將設(shè)計(jì)的組件轉(zhuǎn)換為可重用的構(gòu)建塊，并可以在任何地方直觀發(fā)現(xiàn)、使用甚至開(kāi)發(fā)，從而彌補(bǔ)與開(kāi)發(fā)人員之間的差距。Bit +組件設(shè)計(jì)工具未來(lái)大有可為。通過(guò)內(nèi)容分發(fā)網(wǎng)絡(luò)使用Bit和web組件是個(gè)完整的構(gòu)成。
留言 點(diǎn)贊 關(guān)注
我們一起分享AI學(xué)習(xí)與發(fā)展的干貨
歡迎關(guān)注全平臺(tái)AI垂類(lèi)自媒體 “讀芯術(shù)”
eact18內(nèi)核探秘：手寫(xiě)React高質(zhì)量源碼邁向高階開(kāi)發(fā)
download: https://www.666xit.com/4202/
RN簡(jiǎn)介React Native(簡(jiǎn)稱(chēng)RN)是Facebook于2015年4月開(kāi)源的跨渠道移動(dòng)運(yùn)用開(kāi)發(fā)結(jié)構(gòu)，是Facebook新近開(kāi)源的JS結(jié)構(gòu)React在原生移動(dòng)運(yùn)用渠道的衍生產(chǎn)品，現(xiàn)在支撐iOS和安卓?jī)纱笄馈N運(yùn)用Javascript言語(yǔ)，類(lèi)似于HTML的JSX，以及CSS來(lái)開(kāi)發(fā)移動(dòng)運(yùn)用，因此了解Web前端開(kāi)發(fā)的技術(shù)人員只需很少的學(xué)習(xí)就能夠進(jìn)入移動(dòng)運(yùn)用開(kāi)發(fā)范疇。
React Native
看起來(lái)很像
React
，只不過(guò)其根底組件是原生組件而非 web 組件。要了解
React Native
運(yùn)用的根本結(jié)構(gòu)，首要需求了解一些根本的
React
的概念，比如
JSX
語(yǔ)法、組件、
state
狀況以及
props
特色。
React Native開(kāi)發(fā)特色:
一次學(xué)習(xí)，隨處編寫(xiě):運(yùn)用React Native可認(rèn)為iOS和Android操作系統(tǒng)開(kāi)發(fā)運(yùn)用程序，不同渠道上的代碼依據(jù)渠道會(huì)有一些微小的差異。混合開(kāi)發(fā):React Native代碼開(kāi)發(fā)的模塊與原生代碼開(kāi)發(fā)的模塊能夠雙向通信、無(wú)縫聯(lián)接；高效的移動(dòng)運(yùn)用開(kāi)發(fā):（1）共同的UI完結(jié)結(jié)構(gòu)（2）組件化開(kāi)發(fā)（3）跨渠道移植代碼敏捷（4）自動(dòng)匹配不同屏幕巨細(xì)的手機(jī)高效的移動(dòng)運(yùn)用開(kāi)發(fā)調(diào)試高效的運(yùn)用熱更新有效下降移動(dòng)運(yùn)用裝置包體積學(xué)習(xí)門(mén)檻低、開(kāi)發(fā)難度低運(yùn)用React Native開(kāi)發(fā)的價(jià)值為了得到React Native開(kāi)發(fā)的長(zhǎng)處，運(yùn)用React Native開(kāi)發(fā)的APP也需求付出必定的價(jià)值。（1）內(nèi)存耗費(fèi)大運(yùn)用React Native開(kāi)發(fā)的程序運(yùn)行所需的內(nèi)存比原生代碼開(kāi)發(fā)的程序略多。（2）運(yùn)行速度運(yùn)用React Native開(kāi)發(fā)的代碼運(yùn)行速度比原生代碼略慢。
React 與 React Native 除了在編碼體現(xiàn)層都運(yùn)用 JSX 語(yǔ)法外，在 React 與 React Native 的底層都有 Virtual DOM 與 DOM 之間的映射與轉(zhuǎn)換，以完結(jié)了頁(yè)面組件高效更新的前端體現(xiàn)。
現(xiàn)在最新版本是0.59React Native中文網(wǎng)
React Native
與
React
的關(guān)系及特色:
React
是根底結(jié)構(gòu)，是一套根底規(guī)劃完結(jié)理念，開(kāi)發(fā)者不能直接運(yùn)用它來(lái)開(kāi)發(fā)移動(dòng)運(yùn)用或網(wǎng)頁(yè)。在
React
之上開(kāi)展出了
React.js
結(jié)構(gòu)用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)，開(kāi)展出來(lái)
React Native
用來(lái)開(kāi)發(fā)移動(dòng)運(yùn)用。底層原理是相同的，都是運(yùn)用js完結(jié)虛擬dom樹(shù)來(lái)驅(qū)動(dòng)頁(yè)面的烘托，react是驅(qū)動(dòng)HTML dom的烘托，react native是驅(qū)動(dòng)原生組件的烘托。
React.js
:目的 是為了使前端的V層更具組件化，能更好的復(fù)用，它能夠運(yùn)用簡(jiǎn)略的html標(biāo)簽創(chuàng)立更多的自界說(shuō)組件標(biāo)簽，內(nèi)部綁定事情，同時(shí)能夠讓你從操作dom中解脫出來(lái)，只需求操作數(shù)據(jù)就會(huì)改動(dòng)相應(yīng)的dom。
二者都是依據(jù)組件（
component
）開(kāi)發(fā)，然后組件和組件之間經(jīng)過(guò)
props
傳遞辦法，每個(gè)組件都有一個(gè)狀況
（state）
，當(dāng)某個(gè)辦法改動(dòng)了這個(gè)狀況值時(shí)，整個(gè)組件就會(huì)重繪，然后到達(dá)改寫(xiě)。另外，說(shuō)到重繪就要說(shuō)到
虛擬dom
了，便是用js模仿
dom
結(jié)構(gòu)，等整個(gè)組件的
dom
更新結(jié)束，它會(huì)有一個(gè)
diff
的進(jìn)程，對(duì)比出哪些組件發(fā)生了改動(dòng)，然后才烘托到頁(yè)面，簡(jiǎn)略來(lái)說(shuō)只更新了比較之前改動(dòng)了的部分，而不是全部改寫(xiě)，所以功率很高。
虛擬DOM（Virtual DOM）
的機(jī)制：在瀏覽器端用
Javascript
完結(jié)了一套
DOM API
。依據(jù)
React
進(jìn)行開(kāi)發(fā)時(shí)一切的
DOM
結(jié)構(gòu)都是經(jīng)過(guò)虛擬
DOM
進(jìn)行，每當(dāng)數(shù)據(jù)改動(dòng)時(shí)，React都會(huì)從頭構(gòu)建整個(gè)DOM樹(shù)，然后React將當(dāng)時(shí)整個(gè)DOM樹(shù)和上一次的DOM樹(shù)進(jìn)行對(duì)比，得到DOM結(jié)構(gòu)的差異，然后只是將需求改動(dòng)的部分進(jìn)行實(shí)際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的改寫(xiě)，在一個(gè)事情循環(huán)（Event Loop）內(nèi)的兩次數(shù)據(jù)改動(dòng)會(huì)被兼并。
2.React詳解
React 官網(wǎng)React GitHub 地址React菜鳥(niǎo)教程React介紹學(xué)習(xí)生態(tài)介紹
Vue生態(tài)：Vue + Vue-Router + Vuex + Axios + Babel + WebpackReact生態(tài)：React + React-Router + Redux + Axios + Babel + Webpack
2.1.React 簡(jiǎn)介
React是一個(gè)聲明式，高效且靈活的用于構(gòu)建用戶(hù)界面的 JavaScript 庫(kù)。運(yùn)用 React 能夠?qū)⒁恍┖?jiǎn)短、獨(dú)立的代碼片段組合成復(fù)雜的 UI 界面，這些代碼片段被稱(chēng)作“組件”。
React
特色
1.聲明式規(guī)劃 React采用聲明范式，能夠輕松描繪運(yùn)用。2.高效 React經(jīng)過(guò)對(duì)DOM的模仿，最大極限地減少與DOM的交互。3.靈活 React能夠與已知的庫(kù)或結(jié)構(gòu)很好地合作。4.JSX JSX是JavaScript語(yǔ)法的擴(kuò)展。React 開(kāi)發(fā)不必定運(yùn)用 JSX ，但咱們主張運(yùn)用它。5.組件 經(jīng)過(guò)React構(gòu)建組件，使得代碼愈加容易得到復(fù)用，能夠很好的運(yùn)用在大項(xiàng)目的開(kāi)發(fā)中。6.單向呼應(yīng)的數(shù)據(jù)流 React完結(jié)了單向呼應(yīng)的數(shù)據(jù)流，然后減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)略。2.2 React運(yùn)用
1.React 環(huán)境裝備裝置
運(yùn)用 React CDN 庫(kù)經(jīng)過(guò) npm 運(yùn)用 React運(yùn)用 create-react-app 快速構(gòu)建 React 開(kāi)發(fā)環(huán)境2.3React render 烘托
屏幕輸出：Hello, React
Title
ReactDOM.render(
,document.getElementById('root'));
3.React JSX
React 運(yùn)用 JSX 來(lái)代替慣例的 JavaScript。
1.React JSX簡(jiǎn)介
JSX：JavaScript XML，一種類(lèi)似于XML的JS擴(kuò)展語(yǔ)法。也能夠了解成：契合 XML 標(biāo)準(zhǔn)的 JS 語(yǔ)法。
JSX語(yǔ)法的實(shí)質(zhì)：以 React.createElement 的形式來(lái)完結(jié)的，并沒(méi)有直接把 用戶(hù)寫(xiě)的 HTML代碼，烘托到頁(yè)面上。運(yùn)用babel轉(zhuǎn)換工具將 JSX語(yǔ)法 轉(zhuǎn)換為 JS語(yǔ)法。
咱們不需求必定運(yùn)用 JSX，但它有以下長(zhǎng)處：
JSX 履行更快，由于它在編譯為 JavaScript 代碼后進(jìn)行了優(yōu)化。它是類(lèi)型安全的，在編譯進(jìn)程中就能發(fā)現(xiàn)錯(cuò)誤。運(yùn)用 JSX 編寫(xiě)模板愈加簡(jiǎn)略快速。
const element=
;
這種看起來(lái)或許有些奇怪的標(biāo)簽語(yǔ)法既不是字符串也不是 HTML。它被稱(chēng)為 JSX， 一種 JavaScript 的語(yǔ)法擴(kuò)展。 咱們推薦在 React 中運(yùn)用 JSX 來(lái)描繪用戶(hù)界面。JSX 是在 JavaScript 內(nèi)部完結(jié)的。
2.JSX的根本語(yǔ)法
（1）在 JSX內(nèi)部 寫(xiě) JS代碼：假如要在 JSX 語(yǔ)法內(nèi)部，書(shū)寫(xiě) JS 代碼，那么，一切的JS代碼有必要寫(xiě)到 {} 的內(nèi)部。在{}內(nèi)部，能夠?qū)懭魏纹鹾螶S標(biāo)準(zhǔn)的代碼。
例如：
var myTitle='這是運(yùn)用變量界說(shuō)的 tilte 值'// 運(yùn)用JSX語(yǔ)法 創(chuàng)立虛擬DOM目標(biāo)var vDom=(
Hello, React!這是標(biāo)題);
（2）當(dāng)編譯引擎在編譯JSX代碼的時(shí)分，假如遇到了<，會(huì)把它當(dāng)作 HTML代碼 去編譯；假如遇到了 {}， 會(huì)把方括號(hào)里邊的代碼當(dāng)作 一般JS代碼 去編譯。
（3）在JSX中，假如要為元素添加class特色，則有必要寫(xiě)成className，由于 class在ES6中是一個(gè)關(guān)鍵字；和class類(lèi)似，label標(biāo)簽的 for 特色需求替換為 htmlFor。
代碼舉例：
// 運(yùn)用JSX語(yǔ)法 創(chuàng)立虛擬DOM目標(biāo)var vDom=(
Hello, React!千古壹號(hào)
);
（4）在JSX創(chuàng)立DOM的時(shí)分，一切的節(jié)點(diǎn)，有必要有唯一的根元素進(jìn)行包裹。
（5）假如要寫(xiě)注釋?zhuān)⑨層斜匾诺?{} 內(nèi)部。例如：
// 運(yùn)用JSX語(yǔ)法 創(chuàng)立虛擬DOM目標(biāo)var vDom=(// 這一行是注釋
Hello, React!
千古壹號(hào)
{/*這一行也是注釋 */});
最后，再舉個(gè)比如：
Document
//頁(yè)面中的實(shí)在容器元素var containDiv=document.getElementById("app");var arr=[]for (var i=0; i < 6; i++) {var p=這個(gè)是p標(biāo)簽
// 注意這個(gè)地方的寫(xiě)法： key={i}arr.push(p)}//1、運(yùn)用JSX語(yǔ)法 創(chuàng)立虛擬DOM目標(biāo)var vDom=(Hello, React!{arr});//2、烘托虛擬DOM目標(biāo)ReactDOM.render(vDom, containDiv); // 參數(shù)1：虛擬DOM目標(biāo)；參數(shù)2：頁(yè)面中的容器
4.React 組件 狀況(State&props) 生命周期詳解
React 把組件看成是一個(gè)狀況機(jī)（State Machines）。經(jīng)過(guò)與用戶(hù)的交互，完結(jié)不同狀況，然后烘托 UI，讓用戶(hù)界面和數(shù)據(jù)保持一致。
React 里，只需更新組件的 state，然后依據(jù)新的 state 從頭烘托用戶(hù)界面（不要操作 DOM）。
創(chuàng)立組件的第一種方式:在React中，結(jié)構(gòu)函數(shù)便是一個(gè)最根本的組件。假如想要把組件放到頁(yè)面中，能夠把結(jié)構(gòu)函數(shù)的名稱(chēng)當(dāng)作組件的名稱(chēng)，以 HTML標(biāo)簽形式引進(jìn)頁(yè)面中即可。創(chuàng)立組件的第二種方式：運(yùn)用 class 關(guān)鍵字運(yùn)用 function 創(chuàng)立的組件，叫做【無(wú)狀況組件】；運(yùn)用 class 創(chuàng)立的組件，叫做【有狀況組件】。實(shí)質(zhì)差異：有狀況組件和無(wú)狀況組件，最實(shí)質(zhì)的差異，便是有無(wú) state 特色。同時(shí)， class 創(chuàng)立的組件，有自己的生命周期函數(shù)，可是，function 創(chuàng)立的 組件，沒(méi)有自己的生命周期函數(shù)。
state 和 props 主要的差異在于 props 是不可變的，而 state 能夠依據(jù)與用戶(hù)交互來(lái)改動(dòng)。這便是為什么有些容器組件需求界說(shuō) state 來(lái)更新和修改數(shù)據(jù)。 而子組件只能經(jīng)過(guò) props 來(lái)傳遞數(shù)據(jù)。
組件API
設(shè)置狀況：setState替換狀況：replaceState設(shè)置特色：setProps替換特色：replaceProps強(qiáng)制更新：forceUpdate獲取DOM節(jié)點(diǎn)：findDOMNode判別組件掛載狀況：isMounted
組件的生命周期可分成三個(gè)狀況：
在組件創(chuàng)立、到加載到頁(yè)面上運(yùn)行、以及組件被毀掉的進(jìn)程中，總是伴隨著各式各樣的事情，這些在組件特定時(shí)期，觸發(fā)的事情統(tǒng)稱(chēng)為組件的生命周期。Mounting：已插入實(shí)在 DOMUpdating：正在被從頭烘托Unmounting：已移出實(shí)在 DOM
生命周期的辦法有：
componentWillMount 在烘托前調(diào)用,在客戶(hù)端也在服務(wù)端。componentDidMount : 在第一次烘托后調(diào)用，只在客戶(hù)端。之后組件現(xiàn)已生成了對(duì)應(yīng)的DOM結(jié)構(gòu)，能夠經(jīng)過(guò)this.getDOMNode()來(lái)進(jìn)行拜訪。 假如你想和其他JavaScript結(jié)構(gòu)一起運(yùn)用，能夠在這個(gè)辦法中調(diào)用setTimeout, setInterval或許發(fā)送AJAX請(qǐng)求等操作(防止異步操作阻塞UI)。componentWillReceiveProps 在組件接納到一個(gè)新的 prop (更新后)時(shí)被調(diào)用。這個(gè)辦法在初始化render時(shí)不會(huì)被調(diào)用。shouldComponentUpdate 回來(lái)一個(gè)布爾值。在組件接納到新的props或許state時(shí)被調(diào)用。在初始化時(shí)或許運(yùn)用forceUpdate時(shí)不被調(diào)用。能夠在你確認(rèn)不需求更新組件時(shí)運(yùn)用。componentWillUpdate在組件接納到新的props或許state但還沒(méi)有render時(shí)被調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。componentDidUpdate 在組件完結(jié)更新后立即調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。componentWillUnmount在組件從 DOM 中移除之前馬上被調(diào)用。1.組件創(chuàng)立階段
組件創(chuàng)立階段的生命周期函數(shù)，有一個(gè)明顯的特色：創(chuàng)立階段的生命周期函數(shù)，在組件的一輩子中，只履行一次。
getDefaultProps初始化 props 特色默認(rèn)值。
getInitialState初始化組件的私有數(shù)據(jù)。由于 state 是界說(shuō)在組件的 constructor 結(jié)構(gòu)器當(dāng)中的，只需new 了 class類(lèi)，必定會(huì)調(diào)用 constructor結(jié)構(gòu)器。
componentWillMount()組件將要被掛載。此刻還沒(méi)有開(kāi)端烘托虛擬DOM。
在這個(gè)階段，不能去操作DOM元素，但能夠操作特色、狀況、function。相當(dāng)于 Vue 中的Create()函數(shù)。
render()第一次開(kāi)端烘托真實(shí)的虛擬DOM。當(dāng)render履行完，內(nèi)存中就有了完好的虛擬DOM了。
意思是，此刻，虛擬DOM在內(nèi)存中創(chuàng)立好了，可是還沒(méi)有掛在到頁(yè)面上。
在這個(gè)函數(shù)內(nèi)部，不能去操作DOM元素，由于還沒(méi)return之前，虛擬DOM還沒(méi)有創(chuàng)立；當(dāng)return履行結(jié)束后，虛擬DOM就創(chuàng)立好了，可是還沒(méi)有掛在到頁(yè)面上。
componentDidMount()當(dāng)組件（虛擬DOM）掛載到頁(yè)面之后，會(huì)進(jìn)入這個(gè)生命周期函數(shù)。
只需進(jìn)入到這個(gè)生命周期函數(shù)，則必定闡明，頁(yè)面上現(xiàn)已有可見(jiàn)的DOM元素了。此刻，組件現(xiàn)已顯示到了頁(yè)面上，state上的數(shù)據(jù)、內(nèi)存中的虛擬DOM、以及瀏覽器中的頁(yè)面，現(xiàn)已徹底保持一致了。
當(dāng)這個(gè)辦法履行完，組件就進(jìn)入都了 運(yùn)行中 的狀況。所以說(shuō)，componentDidMount 是創(chuàng)立階段的最后一個(gè)函數(shù)。
在這個(gè)函數(shù)中，咱們能夠放心的去 操作 頁(yè)面上你需求運(yùn)用的 DOM 元素了。假如咱們想操作DOM元素，最早只能在 componentDidMount 中進(jìn)行。相當(dāng)于 Vue 中的 mounted() 函數(shù)
2、組件運(yùn)行階段
有一個(gè)明顯的特色，依據(jù)組件的state和props的改動(dòng)，有選擇性的觸發(fā)0次或?qū)掖巍?/p>
componentWillReceiveProps()組件將要接納新特色。只有當(dāng)父組件中，經(jīng)過(guò)某些事情，從頭修改了 傳遞給 子組件的 props 數(shù)據(jù)之后，才會(huì)觸發(fā)這個(gè)鉤子函數(shù)。
shouldComponentUpdate()判別組件是否需求被更新。此刻，組件尚未被更新，可是，state 和 props 肯定是最新的。
componentWillUpdate()組件將要被更新。此刻，組件還沒(méi)有被更新，在進(jìn)入到這個(gè)生命周期函數(shù)的時(shí)分，內(nèi)存中的虛擬DOM還是舊的，頁(yè)面上的 DOM 元素也是舊的。（也便是說(shuō)，此刻操作的是舊的 DOM元素）
render此刻，又要依據(jù)最新的 state 和 props，從頭烘托一棵內(nèi)存中的 虛擬DOM樹(shù)。當(dāng) render 調(diào)用結(jié)束，內(nèi)存中的舊DOM樹(shù)，現(xiàn)已被新DOM樹(shù)替換了！此刻，虛擬DOM樹(shù)現(xiàn)已和組件的 state 保持一致了，都是最新的；可是頁(yè)面還是舊的。
componentDidUpdate此刻，組件完結(jié)更新，頁(yè)面被從頭烘托。此刻，state、虛擬DOM 和 頁(yè)面現(xiàn)已徹底保持同步。
3、組件毀掉階段
一輩子只履行一次。
componentWillUnmount: 組件將要被卸載。此刻組件還能夠正常運(yùn)用。生命周期對(duì)比：
vue中的生命周期圖React Native 中組件的生命周期
組件生命周期的履行次序總結(jié)
1、Mounting：
constructor()componentWillMount()render()componentDidMount()2、Updating：
componentWillReceiveProps(nextProps)：接納父組件傳遞過(guò)來(lái)的特色shouldComponentUpdate(nextProps, nextState)：一旦調(diào)用 setState，就會(huì)觸發(fā)這個(gè)辦法。辦法默認(rèn) return true；假如 return false，后續(xù)的辦法就不會(huì)走了。componentWillUpdate(nextProps, nextState)render()componentDidUpdate(prevProps, prevState)3、Unmounting：
componentWillUnmount()5.React 事情處理
React 元素的事情處理和 DOM 元素類(lèi)似。可是有一點(diǎn)語(yǔ)法上的不同:
React 事情綁定特色的命名采用駝峰式寫(xiě)法，而不是小寫(xiě)。假如采用 JSX 的語(yǔ)法你需求傳入一個(gè)函數(shù)作為事情處理函數(shù)，而不是一個(gè)字符串(DOM 元素的寫(xiě)法)
//HTML 一般寫(xiě)法是：激活按鈕//React 中寫(xiě)法為：激活按鈕
多初學(xué)者經(jīng)常會(huì)問(wèn) “我需要學(xué)習(xí)哪個(gè)框架 ？” 以及 “學(xué)習(xí)框架前需要掌握多少 JS 或者 TS ？” 無(wú)數(shù)帶有主觀色彩的文章都在宣傳作者首選框架或庫(kù)的優(yōu)勢(shì)，而不是向讀者展示其背后的概念以做出更明智的決定。所以讓我們先解決第二個(gè)問(wèn)題
盡可能多地去學(xué)以讓更好的你理解它們所基于的概念。你將需要了解基本數(shù)據(jù)類(lèi)型、函數(shù)、基本運(yùn)算符和文檔對(duì)象模型 ( DOM )，這是 HTML 和 CSS 在 JS 中的表示。除此之外的一切也都 OK，但并不嚴(yán)格要求某個(gè)精通框架或庫(kù)。
如果你是一個(gè)完完全全的新手，JS for cats 應(yīng)該是一個(gè)不錯(cuò)的入門(mén)資料。持續(xù)學(xué)習(xí)，直到你感到自信為止，然后繼續(xù)前進(jìn)，直到你再次感到自信為止。當(dāng)掌握了足夠的 JS / TS 知識(shí)后，你就可以開(kāi)始學(xué)習(xí)框架。其他的知識(shí)你可以并行學(xué)習(xí)。
所有現(xiàn)代框架都從這些概念中派生出它們的功能
State 只是為你的應(yīng)用程序提供動(dòng)力的數(shù)據(jù)。它可能在全局級(jí)別，適用于應(yīng)用程序的大部分組件，或適用于單個(gè)組件。讓我們寫(xiě)一個(gè)計(jì)數(shù)器的簡(jiǎn)單例子來(lái)說(shuō)明一下。它保留的計(jì)數(shù)是 state 。我們可以讀取 state 或者寫(xiě)入 state 以增加計(jì)數(shù)
最簡(jiǎn)單的表示通常是一個(gè)變量，其中包含我們的狀態(tài)所包含的數(shù)據(jù)：
let count=0;
const increment=()=> { count++; };
const button=document.createElement('button');
button.textContent=count;
button.addEventListener('click', increment);
document.body.appendChild(button);
復(fù)制代碼但這個(gè)代碼有個(gè)問(wèn)題：類(lèi)似調(diào)用 increment 方法一樣去修改 count 的值 ，并不會(huì)自動(dòng)修改 button 的文案。我們需要手動(dòng)去更新所有的內(nèi)容，但這樣的做法在復(fù)雜場(chǎng)景下代碼的可維護(hù)性 & 擴(kuò)展性都不是很好。
讓 count 自動(dòng)更新依賴(lài)它的使用方的能力稱(chēng)之為 reactivity（響應(yīng)式）。這是通過(guò)訂閱并重新運(yùn)行應(yīng)用程序的訂閱部分來(lái)更新的。
幾乎所有的現(xiàn)代前端框架和庫(kù)都擁有讓 state 變成 reactivity 的能力。基本上可以分為 3 種解決方案，采用其中至少一種或者多種混用來(lái)實(shí)現(xiàn)這個(gè)能力：
這些概念還是直接用英文表達(dá)比較貼切
Observables 基本上是在讀取 state 的時(shí)候通過(guò)一個(gè)訂閱方法來(lái)收集依賴(lài)，然后在更新的時(shí)候觸發(fā)依賴(lài)的更新
const state=(initialValue)=> ({
_value: initialValue,
get: function() {
/* 訂閱 */;
return this._value;
},
set: function(value) {
this._value=value;
/* 觸發(fā)更新 */;
}
});
復(fù)制代碼knockout 是最早使用這個(gè)概念的框架之一，它使用帶有 / 不帶參數(shù)的相同函數(shù)進(jìn)行寫(xiě)/讀訪問(wèn)
這種模式最近有開(kāi)始有框架通過(guò) signals 來(lái)實(shí)現(xiàn)，比如 Solid.js 和 preact signals ；相同的模式也在 Vue 和 Svelte 中使用到。RxJS 為 Angular 的 reactive 層提供底層能力，是這一模式的延伸，超越了簡(jiǎn)單狀態(tài)。Solid.js 用 Stores（一些通過(guò) setter 方法來(lái)操作的對(duì)象）的方式進(jìn)一步抽象了 signals
不可變意味著如果對(duì)象的某個(gè)屬性發(fā)生改變，那么整個(gè)對(duì)象的引用就會(huì)發(fā)生改變。所以協(xié)調(diào)器做的事情就包括通過(guò)簡(jiǎn)單的引用對(duì)比就判斷出對(duì)象是否發(fā)生了改變
const state1={
todos: [{ text: 'understand immutability', complete: false }],
currentText: ''
};
// 更新 currentText 屬性
const state2={
todos: state1.todos,
currentText: 'understand reconciliation'
};
// 添加一個(gè) todo
const state3={
todos: [
state1.todos[0],
{ text: 'understand reconciliation', complete: true }
],
currentText: ''
};
// 由于不可變性，這里將會(huì)報(bào)錯(cuò)
state3.currentText='I am not immutable!';
復(fù)制代碼如你所見(jiàn)，未變更項(xiàng)目的引用被重新使用。如果協(xié)調(diào)器檢測(cè)到不同的對(duì)象引用，那么它將重新運(yùn)行所有的組件，讓所有的組件的 state （props, memos, effects, context） 都使用最新的這個(gè)對(duì)象。由于讀取訪問(wèn)是被動(dòng)的，所以需要手動(dòng)指定對(duì)響應(yīng)值的依賴(lài)。
很顯然，你不會(huì)用上面這種方式定義 state 。要么你是從一個(gè)已經(jīng)存在的屬性構(gòu)造 state ，要么你會(huì)使用 reducer 來(lái)構(gòu)造 state。一個(gè) reducer 函數(shù)就是接收一個(gè) state 對(duì)象然后返回一個(gè)新的 state 對(duì)象。
react 和 preact 就使用這種模式。它適合與 vDOM 一起使用，我們將在稍后描述模板時(shí)探討它。
并不是所有的框架都借助 vDOM 將 state 變成完成響應(yīng)式。例如 Mithril.JS 要不是在 state 修改后觸發(fā)對(duì)應(yīng)的生命周期事件，要不是手動(dòng)調(diào)用 m.redraw() 方法，才能夠觸發(fā)更新
Transpilation 是在構(gòu)建階段，重寫(xiě)我們的代碼讓代碼可以在舊的瀏覽器運(yùn)行或者賦予代碼其他的能力；在這種情況下，轉(zhuǎn)譯則是被用于把一個(gè)簡(jiǎn)單的變量修改成響應(yīng)式系統(tǒng)的一部分。
Svelte 就是基于轉(zhuǎn)譯器，該轉(zhuǎn)譯器還通過(guò)看似簡(jiǎn)單的變量聲明和訪問(wèn)為他們的響應(yīng)式系統(tǒng)提供能力
另外，Solid.js 也是使用 Transpilation ，但 Transpilation 只使用到模版上，沒(méi)有使用到 state 上
大部分情況下，我們需要做的更多是操作響應(yīng)式的 state，而很少需要操作基于 state 的 DOM 渲染。我們需要管理好副作用，這些副作用是由于視圖更新之外的狀態(tài)變化而發(fā)生的所有事情（雖然有些框架把視圖更新也當(dāng)作是副作用，例如 Solid.js ）
記得之前 state 的例子中，我們故意把訂閱操作的代碼留空。現(xiàn)在讓我們把這些留空補(bǔ)齊來(lái)處理副作用，讓程序能夠響應(yīng)更新
const context=[];
const state=(initialValue)=> ({
_subscribers: new Set(),
_value: initialValue,
get: function() {
const current=context.at(-1);
if (current) { this._subscribers.add(current); }
return this._value;
},
set: function(value) {
if (this._value===value) { return; }
this._value=value;
this._subscribers.forEach(sub=> sub());
}
});
const effect=(fn)=> {
const execute=()=> {
context.push(execute);
try { fn(); } finally { context.pop(); }
};
execute();
};
復(fù)制代碼上面代碼基本上是對(duì) preact signals 或者 Solid.js 響應(yīng)式 state 的簡(jiǎn)化版本，它不包含錯(cuò)誤處理和復(fù)雜狀態(tài)處理（使用一個(gè)函數(shù)接收之前的狀態(tài)值，返回下一個(gè)狀態(tài)值），但這些都是很容易就可以加上的
這允許我們使前面的示例具有響應(yīng)性：
const count=state(0);
const increment=()=> count.set(count.get() + 1);
const button=document.createElement('button');
effect(()=> {
button.textContent=count.get();
});
button.addEventListener('click', increment);
document.body.appendChild(button);
復(fù)制代碼? 可以嘗試運(yùn)行一下上面 Effect 的兩個(gè)代碼塊的例子，源代碼地址在 這里
在大多數(shù)情況下，框架允許在不同生命周期，讓 Effect 在渲染 DOM 之前、期間或之后運(yùn)行。
Memoization 意味著緩存 state 值的計(jì)算結(jié)果，并且在結(jié)果的依賴(lài)發(fā)生改變的時(shí)候進(jìn)行更新。它基本上是一種返回派生（derived） state 的 Effect
在某些會(huì)重新運(yùn)行其組件函數(shù)的框架中，如 react 和 preact，允許在它所依賴(lài)的狀態(tài)沒(méi)有改變時(shí)避免這部分組件重新渲染
對(duì)于其他框架，情況恰恰相反：它允許你選擇部分組件進(jìn)行響應(yīng)式更新，同時(shí)緩存之前的計(jì)算
對(duì)于我們簡(jiǎn)單的響應(yīng)系統(tǒng)，memo 大概是這樣實(shí)現(xiàn)
const memo=(fn)=> {
let memoized;
effect(()=> {
if (memoized) {
memoized.set(fn());
} else {
memoized=state(fn());
}
});
return memoized.get;
};
復(fù)制代碼現(xiàn)在有了原始的、派生的和緩存形式的 state，我們想把它展示給用戶(hù)。在我們的例子中，我們直接操作 DOM 來(lái)添加按鈕和更新按鈕的內(nèi)容文案。
為了提升開(kāi)發(fā)體驗(yàn)，幾乎所有的現(xiàn)代框架都支持 DSL 來(lái)在代碼中編寫(xiě)類(lèi)似于所需輸出的內(nèi)容。雖然有不同的風(fēng)格，比如 .jsx ，.vue ，.svelte 文件，但這一切都?xì)w結(jié)為用類(lèi)似于 HTML 的代碼來(lái)表示 DOM。所以基本上是
<div>Hello, World</div>
// 在你的 JS 代碼中
// 變成你的 HTML:
<div>Hello, World</div>
復(fù)制代碼你可以能會(huì)問(wèn)：“在哪里放置我的 state ?”。非常好的問(wèn)題，大部分的情況 下，{} 用于在屬性和節(jié)點(diǎn)中表達(dá)動(dòng)態(tài)內(nèi)容。
最常用的 JS 模板語(yǔ)言擴(kuò)展無(wú)疑是 JSX。在 react 中，它被編譯為存粹的 JavaScript 語(yǔ)言，允許創(chuàng)建對(duì)于 DOM 的虛擬表示，也就是經(jīng)常被提到的「虛擬文檔對(duì)象」或者簡(jiǎn)稱(chēng)為 vDOM。
這是基于創(chuàng)建 JS 對(duì)象比訪問(wèn) DOM 快得多的前提，所以如果你可以用創(chuàng)建 JS 對(duì)象替換訪問(wèn) DOM，那么你就可以節(jié)省時(shí)間
然而，如果你的項(xiàng)目在任何情況下都沒(méi)有大量的 DOM 修改或者只是創(chuàng)建不需要修改的對(duì)象；那么上面這個(gè)方案的優(yōu)點(diǎn)就會(huì)變成缺點(diǎn)，那這個(gè)時(shí)候就需要使用 memoization 來(lái)將缺點(diǎn)的影響降到最小。
// 1. 源代碼
<div>Hello, {name}</div>
// 2. 轉(zhuǎn)譯成 js 代碼
createElement("div", null, "Hello, ", name);
// 3. 執(zhí)行 js 后返回的對(duì)象
{
"$$typeof": Symbol(react.element),
"type": "div",
"key": null,
"ref": null,
"props": {
"children": "Hello, World"
},
"_owner": null
}
// 4. 渲染 vdom
/* HTMLDivElement */<div>Hello, World</div>
復(fù)制代碼JSX 不僅僅用在 react，也用在了 Solid.js。例如，使用 Solid 轉(zhuǎn)譯器更徹底地改變代碼
// 1. 源代碼
<div>Hello, {name()}</div>
// 2. 轉(zhuǎn)譯成 js 代碼
const _tmpl$=/*#__PURE__*/_$template(`<div>Hello, </div>`, 2);
(()=> {
const _el$=_tmpl$.cloneNode(true),
_el$2=_el$.firstChild;
_$insert(_el$, name, null);
return _el$;
})();
// 3. 渲染 vdom
/* HTMLDivElement */<div>Hello, World</div>
復(fù)制代碼雖然轉(zhuǎn)譯之后的代碼一開(kāi)始看到會(huì)覺(jué)得挺嚇人，但它更容易解釋其中代碼的邏輯。首先，模版的靜態(tài)部分被創(chuàng)建出來(lái)；然后，創(chuàng)建出來(lái)的對(duì)象被克隆并創(chuàng)建一個(gè)新的實(shí)例，新的實(shí)例包含被添加的動(dòng)態(tài)部分，以及將動(dòng)態(tài)部分的更新與 state 的更新關(guān)聯(lián)起來(lái)。
Svelte 在轉(zhuǎn)譯的時(shí)候做的工作更多，不僅僅處理了模版，還處理了 state
// 1. 源代碼
<script>
let name='World';
setTimeout(()=> { name='you'; }, 1000);
</script>
<div>Hello, {name}</div>
// 2. 轉(zhuǎn)譯成 js 代碼
/* 生成自 Svelte v3.55.0 版本 */
import {
SvelteComponent,
append,
detach,
element,
init,
insert,
noop,
safe_not_equal,
set_data,
text
} from "svelte/internal";
function create_fragment(ctx) {
let div;
let t0;
let t1;
return {
c() {
div=element("div");
t0=text("Hello, ");
t1=text(/*name*/ ctx[0]);
},
m(target, anchor) {
insert(target, div, anchor);
append(div, t0);
append(div, t1);
},
p(ctx, [dirty]) {
if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);
},
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(div);
}
};
}
function instance($$self, $$props, $$invalidate) {
let name='World';
setTimeout(
()=> {
$$invalidate(0, name='you');
},
1000
);
return [name];
}
class Component extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}
export default Component;
// 3. 執(zhí)行 JS 代碼
/* HTMLDivElement */<div>Hello, World</div>
復(fù)制代碼當(dāng)然也有例外，在 Mithril.js 中，雖然可以使用 JSX，但鼓勵(lì)你編寫(xiě) JS 代碼
// 1. 源代碼
const Hello={
name: 'World',
oninit: ()=> setTimeout(()=> {
Hello.name='you';
m.redraw();
}, 1000),
view: ()=> m('div', 'Hello, ' + Hello.name + '!')
};
// 2. 執(zhí)行 JS 代碼
/* HTMLDivElement */<div>Hello, World</div>
復(fù)制代碼有的人會(huì)覺(jué)得這樣做的開(kāi)發(fā)體驗(yàn)不太好，但有的人更希望對(duì)自己的代碼有更多的控制權(quán)。這取決于他們想要解決的是哪一類(lèi)的問(wèn)題，缺少 transpilation 這個(gè)步驟也可能成為優(yōu)點(diǎn)。
許多其他框架也允許在不進(jìn)行 transpilation 的情況下使用，盡管很少有人這樣推薦。
我有一些好消息和一些壞消息要告訴你
壞消息是：沒(méi)有銀彈。沒(méi)有任何一個(gè)框架是在所有層面都優(yōu)于其他框架的。任何一個(gè)框架都有它的優(yōu)點(diǎn)和妥協(xié)。React 有它的 hook 規(guī)則，Angular 缺乏簡(jiǎn)單的 signals，Vue 的向后兼容性問(wèn)題，Svelte 的伸縮性不太好，Solid.js 禁止解構(gòu)，Mithril.js 不是真正的響應(yīng)式，等等
好消息是：沒(méi)有錯(cuò)誤選擇 —— 除非項(xiàng)目的要求確實(shí)受到限制，無(wú)論是在捆綁包大小還是性能方面。每個(gè)框架都可以完成工作。有些人可能需要解決他們的設(shè)計(jì)決策，這可能會(huì)使你的速度變慢，但無(wú)論如何你都能夠獲得可行的結(jié)果。
話(huà)雖這么說(shuō)，沒(méi)有框架也可能是一個(gè)可行的選擇。許多項(xiàng)目都被過(guò)度使用 JavaScript 破壞了，而帶有一些交互性的靜態(tài)頁(yè)面也可以完成這項(xiàng)工作。
現(xiàn)在你已經(jīng)了解了這些框架和庫(kù)所應(yīng)用的概念，請(qǐng)選擇最適合你當(dāng)前任務(wù)的方案。不要為下個(gè)項(xiàng)目的框架選型而感到擔(dān)心。你不需要學(xué)習(xí)所有的內(nèi)容。
如果你嘗試一個(gè)新的框架，我發(fā)現(xiàn)最有幫助的事情之一就是關(guān)注它的社區(qū)，無(wú)論是在社交媒體、Discord、github 還是其他地方。他們可以告訴你哪些方法適合他們的框架，這將幫助你更快地獲得更好的解決方案。
如果你的主要目標(biāo)是就業(yè)，我建議學(xué)習(xí) React 或者 Vue。 如果你想要輕松的獲取性能和控制體驗(yàn)，請(qǐng)嘗試 Solid.js
但請(qǐng)記住，所有其他選擇都同樣有效。 你不應(yīng)該因?yàn)槲疫@么說(shuō)就選擇一個(gè)框架，而應(yīng)該使用最適合你的框架。
如果你看完了整篇文章，感謝你的耐心等待。 希望對(duì)你有所幫助。 在這里發(fā)表你的評(píng)論，祝你有美好的一天
本文原文地址：https://dev.to/lexlohr/concepts-behind-modern-frameworks-4m1g
本文代碼倉(cāng)庫(kù)地址：https://github.com/zidanDirk/concepts-behind-modern-frameworks/
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
