vue、react隐式实例化
写这篇的缘由是因为上一篇vue与react组件对比学习写的有点啰嗦也没有写的很明白同时也存在一点错误,所以重新写一篇简介概要点的。
隐式实例化
隐式实例化,不希望写在
react
的jsx
里或是vue
的template
,而是希望通过手动去实例化一个react
或是vue
组件。
说的有点绕,这种隐式实例化的应用场景在提示信息(message)、模态框(modal)、加载条(loadingbar),例如一个ajax
请求,在成功或失败的时候需要给一个提示:
// 下面是伪代码...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
组件写进节点中。
难点
我们都知道不论是react
、还是vue
也好,写的都是一个类或者叫构造器:
// react 引用代码省略export default class Message extends React.Component{}// vue
// export default {data(){},props:{},methods:{},render:function(){}
}
react
相当明显地创建了一个class
,vue
表面上好像只是暴露一个对象,实际上vue
的组件被使用时,你需要把子组件传入父组件的component
的对象中,所以Vue
会调用Vue.extend({...自组建的选项对象})
,这个方法就返回了一个构造器。
既然知道了子组件是一个构造器,那我能不能直接去手动new
一个子组件呢?在我测试下来,好像是不行。
vue实例化
那么如何实例化呢?分成两部分,先是实例化一个组件,然后再把实例化后的组件挂载到html中去。先拿vue
说:
拿到构造器
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
方法把节点插入。
// 这里返回的messageWithDom依然还是vue实例而不是dom节点,但是这个实例多了一个$el属性,这个属性里面就藏着我们需要挂载的dom节点
const messageWithDom = messageInstance.$mount()const dom = messageWithDom.$eldocument.body.appendChild(dom)
野路子
vue
隐式化实例,基本是这个套路,当然我在看iview组件库中用了一些其他的野路子,这里也贴一下:
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
更加容易理解。
后续控制
拿到组件的实例后,基本上想怎么玩就能怎么玩了,比如说控制隐藏或显示,可以在组件内部定义一个isShow
的data
属性,在实例上可以这样用:
if( xxxx ) {messageWithDom.isShow = true
} else {messageWithDom.isShow = false
}
react实例化
react
的实例化和vue
稍稍不同,首先引进来的直接就是一个类所以不需要像Vue
一样多做一步转换成构造器,其次react
是没有类似vue
的$mount
方法,这也是我一开始很疑惑的地方,后来突然想起来react
把组件的挂载方法放到了reactDom
这个包里面了。
创建一个虚拟dom
这里需要调用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
都实现了一遍,可以对比学习发现两者的差异,喜欢的可以点个赞~~。
- loadingBar的vue实现
- loadingBar的react实现
vue、react隐式实例化相关推荐
- c++模板显示实例化,显示具体化,隐式实例化
函数模板是C++新增的一种性质,它允许只定义一次函数的实现,即可使用不同类型的参数来调用该函数.这样做可以减小代码的书写的复杂度,同时也便于修改(注:使用模板函数并不会减少最终可执行程序的大小,因为在 ...
- C++模板之隐式实例化、显示实例化、隐式调用、显示调用和模板特化详解
模板的实例化指函数模板(类模板)生成模板函数(模板类)的过程.对于函数模板而言,模板实例化之后,会生成一个真正的函数.而类模板经过实例化之后,只是完成了类的定义,模板类的成员函数需要到调用时才会被初始 ...
- C++---显示实例化与隐式实例化,显示调用与隐式调用
出现场景:C++模板中 template<class T> T Add(T left,T right)return left+right; 上述代码只有经过实例化之后才会形成真正的函数,没 ...
- Linq原理相关(隐式类型var、匿名类型、实例化类、集合初始化)
1. var(隐式类型) 例如: var temp ="abc"; //正确, var temp; temp = "abc" //错误 原因:隐式类 ...
- react ——withRouter——页面隐式传值—嵌套路由——渲染方式——自定义导航组件
withRouter import {Route,Switch,withRouter} from "react-router-dom" withRouter高阶组件增强组件--获取 ...
- 从 JavaScript 属性描述器剖析 Vue.js 响应式视图
学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切 ...
- 【前端面试题】前端基础 | 八股文 | HTTP网络 | Vue | React
⭐️ 本文首发自 前端修罗场(点击加入),是一个由 资深开发者 独立运行 的专业技术社区,我专注 Web 技术.Web3.区块链.答疑解惑.面试辅导以及职业发展.博主创作的 <前端面试复习笔记& ...
- 从JavaScript属性描述器剖析Vue.js响应式视图
学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切 ...
- 粗解构造函数,原型,原型链,显式原型,隐式原型
构造函数 引入:使用工厂函数来创造对象时,使用var obj =new Object(),创建后都是object,无法区分 创建一个构造函数,专门用来创建特定类型的对象,例如人的对象,动物的对象.构造 ...
- 彻底理解Vue数据响应式原理
彻底理解Vue数据响应式原理 当创建了一个实例后,通过将数据传入实例的data属性中,会将数据进行劫持,实现响应式,也就是说当这些数据发生变化时,对应的视图也会发生改变. const data = { ...
最新文章
- Git Gui的使用
- Java:定时启动线程
- Oracle查询所有表结构和表名称及备注
- Python超强全方位学习路线分享(附视频+书籍+面试链接)
- PX4/Pixhawk---uORB深入理解和应用
- 今天你多态了吗? 【转】
- git clone 一部分_别再往 Git 仓库中放敏感信息了,不安全!
- java tostringutils_Java之StringUtils的常用方法
- tensorflow精进之路(二十)——使用slim模型库训练自己的数据
- COM编程入门 第三部分(网文补充)
- access建立er图_Visio绘制ER图教程
- java newtonsoft.json_(转载)Newtonsoft.Json使用总结
- ImageAI (四) 使用Python快速简单实现自定义预测模型的训练 Custom Model Training
- 《FMEA潜在失效模式及效应分析实务》课程大纲--台湾李文棕老师
- 链塔短评合集| XAS、ARDR为BB级,LSK为B级
- 7-176 数列求和
- 数据预处理--缺失值填补《菜菜学习笔记》
- 房地产经纪服务市场现状及未来发展趋势
- 好用的办公邮箱是提高工作效率的第一步
- html内嵌式的语言,为何说PHP是一种HTML内嵌式的语言