有vue基础学react,react-vue
因为新公司使用了react技术栈，包括海、Dva、Ant-design等解决方案。本文简单介绍了vue对react的入门指南，有兴趣的可以看看。
目录
设计组件通信生命周期事件处理类和styleclassstyle条件渲染列表渲染组件嵌套获取DOM文档结构路由动态路由传递参数嵌套路由跳转路由守卫(登录验证，特殊路由处理)状态管理使用因为新公司使用react技术栈，包括海，Dva，Ant-design等解决方案，稍微熟悉之后才知道，虽然有一些不同，但还是有很大的不同。在这里，我将从设计、编写风格、API、生命周期、流行生态等方面对react16vue2(在积极学习vue3)这两个热门框架做一个简单的比较：
设计
反应
某视频剪辑软件
解释
位置
建立用户界面的js库
渐进框架
React侧重于库，vue侧重于框架。
加油
SetState更新State的值以重新呈现视图。
响应数据呈现，对应于修改的响应数据的视图也被呈现。
React需要考虑什么时候设置状态，什么时候渲染；Vue只需要考虑修改数据。
写作方法
小艾
模板
React是函数表达式，全在js；E vue区分tempalte、script、style，提供语法糖，用vue-loader编译。
组件通信
React:严格单向的数据流
向下的支柱
向上推进功能
多级传递上下文
跟随所有可以成为道具的东西，onChange/setState()
单向数据流
向下支撑
向上事件向上(订阅发布)
多层次传递$attrs，$listeners
还有各种获取组件(VueComponent)的实例，比如$refs，$parent，$ children通过递归获取上级或下级组件，如findComponentUpward和findComponentsUpward高级组件：提供/拒绝、调度/广播
反应
某视频剪辑软件
解释
子组件数据传输
小道具
小道具
它们都是声明性的。
组件状态机
状态
数据
管理组件的状态，用setState反应变化，vue直接赋值，新属性用$ setVue使用函数闭包特性来保证组件数据的独立性，react是一个函数。
生命周期
反应
某视频剪辑软件
解释
数据的初始化
构造器
创造
增加
组件安装
安装好的
Dom节点已生成。
更新
componentDidUpdate
更新
React:组件更新后，react只会在第一次初始化成功后进入componentDidmount，以后每次重新渲染后进入这个生命周期。这里可以得到prevprops和prevstate，即更新前的道具和状态。Vue:在数据变化导致的虚拟DOM重新渲染更新后调用。
从计算机上卸载
组件将卸载
破坏
破坏事件
事件处理
反应
React事件以camelCase命名，而不是小写。
当使用JSX语法时，您需要将函数作为事件处理程序而不是字符串来传递。
您不能通过返回false来阻止默认行为。必须显式使用preventDefault。
不能卸载在非元素标签上，否则会作为道具传下去。
函数形式(){
函数句柄提交(e) {
e . prevent default()；
console.log(您点击了提交。);
}
返回(
表单onSubmit={handleSubmit}
按钮类型=提交提交/按钮
/表单
);
}
某视频剪辑软件
当在普通元素上使用时，只能侦听本机DOM事件。使用定制元素组件时，您还可以监听由子组件触发的定制事件。
//本机事件
表单v-on:submit . prevent= on submit /form
//自定义事件
my-component @ my-event= handle this(123，$event)/my-component
Vue事件修改器：stop-call事件. stopPropagation()。prevent-call event . prevent default()。捕获-添加事件侦听器时使用捕获模式。self-只有当事件由侦听器绑定的元素本身触发时，才会触发回调。native-监听组件根元素的本地事件。一次只触发一个回调。左-(2.2.0)仅在单击鼠标左键时触发。右-(2.2.0)仅当单击鼠标右键时触发。中-(2.2.0)仅在单击鼠标中键时触发。被动-(2.3.0)在{passive: true}模式下添加侦听器
class和style
class
反应
render() {
let s menu ；
if (this.props.isActive) {
菜单-活动；
}
返回span className={ className }菜单/span
}
某视频剪辑软件
差异
class=static
:class=“{ active:is active， text-danger: hasError }”
/div
div :class=[{ active: isActive }，errorClass]/div
style
反应
div style={{color: red ，fontWeight: bold}} /
某视频剪辑软件
div :style=[baseStyles，overridingStyles]/div
设计组件时，可以在样式标签上声明一个作用域标签作为组件样式隔离标签，比如：style lang=sass scoped/style。最后，在打包时，将hash的唯一值添加到所有样式中，以避免组件间的css污染。
条件渲染
React:jsx表达式，或者三元表达式；True表示不渲染。
Vue:表达式返回true进行渲染，可以嵌套多个v-else-if，v-else。
列表渲染
反应：使用。映射，元素的键最好是这个元素在列表中的唯一字符串。
保险商实验所
{props.posts.map((post)=)
李key={post.id}
{post.title}
/李
)}
/ul
Vue:为了给Vue一个提示，让它可以跟踪每个节点的身份，并重用和重新排序现有的元素，您需要为每个项目提供一个唯一的key属性。
Li v-for= items in items :key= item . message
{{ item.message }}
/李
组件嵌套
反应
默认插槽
div class name={ fancy border fancy border- props . color }
{道具.儿童}
/div
命名插槽
div class name=" split pane "
div className=SplitPane-left
{props.left}
/div
div className=SplitPane-right
{props.right}
/div
/div
split pane left={ Contacts/} right={ Chat/}/
某视频剪辑软件
默认插槽
主要的
插槽/插槽
/main
命名插槽
页眉
插槽名称=header/slot
/页眉
获取DOM
React:管理焦点、文本选择或媒体播放。触发强制动画。集成的第三方DOM库
类MyComponent扩展React。组件{
施工员(道具){
超级(道具)；
this . myref=react . createref()；
}
render() {
return div ref={ this . myref }/；
}
}
Vue:用于注册元素或子组件的参考信息。
div ref=divhello/div
这个。$ refs . p . offs高度
文档结构
海
配置# umi配置，包括路由、建筑和其他配置。
config.ts #项目配置。umirc.ts优先级更高，需要删除。用这种方式。
路线. ts #路线配置
defaultSettings.ts #系统配置
proxy.ts #代理配置
mock #这个目录下的所有js和ts文件都会被解析成mock文件。
public #这个目录下的所有文件都会被复制到输出路径，如果配置了hash就不会添加。
src
资产#本地静态资源
组件#商业通用组件
E2E #集成测试案例
布局#常规布线的全局布局文件
模特#全球dva模特
页面#所有路由组件都存储在这里。
document.ejs #同意如果这个文件存在，它将被用作默认模板。
服务#后台接口服务
utils #工具库
地区#国际化资源
global.less #全局样式
环球。ts #全局射流研究…
app.ts #运行时配置文件，比如修改路由、修改提出方法等
自述。钔
包。数据
vue_cli
莫克#项目模拟的模拟数据
公共#静态资源
index.html# html模板
src #源代码
api #所有请求
资产#主题字体等静态资源
组件#全局公用组件
指令#全局指令
滤镜#全局过滤器
布局#全局布局
路由器#路由
商店#全局商店管理
utils #全局公用方法
观点#观点所有页面
App.vue #入口页面
main.js #入口文件加载组件初始化等
测试#测试
vue.config.js # vue-cli配置如代理，压缩图片
包。json #包。数据
路由
动态路由路由传参
反应路由器
history.push(/list？id=${id})
历史。推({路径名：/list ，查询：{id}})
history.push(/list/id=${id})
历史。推({路径名：/list ，参数：{id}})
获取道具。匹配。查询/道具。匹配。参数
某视频剪辑软件路由器
这个. router.push({path: /list ，查询：{id}})
这个router.push({path: /list ，params: {id}})
获取这个. router.query/this .$router.params
嵌套路由
-做出反应
{
路径："/",
组件："@/布局/索引",
路线：[
{路径："/list "，组件：" list"}，
{路径："/admin "，组件：" admin"}，
],
}
div style={{ padding: 20 }}{道具。儿童}/分区
使用道具。儿童渲染子路由
某视频剪辑软件路由器
{
路径："/user/:id "，
组件：用户，
儿童：[
{
路径："配置文件",
组件：用户配置文件
},
{
路径："帖子",
组件：用户帖子
}
]
}
div id=应用程序
路由器视图/路由器视图
/div
使用某视频剪辑软件原生组件/路由器-查看/组件渲染子路由
路由跳转
尿的胎便指数
导航链接精确到=/profile 活动类名= selected 配置文件/导航链接
history.push(`/list？id=${id} `)
某视频剪辑软件
路由器链接到=/about about/路由器链接
这个. router.push({path: /list ，查询：{id}})
路由守卫(登录验证，特殊路由处理)
海
某视频剪辑软件路由器
全局路由守卫
全局前置守卫：路由器。每个之前
const router=new VueRouter({.})
router.beforeEach(收件人，发件人，下一个)={
//.
})
全局后置守卫：路由器。每个之前
router.afterEach(收件人，发件人)={
//.
})
状态管理
多个视图依赖于同一状态或来自不同视图的行为需要变更同一状态；才需要使用状态管理机。
债务价值调整；《守望先锋》游戏角色名
状态管理
说明
模块
命名空间
模块
解决应用的所有状态会集中到一个比较大的对象，商店对象可能变得相当臃肿
单一状态树
状态
状态
唯一数据源
提交状态机
还原剂
突变
用于处理同步操作，唯一可以修改状态的地方
处理异步操作
效果
行为
调用提交状态机更改状态树
使用
dva:模型连接用户界面
//新模型：模型/产品. js
导出默认值{
命名空间："产品",
州：[],
减速器：{
删除（状态，{有效负载：id }) {
返回state.filter(item=item.id！==id)；
},
},
};
//连接模型
导出默认连接(({产品})=({
产品，
}))(产品);
//调度模型减少
调度模型减少({
类型：产品/删除，
有效载荷：id，
})
如有异步操作，如创建交互式、快速动态网页应用的网页开发技术请求，显示模型效果，然后效果调用模型缩减
状态管理
//新模块
const store=new Vuex .商店({
状态：{
计数：1
},
突变：{
增量（状态){
状态。计数
}
},
动作：{
增量（上下文){
语境。提交(“增量”)
}
}
})
//绑定用户界面
输入v-model= $ store。陈述[型号名称].名称/
//提交模块变异
store.commit("增量")
如有异步操作，如创建交互式、快速动态网页应用的网页开发技术请求，dispath模块操作，然后行动调用模块突变
store.dispatch({
类型：" incrementAsync "，
数量：10
})
到此这篇关于某视频剪辑软件转反应入门指南的文章就介绍到这了，更多相关某视频剪辑软件转反应内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。