vue react隱式例項化

vue與react元件對比學習寫的有點囉嗦也沒有寫的很明白同時也存在一點錯誤，所以重新寫一篇簡介概要點的。

隱式例項化，不希望寫在react的jsx裡或是vue的template，而是希望通過手動去例項化乙個react或是vue元件。

// 下面是偽**...
import message from 'message'
fetch('/api/***')
.then(resp => )
} else )
}})

可以看的出來，我們的需求是想有乙個元件能像html原生的alert一樣，在需要的地方能夠直接去呼叫，而不是需要把message元件寫進節點中。

我們都知道不論是react、還是vue也好，寫的都是乙個類或者叫構造器：

// react 引用**省略
export default class message extends react.component{}
// vue
// export default ,
props:{},
methods:{},
render:function(){}
}

react相當明顯地建立了乙個class，vue表面上好像只是暴露乙個物件，實際上vue的元件被使用時，你需要把子元件傳入父元件的component的物件中，所以vue會呼叫vue.extend()，這個方法就返回了乙個構造器。

既然知道了子元件是乙個構造器，那我能不能直接去手動new乙個子元件呢？在我測試下來，好像是不行。

那麼如何例項化呢？分成兩部分，先是例項化乙個元件，然後再把例項化後的元件掛載到html中去。先拿vue說：

import vue from 'vue'
import message from './message.vue'
// 注意： 這裡的message僅僅就是乙個物件，需要轉成構造器
const messageconstructor = vue.extend(message)

const customprops = 
// 這樣就能拿到了乙個vue元件的例項，就能做很多事情了，比如呼叫例項中寫好的methods中的方法，當然這還沒完，我們還得把例項掛載到html中
const messageinstance = new messageconstuctor()

vue的例項有乙個很重要的方法：$mount，在選項物件中我們沒有傳入el屬性，所以你在這裡手動例項化的vue例項是沒有掛載出來的，需要手動呼叫一遍$mount，可以傳入乙個dom節點做為掛載節點，當然也可以不傳入引數，後面手動用dom方法把節點插入。

// 這裡返回的messagewithdom依然還是vue例項而不是dom節點，但是這個例項多了乙個$el屬性，這個屬性裡面就藏著我們需要掛載的dom節點
const messagewithdom = messageinstance.$mount()
const dom = messagewithdom.$el

vue隱式化例項，基本是這個套路，當然我在看iview元件庫中用了一些其他的野路子，這裡也貼一下：

import notification from './notification.vue';
import vue from 'vue';
const _props = properties || {};
const instance = new vue();
}});

道理基本上和我說的差不多，不過呼叫vue.extend更加容易理解。

拿到元件的例項後，基本上想怎麼玩就能怎麼玩了，比如說控制隱藏或顯示，可以在元件內部定義乙個isshow的data屬性，在例項上可以這樣用：

if( ***x )  else

react的例項化和vue稍稍不同，首先引進來的直接就是乙個類所以不需要像vue一樣多做一步轉換成構造器，其次react是沒有類似vue的$mount方法，這也是我一開始很疑惑的地方，後來突然想起來react把元件的掛載方法放到了reactdom這個包裡面了。

這裡需要呼叫react.createelement去建立乙個虛擬dom，其實vue也能建立乙個虛擬dom，參考上面iview的野路子。

import react from 'react'
import message from './message.jsx'
const customprops = 
const vnode = react.createelment(message,)

react沒有$mount方法，而是直接呼叫reactdom的render方法，相當於vue的兩步直接一步完成:

import react from 'react'
import reactdom from 'react-dom'
const containner = document.createelement('div')
// 把虛擬dom傳入reactdom.render方法中，第二個引數是掛載的節點，並返回這個元件的例項
const messageinstance = reactdom.render(vnode,containner)

拿到元件的例項後，基本想怎麼玩就能怎麼玩了，但是別忘記了！！！，react修改state是呼叫setstate，而不像vue直接修改。

vue react隱式例項化

C 模版顯式例項化顯式具體化隱式例項化

C 模版顯式例項化顯式具體化隱式例項化

函式模板的隱式例項化和顯式例項化

vue react隱式例項化

C 模版 顯式例項化 顯式具體化 隱式例項化

C 模版 顯式例項化 顯式具體化 隱式例項化

函式模板的隱式例項化和顯式例項化

相關推薦

C 模版顯式例項化顯式具體化隱式例項化

C 模版顯式例項化顯式具體化隱式例項化