開始入坑react

來到公司的第一天,辦好手續(xù)后,第一件事便是學習React框架。之后要開發(fā)的項目便是使用這個當前最火前端框架(之一),所以在邊學習的過程中做一些學習和使用的心得經(jīng)驗記錄。
八號進入公司,到現(xiàn)在兩天的時間一直在看React的官方文檔,愈發(fā)覺得學習一個框架最好的方式是從它的官方文檔入手。
因為之前一直用jQuery寫項目,現(xiàn)在轉為React框架,兩種工具的編程思維不甚相同,這里做一個總結:

  1. 一個很大的差別是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的渲染修改。

  1. 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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,527評論 6 544
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,687評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,640評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,957評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,682評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,011評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,009評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,183評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,714評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,435評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,665評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,148評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,838評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,251評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,588評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,379評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,627評論 2 380

推薦閱讀更多精彩內容

  • React Native 是一款用來開發(fā)真正原生、可渲染 iOS 和 Android 移動應用的 JavaScri...
    圖靈教育閱讀 4,409評論 3 14
  • 做前端肯定離不開UI。 基于React的UI React本身就是做VIEW的,被包裝成的React的組件,說白了就...
    松鼠楊閱讀 3,836評論 0 5
  • 寫代碼,好的編碼工具是必不可少的.經(jīng)做web前端的同事推薦選用WebStorm,WebStorm是jetbrain...
    Hpaul閱讀 4,785評論 4 4
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,764評論 25 708
  • 明知道最后不能在一起,我卻還想著“再堅持一下,說不定會有轉機”,也許在未來的某天,我會感嘆再也沒有一個人,對我會...
    帥帥的蒤蒤閱讀 235評論 0 0