像學習vue 同樣學習 react

一直據說 vue 借鑑了其餘兩大框架的優勢，真實狀況我並不瞭解，由於我只會 vue，才入坑 react。多是語言都是想通的， react 沒有我想象中那麼高攀不起。

vue 中全部文件後綴名是 .vue, react 的文件直接是 js ，他們的引入方式同樣，react 使用 JSX 語法，vue 和咱們寫原生的 html 更像,把 css JS HTML 放在一個組件裏面，而 react 是寫 js 同樣書寫組件 放兩張對比圖，是我在學 react 時候的筆記

在 vue 中，全部的數據定義在 data()，全部的this 指向 vue 構造函數（箭頭函數除外），沒有 this 綁定的問題，html 代碼寫在<template> 元素當中，js 寫在 <script>，css 寫在 <style>，全部的方法函數寫在了 methods 裏面。在html 元素當中，引用 class 類名，能夠直接寫 class，父子組件傳值的方式相似，均可以有數據類型驗證，都是單項數據傳遞傳遞方式也是同樣的，子組件觸發父組件的方式有一點點區別，vue 經過on 和 emit ，react 直接經過 this.props ; react 綁定事件用相似原生的寫法，只是首字母大寫(onClick) ,vue 用 @click .....

生命週期

vue 有他的生命週期，在每一個時期都有相對應的鉤子函數，這樣咱們就能夠在相對而言更加適合的時機作適合的事。

在工做中用的最多的是 mounted 渲染數據，beforeDestroy 在銷燬組件的時候釋放一些定時器或者其餘資源會用到。其餘的好像用的相對而言比較少。

react 也有他的生命週期函數，每個版本鉤子函數有一點點小小小的區別，可是咱們經常使用的那些個鉤子函數一直存在

咱們經過 console.log 日誌來看看，這些鉤子函數在何時執行

在 console.log 日誌中咱們大概能夠明白，生命週期能夠分紅三大塊，初次渲染，組件更新，組件銷燬。 爲何組件銷燬還要執行呢？由於要資源釋放。做爲一個合格的前端，是不容許控制檯有任何警告性的提示出現的。若是組件佔用的資源在組件銷燬的時候沒有釋放會怎麼樣？

避免這樣的警告一句話就解決了，控制檯乾乾淨淨，代碼整整齊齊，心情美美噠

案例DOM

仔細看 案例DOM ，你會發現裏面有一個怪異的語法，或許你會問我這是什麼東西？

handleChange=()=>{
    this.setState((preState)=>({
      count:preState.count+1
    }))
  }
複製代碼

這是 ES7 語法，官方文檔中有說喲

react 生命週期函數裏面最重要的是 render() 這個鉤子函數（全部的生命週期均可以不存在，除了 render 函數除外，由於react.Component 函數默認內置了其餘函數，可是沒有內置 render 函數），咱們元素的書寫，組件的使用，都是在那個裏面進行。全部的方法就直接和生命週期在同一層級（好像和小程序的生命週期函數和方法結構是同樣的）

經過和 vue 的生命週期函數一對比，發現好像是差很少的。只是在寫法上不同而已。在咱們的項目中，數據的獲取都是接口請求獲取異步數據的，那麼咱們在哪個生命週期函數裏面去寫更好一點呢？？我推薦 componentDidMount() 。若是你想組件從加載到成功渲染是如何一步一步執行的，咱們能夠在每個鉤子函數裏面打一個斷點，這樣清晰可見。console.log 日誌咱們只能夠看到鉤子函數執行的前後

ref

若是你寫過 vue 應該用過 ref 這個東西。在 react 中 ref 含義是同樣的，只是語法寫的不同。ref 是什麼？個人理解是一個引用，一個別名，一個ID，用來獲取數據，操做方法。他讓父組件的兄弟組件中去調用子組件的方法。在個人工做中用的仍是比較多的。

案例DOME

那麼在 react中 ref 的又是如何使用的呢？

說白了就是在組件上面加上一句話 ref={val=>this.name = val} 裏面的 this.name 是我本身定義的，name 能夠換成其餘的名字。this.name 就牽引着這個組件，裏面的數據方法屬性，咱們均可以獲取到案例DOME

插槽

我首先接觸的是 vue ，在學習 react 的時候我總在想，vue 裏面有的東西，react 裏面有沒有呢？文檔證實是真的有。

在 vue 中寫基礎組件的時候，插槽這東西用的比較多。在寫基礎組件的時候總會考慮到，有那麼一兩個特別，須要特殊處理，而大部分的時候是不須要處理的，這時候咱們就須要在基礎組件裏面預留一個位置，這樣就不要再從新寫一段差很少的代碼了。在 react 中也存在這東西，用法都差很少。

寫插槽類的時候咱們首先要引入 createPartal 這個組件，這個組件接受兩個參數，第一個是要渲染的子元素(包括共有的和佔位元素 this.props.children)，第二個是要掛載的元素。 案例DOME

直接用一個無名的 <slot></slot> 元素進行佔位，具體是什麼根據需求場景而定。若是沒有佔位元素，瀏覽器會報錯。案例DOME

當咱們頁面須要用到一些基礎組件或者說是公共組件的時候，咱們能夠考慮用插槽來處理某些特殊狀況，而不是再寫一次重複的代碼

若是學過這兩個框架的就會發現，其實他們的數據流，組件化，生命週期，狀態更新都是差很少的，只是語法不同而已；vue 框架幫咱們作了大部分的事情 api 多，react 框架更多的事情都是咱們本身動手去作，去寫。多是由於工做是寫 vue 的，或者是 react 的初學者，我的認爲 vue 寫起來更加簡單方法，畢竟那是在本身熟悉的領域，哈哈。好像會慢慢的喜歡上 react