React三大屬性

  最近學習了一波react,暫時感覺用起來很舒服,和vue相比,react最大的特點就是需要有點js的基礎,不然有點難搞!

  react既然用起來這麼舒服,這次就說說react不得不聊的三大屬性吧!當然在說三大屬性之前,我們可以必須要聊點其他方面的廢話

1.模塊化和組件化

  1.1 模塊化:就是將一個大的js文件按照一定的規則拆成很多小的js文件,形成一個個模塊,下圖所示

   然後各個小的js文件通過export和import可以相互引用

 

  1.2組件化:就是將一個html頁面拆分成一個個小的部分,每個部分可以進行復用,每一個部分都可以說是一個組件,可想而知,組件是包含了html,css樣式和js

 

  模塊化和組件化的相同點就是都是將大的部分拆成小的部分,共同來實現一個功能,這麼做雖然說看起來是麻煩了,但是提高了複用率以及後期維護成本,畢竟你去改代碼也不想去找一個幾千行的js文件吧;

  不同點就是模塊化只是針對js,而組件化是針對頁面,包含了html,css和js

  所以前端一般都說組件化開發,不會說模塊化開發;可以把組件化看作是一種思想,而react就是落地實現的一種;

 

 2.react中的組件分類

  上面說的組件化的圖中沒有說組件到底是什麼結構,只知道里面就是html+css+js組成的;

  在react中,組件可以有兩種,一種是function,一種是class,暫時我還是比較熟悉class,所以這裏只說class組件,嘿嘿!( ̄▽ ̄)ノ

  下圖所示就是一個最簡單的類組件;

 

 

 

3.組件的拆分

  在想知道組件怎麼用之前,我們肯定要知道頁面長什麼樣,然後根據頁面的內容拆成一個個的組件,這點尤爲重要!

  3.1 組件之間嵌套,也就成了父子組件或者祖孫組件,例如下面的<CommenApp/>組件和<CommentList>組件

  3.2 組件之間並列,也就成了兄弟組件,例如下面的<CommentInput/>組件和<CommentList>組件

  使用組件其實就是把組件名當作通常的Html標籤一樣使用,可以設置標籤屬性,以及設置文本內容

        

 

4.組件之間的通信

  由於組件之間的關係分爲兩種,父子和兄弟,所以要弄清楚這兩種分別是怎麼傳遞數據的;

  例如上右圖中兄弟組件,<CommentInput/>評論信息是怎麼傳遞到<CommentList/>組件中進行展示的?因爲這是兩個不同的組件對吧!

  4.1.父子組件通信

 

  使用代碼看看效果如下,使用起來很容易吧!

         

 

 

4.2 兄弟組件通信

  知道了父子組件通信,兄弟之間通信就很容易了,其實就是 :子組件1--->父組件---->子組件2

  簡要說明:子組件1通過調用父組件函數傳遞數據到父組件,父組件通過props傳遞數據到子組件2,由此可以看到props這個東東很重要!

 

4.3 組件通信優化版

  上面父子組件結構簡單,所以通信還很容易,兄弟組件通信稍微有點麻煩,但是忍忍也還能接受,但是假如組件之間嵌套5到6層,這個時候組件之間的傳值我肯定就不能忍了(╯—﹏—)╯(┷━━━┷

  有沒有方法可以將所有組件的信息都放在一個公共的位置,一個子組件想用另外一個子組件的數據,直接從公共的地方去拿,那多方便呀!

  這也就是大名鼎鼎的redux,當然react和redux之間除了單詞都是以re開頭之外,是沒有什麼關係的╮(╯_╰)╭,所以官方就出了一個react-redux插件使得我們在react中就可以使用redux的全套功能,故而想在react中使用redux別忘記安裝react-redux插件啊!!!

  使用了redux後傳值就不用這麼繁瑣了,後面應該會說說redux吧,畢竟這個東西賊重要;

 

5.組件中的狀態

  說是狀態,其實就是每個組件中保存的數據,比如說龍生九子,各有不同吧!一個父組件中可以有多個相同類型的子組件,但是這些子組件中維護了自己特有的信息,那麼問題來了,自己特有的信息放在哪裏呢?  

  我們對上面的子組件稍微改裝一下,頁面上點擊按鈕,就能看到效果;

  注意修改state的時候一定要用this,setState方法,因爲在這個方法裏面會調用一次render方法的,會重新渲染頁面;(瞭解:setState方法不會立刻執行,而是將數據放到一個隊列裏面,異步執行...)

 

 

  順便一提,既然有狀態組件(class組件),肯定也會有無狀態組件(函數組件)    ( ̄△ ̄)

  

6.react中操作dom節點  

  原生的js操作dom節點可以使用document.getElementById("#tt")這種方式,後來學了jquery,可以使用$("#tt")這種方式,而react也是一個js庫,肯定也有自己獨特的操作dom節點的方式,那就是ref,下圖所示;

  這裏只介紹了我使用起來覺得舒服的方式,還可以使用React.createRef()的方式,看個人習慣๑乛◡乛๑

 

7.總結 

  三大屬性其實就是state,props和ref,其中state用於保存每個組件特有的信息,props用於組件之間的通信,ref是react提供的一種操作dom的方式!

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章