來到公司的第一天,辦好手續(xù)后,第一件事便是學習React框架。之后要開發(fā)的項目便是使用這個當前最火前端框架(之一),所以在邊學習的過程中做一些學習和使用的心得經(jīng)驗記錄。
八號進入公司,到現(xiàn)在兩天的時間一直在看React的官方文檔,愈發(fā)覺得學習一個框架最好的方式是從它的官方文檔入手。
因為之前一直用jQuery寫項目,現(xiàn)在轉為React框架,兩種工具的編程思維不甚相同,這里做一個總結:
- 一個很大的差別是jQuery推崇獲取元素然后添加事件處理函數(shù),寫出的代碼往往相互糾纏,難以維護,一個事件可以對應多個DOM元素,一個DOM元素也會涉及多個事件。而React的JSX中在元素上直接添加onClick事件
2.jQuery不使用于大型項目的很大的原因就是其獲取元素進行操作的編程模式會造成代碼結構復雜,越到后期越是難以維護
3.React的理念可以歸結為一個公式,UI=render(data),React實踐響應式編程的思想,如果要更新用戶UI,需要做的只是更新data
4.React推崇高內聚設計原則,一個組件文件中含有HTML代碼、css代碼和js代碼。
5.使用React可以避免構建如此復雜的程序結構,開發(fā)者只需要關注data的變化,如何修改和渲染DOM完全由React負責,流程可以歸結為事件驅動render函數(shù),進行DOM的渲染修改。
- React通過重復渲染來實現(xiàn)動態(tài)更新效果,是借助Virtual DOM技術,但是卻不牽涉太多DOM操作,渲染效率很高
React優(yōu)點總結:
- 效率高:使用虛擬DOM,每次數(shù)據(jù)的更新React都會計算出真正需要更新的DOM,進行更改渲染,避免大量不避免的渲染,所以效率極高
- SEO友好
- 適用于大型項目:操作數(shù)據(jù)比操作DOM簡單
在使用了React框架一段時間后,再來更新一下這篇文章,記錄一些新的理解。
前端為什么使用框架
這個問題其實也困惑過我?guī)滋欤琑eact能寫的東西,我使用jQuery也能寫出來,并不能在性能方面和工程量方面獲得顯著的提升。這里說一下現(xiàn)在我的理解,框架是為了方便快速開發(fā)項目而存在的,框架有許多成熟便捷的插件供我們使用,以此來開發(fā)豐富的功能,否則靠自己去寫工程量無疑是巨大的。
為什么不推薦直接操作DOM的jQuery
除了隨著項目的開發(fā),代碼會日益增多并相互影響,最重要的一點在于,如果有一條數(shù)據(jù)用于多個組件的渲染,一旦這個數(shù)據(jù)發(fā)生改變,變?yōu)榱硪粋€數(shù)據(jù)源,就有多個組件來同步這個改變。那么如何保證可以正確的同步所有組件的對于數(shù)據(jù)獲取的改變呢,并且工作量也非常大。
項目工程化
使用React的同時,使用webpack進行項目的工程化開發(fā),并且可以規(guī)范代碼,提高可維護性。
提前擁抱ES6
借助webpack的babel插件,使用更優(yōu)雅更健全的ES6。
在知乎上看到一位答主對于為什么我們使用React的回答,覺得獲益匪淺,這里貼一下鏈接我們?yōu)槭裁葱枰?React? - itlr的回答 - 知乎
https://www.zhihu.com/question/47161776/answer/111385071