vue react 写法区别
最近在看vue和react区别,看到这个博客感觉写的很好直接拿来了:
react初探(一)之JSX、状态(state)管理、条件渲染、事件处理
前言:
最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue。在实际项目中只使用过一次angular5,其余项目都是使用Vue写的。写篇博客记录一下一些项目中经常使用的技巧在Vue和react中不同的实现方法。
使用JSX指定属性值和嵌入表达式:
(1)指定变量作为属性值
`<div title={type}>type</div>`
Vue中的写法:
<div :title="type">type</div> // vue写法```(2)指定字符串作为属性值
<div title="我是title的值"}>type</div>
(3)动态绑定class
<div className={hasClass ? 'class' : ''}>class</div><div className={hasClass && 'class'}>class</div>
Vue中的写法:
<div :class="{'class': hasClass}"></div> // Vue写法
(4)JSX中嵌入表达式
<div>{type}</div>
Vue中的写法:<div>{{type}}</div> // Vue写法
注意:react的 { } 中的变量是非常灵活的,可以为原始值、React 元素,或者函数。状态(state)管理:(1)定义变量类似于Vue在data定义组件中的变量,react可以在constructor函数初试化定义组件中的变量。
class State extends Component {
constructor(props){
super(props); this.state = {
name: '你假装没察觉'
}
};
render() { return ( <div>
{this.state.name} </div> )
}
}
在render函数中使用this.state就可以访问到在constructor中定义的this.state对象。PS:只能在constructor函数中对this.state对象进行初始化,在其他地方对this.state对象进行初始化都是无效的。Vue的写法:复制代码
<div>{{name}}</div>data() { return {
name: '你假装没察觉'
};
} // Vue的写法
复制代码(2)改变变量的值在react中如果要改变state中定义的变量不能直接使用 ' = '的方式直接赋值,需要使用setState函数。this.setState({name: 'yjj'})
Vue中的写法:this.name = 'yjj' // Vue中的写法
注意:state的更新可能是异步的,如果存在 num = num + 10 这种情况,最好使用下面这种方式:
this.setState((prevState,props) => ({
num: prevState.num+10}))
条件渲染:(1)与运算符:利用js的 '&&' 运算符当第一项为false时,第二项不会加载进来的机制。复制代码
render() {
const isShow = false
return( <div>
{isShow&&<div>isShow为true时我才显示</div>}
</div> )
}
复制代码(2) 三目运算符复制代码
render() {
const isShow = true
return( <div>
{isShow?<div>isShow为true时我才显示</div>: <div>isShow为fasle时我才显示</div>} </div> )
}
复制代码Vue中的写法:<div v-show="isShow">isShow为true时我才显示</div> 或者<div v-if="isShow">isShow为true时我才显示</div>// Vue中的写法事件处理:(1)在constructor函数中使用bind将类的方法绑定上this。PS:这种方法太繁琐,需要将每个处理事件的方法都绑定上this复制代码
class Event extends Component {
constructor(props) {
super(props) this.state = {
num: 10
} this.add = this.add.bind(this)
};
add() { this.setState((prevState) => ({
num: prevState.num+10
}))
};
render() { return( <div>
<div onClick={this.add}>num加10</div>
<div>当前num={this.state.num}</div>
</div> )
}
}
复制代码(2)在回调函数中使用箭头函数。PS:需要多写一层箭头函数嵌套
<div onClick={(e)=>this.add(10,e)}>num加10</div> // 10为传递进去的参数
(3)在onClick定义处直接使用bind绑定this。PS:需要多写一个bind
<div onClick={this.add.bind(this,10,e)}>num加10</div> // 10为传递进去的参数
(4)定义方法时使用箭头函数。PS:当需要传递参数的时候还是只能在外面嵌套一层箭头函数
add = () => {
this.setState((prevState) => ({
num: prevState.num+10
}))
};
render() {
return( <div>
<div onClick={this.add}>num加10</div>
<div>当前num={this.state.num}</div>
</div>
)
}
PS:在react中阻止默认行为不能像Vue中直接使用return false,只能使用e.preventDefault()事件处理在Vue中的写法:
<div @click="add(10)">num加10</div> // Vue中的写法,10为传递进去的参数
总结: 很多Vue项目中经常使用的技巧在react中都能找到类似的方法实现,区别只是在于写法不同而已。刚刚接触react不久,感觉很多地方都用着不是很顺手,总觉得还是Vue的写法要简单一些,等后面用react写几个项目再来总结一下Vue和react在实际项目中的差异。原文出处https://www.imooc.com/article/40698
vue react 写法区别相关推荐
- Vue和React的区别到底是什么?
一提到前端框架,相信大家都对Vue和React不陌生,这两个前端框架都是比较主流的,用户也都比较多,但是我们在使用这些框架的时候,是否对这两个框架之间的区别有所了解呢?接下来,让我们来一起的系统梳理这 ...
- 面试官:react和vue有什么区别吗?
前言 大家好呀,清明节这两天有没有出门踏青扫墓呢!!! 言归正传,这是作者面试系列的第二篇文章!!!!!!! react和vue是什么?有啥区别吗? 三大框架之二,大家应该都不会陌生,都有学习过或者开 ...
- [react] react与angular、vue有什么区别?
[react] react与angular.vue有什么区别? Angular以前有接触过,我的感觉是,这不像React和Vue一样是构架+补充库(比如需要另外的全家桶来配合使用),它的功能非常完整, ...
- Vue与Angular以及React的区别
1.与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令:都支持过滤器:内置过滤器和自定义过滤器:都支持双向数据绑定:都不支持低端浏览器. 不同点: AngularJS的学习成本高, ...
- angular和vue和react的区别
一些历史 Angular 是基于 TypeScript 的 Javascript 框架.由 Google 进行开发和维护,它被描述为"超级厉害的 JavaScript MVW 框架" ...
- html和vue写法有区别吗,vue和vue.js有区别吗?
vue和vue.js没有区别,vue就是vue.js的简称.vue是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue (读音 /vjuː/,类似于 ...
- VUE React Angular
Typescript, ES6 & ES5 React 专注于使用 Javascript ES6 Vue 使用 Javascript ES5 或 ES6 Angular 依赖于 TypeScr ...
- vuejs和html语言一样么,vue和vue.js有区别吗?
vue和vue.js没有区别,vue就是vue.js的简称.vue是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue (读音 /vjuː/,类似于 ...
- react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
- react打包后图片丢失_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
最新文章
- 图灵奖得主Sivio Micali的Algorand区块链协议简介
- highcharts总结
- How to suppress email sending when operating on Activity
- php会员整合,会员整合Ucenter/Discuz!/PHPWind教程
- SpringBoot集成Activiti Explorer
- java零钱兑换dp_leetcode:322. 零钱兑换(dp,背包,中等)
- 实时时钟芯片 DS1302使用手册
- 引入阿里云字体图标库的方法
- linux 压缩文件与解压文件
- html粘性菜单,导航菜单:jQuery粘性滚动导航栏效果
- 计算机网络--IPV4地址详细解释
- 关闭各种广告弹窗……
- 网络线上教育快速发展,CDN高防能否胜任服务器安全防护任务?
- 转载(deepin商店下载微信登录显示版本过低无法登录)
- 远距离WiFi模块,无人机传输技术,无线通信视频传输技术
- CPU核数和线程数有什么作用?CPU核数和线程的关系与区别,服务器CPU与电脑主机CPU的区别
- Myeclipse10下载,安装,破解,插件,优化介绍
- 手把手的 git 降伏指南——阿龙咸鱼经
- 王半仙儿的日记-0013
- 短信发送平台-阿里大于
热门文章
- 为Jumpserver 配置企业微信
- 一张表看懂英式音标和美式音标的差异
- 中国草坪和花园设备市场现状研究分析与发展前景预测报告(2022)
- 【寒江雪】Go实现模版方法模式
- view-source是一种协议,查看源码
- android提权工具包,安卓手机root权限一键提权工具_kingroot PC V4.8.5 免费版
- 小球弹跳及MATLAB实现
- java 键盘 映射 控制游戏_如何运用JAVA程序设计进行键盘控制游戏
- 计算机前端开发论文参考文献,web前端论文参考文献.doc
- 第一门慕课计划——在广东海洋大学推广MOOC学习