vue、react隐式实例化
写这篇的缘由是因为上一篇 vue与react组件对比学习写的有点啰嗦也没有写的很明白同时也存在一点错误,所以重新写一篇简介概要点的。 隐式实例化隐式实例化,不希望写在 说的有点绕,这种隐式实例化的应用场景在提示信息(message)、模态框(modal)、加载条(loadingbar),例如一个 // 下面是伪代码... import message from 'message' fetch('/api/xxx') .then(resp => { if(resp.success === true){ message({ type:"success",text:"请求成功" }) } else { message({ type:"error",text:"请求出错" }) } }) 可以看的出来,我们的需求是想有一个组件能像 难点我们都知道不论是 // react 引用代码省略 export default class Message extends React.Component{} // vue // export default { data(){},props:{},methods:{},render:function(){} }
既然知道了子组件是一个构造器,那我能不能直接去手动 vue实例化那么如何实例化呢?分成两部分,先是实例化一个组件,然后再把实例化后的组件挂载到html中去。先拿 拿到构造器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}) 挂载
// 这里返回的messageWithDom依然还是vue实例而不是dom节点,但是这个实例多了一个$el属性,这个属性里面就藏着我们需要挂载的dom节点 const messageWithDom = messageInstance.$mount() const dom = messageWithDom.$el document.body.appendChild(dom) 野路子
import Notification from './notification.vue'; import Vue from 'vue'; const _props = properties || {}; const Instance = new Vue({ render (h) { return h(Notification,{ props: _props }); } }); 道理基本上和我说的差不多,不过调用 后续控制拿到组件的实例后,基本上想怎么玩就能怎么玩了,比如说控制隐藏或显示,可以在组件内部定义一个 if( xxxx ) { messageWithDom.isShow = true } else { messageWithDom.isShow = false } react实例化
创建一个虚拟dom这里需要调用 import React from 'react' import Message from './message.jsx' const customProps = { // 传给自组件的一些props } const Vnode = React.createElment(Message,{props:customProps}) 挂载并且拿到实例
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) 后续的控制拿到组件的实例后,基本想怎么玩就能怎么玩了,但是别忘记了!!!, 总结学会隐式化创建实例能够很好的看清楚
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |