寫這篇的原因是由於上一篇 vue與react組件對比學習寫的有點囉嗦也沒有寫的很明白同時也存在一點錯誤,因此從新寫一篇簡介概要點的。
隱式實例化,不但願寫在react
的jsx
裏或是vue
的template
,而是但願經過手動去實例化一個react
或是vue
組件。
說的有點繞,這種隱式實例化的應用場景在提示信息(message)、模態框(modal)、加載條(loadingbar),例如一個ajax
請求,在成功或失敗的時候須要給一個提示:html
// 下面是僞代碼... import message from 'message' fetch('/api/xxx') .then(resp => { if(resp.success === true){ message({ type:"success", text:"請求成功" }) } else { message({ type:"error", text:"請求出錯" }) } })
能夠看的出來,咱們的需求是想有一個組件能像html
原生的alert
同樣,在須要的地方可以直接去調用,而不是須要把message
組件寫進節點中。vue
咱們都知道不管是react
、仍是vue
也好,寫的都是一個類或者叫構造器:node
// react 引用代碼省略 export default class Message extends React.Component{} // vue // export default { data(){}, props:{}, methods:{}, render:function(){} }
react
至關明顯地建立了一個class
,vue
表面上好像只是暴露一個對象,實際上vue
的組件被使用時,你須要把子組件傳入父組件的component
的對象中,因此Vue
會調用Vue.extend({...自組建的選項對象})
,這個方法就返回了一個構造器。react
既然知道了子組件是一個構造器,那我能不能直接去手動new
一個子組件呢?在我測試下來,好像是不行。git
那麼如何實例化呢?分紅兩部分,先是實例化一個組件,而後再把實例化後的組件掛載到html中去。先拿vue
說:github
import Vue from 'vue' import message from './message.vue' // 注意: 這裏的message僅僅就是一個對象,須要轉成構造器 const messageConstructor = Vue.extend(message)
const customProps = { // 傳給組件的一些props } // 這樣就能拿到了一個vue組件的實例,就能作不少事情了,好比調用實例中寫好的methods中的方法,固然這還沒完,咱們還得把實例掛載到Html中 const messageInstance = new messageConstuctor({propsData:customProps})
vue
的實例有一個很重要的方法:$mount
,在選項對象中咱們沒有傳入el
屬性,因此你在這裏手動實例化的vue
實例是沒有掛載出來的,須要手動調用一遍$mount
,能夠傳入一個DOM節點作爲掛載節點,固然也能夠不傳入參數,後面手動用dom
方法把節點插入。ajax
// 這裏返回的messageWithDom依然仍是vue實例而不是dom節點,可是這個實例多了一個$el屬性,這個屬性裏面就藏着咱們須要掛載的dom節點 const messageWithDom = messageInstance.$mount() const dom = messageWithDom.$el document.body.appendChild(dom)
vue
隱式化實例,基本是這個套路,固然我在看iview組件庫中用了一些其餘的野路子,這裏也貼一下:api
import Notification from './notification.vue'; import Vue from 'vue'; const _props = properties || {}; const Instance = new Vue({ render (h) { return h(Notification, { props: _props }); } });
道理基本上和我說的差很少,不過調用Vue.extend
更加容易理解。app
拿到組件的實例後,基本上想怎麼玩就能怎麼玩了,好比說控制隱藏或顯示,能夠在組件內部定義一個isShow
的data
屬性,在實例上能夠這樣用:iview
if( xxxx ) { messageWithDom.isShow = true } else { messageWithDom.isShow = false }
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 = { // 傳給自組件的一些props } const Vnode = React.createElment(Message,{props:customProps})
react
沒有$mount
方法,而是直接調用reactDom
的render
方法,至關於vue
的兩步直接一步完成:
import React from 'react' import ReactDom from 'react-dom' const containner = document.createElement('div') document.body.appendChild(containner) // 把虛擬dom傳入reactDom.render方法中,第二個參數是掛載的節點,並返回這個組件的實例 const messageInstance = ReactDom.render(Vnode,containner)
拿到組件的實例後,基本想怎麼玩就能怎麼玩了,可是別忘記了!!!,react
修改state
是調用setState
,而不像vue
直接修改。
學會隱式化建立實例可以很好的看清楚vue
和react
內部的細節,對提升vue
、react
大有好處。個人一個項目有個加載條的組件,同時用react
和vue
都實現了一遍,能夠對比學習發現二者的差別,喜歡的能夠點個贊~~。