写给vue转react的同志们(2)
本系列文章将由浅慢慢深入,一步步带你领略react和vue的同工异曲之处,让你左手react,右手vue无忧。
前提要顾:
今天的主题:
- react中想实现类似vue中的插槽
- 单向数据流与双向绑定
- css污染处理
react中想实现类似vue中的插槽
首先,我个人感觉jsx的写法比模板写法要灵活些,虽然没有像vue那样有指令,这就是为啥vue会上手简单点,因为他就像教科书一样教你怎么使用,而react纯靠你手写表达式来实现。
如果你想实现类似插槽的功能,其实大部分UI框架也可以是你自己定义的组件,例如ant desgin的组件,他的某些属性是可以传jsx来实现类似插槽的功能的,比如:
import React from 'react'
import { Popover } from 'antd'
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
content: (
<div>
<p>你好,这里是react插槽</p>
</div>
)
}
}
render() {
const { content } = this.state
return (
<Popover content={content}>
<div>
悬浮
</div>
</Popover>
)
}
}
上面这样就可以实现类似插槽的功能,这点上确实是比vue灵活些,不需要在结构里在加入特定的插槽占位。 如果是vue的话就可能是这样:
<template>
<Popover>
<div slot='content'>
你好,这里是vue插槽
</div>
<div>悬浮</div>
</Popover>
</template>
大家可以自己写写demo去体会一下。
单向数据流与双向绑定
我们知道vue中通过发布订阅模式实现了响应式,把input
和change
封装成v-model
实现双向绑定,react则没有,需要你自己通过this.setState
去实现,这点上我还是比较喜欢v-model
能省不少事。
虽说单向数据流更清晰,但实际大部分人在开发中出现bug依旧要逐个去寻找某个属性值在哪些地方使用过,尤其是当表单项很多且校验多的时候,代码会比vue多不少,所以大家自行衡量,挑取合适自己或团队的技术栈才是最关键的,不要盲目追求所谓的新技术。
举个例子(简写):
react
import React from 'react'
import { Form, Input, Button } from 'antd'
const FormItem = Form.Item
class App extends React.Component {
constructor(props) {
super(props)
}
onChange(key, e) {
this.setState({
[key] : e
})
}
onClick = () => {
console.log('拿到了:',this.state.username)
}
render() {
return (
<Form>
<FormItem label="username" name="username">
<Input onChange={this.onChange.bind(this, 'username')}/>
</FormItem>
<Button onClick={this.onClick}/>
</Form>
)
}
}
vue
(简写)
<template>
<div>
<Form>
<Form-item label="username" name="username">
<Input v-model='username'/>
</Form-item>
</Form>
<Button @click='click'/>
</div>
</template>
<script>
export default {
data() {
return {
username: ''
}
}
methods: {
click() {
console.log('拿到了:',this.username)
}
}
}
</script>
其实乍一看也差不了多少,vue
这种options
的写法其实会比较清晰一点,react
则需要你自己去划分功能区域。
css污染
vue
中可以使用scoped
来防止样式污染,react
没有,需要用到.module.css
,原理都是一样的,通过给类名添加一个唯一hash值来标识。
举个例子:
react(简写):
xxx.module.css
.xxx {
background-color: red;
}
xxx.css
.xxx {
background-color: blue;
}
xxx.jsx
import React from 'react'
import style form './xxx.module.css'
import './xxx.css'
class App extends React.Component {
render(){
return (
<div>
<div className='xxx'>
blue
</div>
<div className={style.xxx}>
red
</div>
</div>
)
}
}
vue
xxx.css
.xxx {
background-color: red;
}
xxx.vue
<template>
<div>
<div class='xxx' @click='click'>
red
</div>
</div>
</template>
export default {
methods: {
click() {
this.$router.push('yyy')
}
}
}
</script>
<style scoped>
.xxx{
background-color: red;
}
</style>
yyy.vue
<template>
<div>
<div class='xxx' @click='click'>
blue
</div>
</div>
</template>
export default {
methods: {
click() {
this.$router.push('xxx')
}
}
}
</script>
<style scoped>
.xxx{
background-color: blue;
}
</style>
上面只是简单举个例子,页面之间的样式污染主要是因为css默认是全局生效的,所以无论scoped也好或是module.css也好,都会解析成ast语法树,通过添加hash值生成唯一样式。
总结
无论vue也好,react也好不变的都是js,把js基础打牢才是硬道理。
相关文章
- vue引入jQuery[通俗易懂]
- Vue之const的使用及注意点
- 最佳实践:vue组件引用传值(续篇)
- 从useEffect看React、Vue设计理念的不同
- react 子组件向父组件传值_vue父组件给子组件传值
- vue面试常见考察点总结
- vue菜鸡实践
- 在 Vue 中,使用 $attrs 构建高级组件
- vue改写数组方法_vue数组添加和删除
- vue.js和react.js_vue和jquery
- Vue.js – 引入外部 JS 文件
- Vue生成二维码_vue视频软件怎么生成二维码
- vue的相关概念
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- 说说你对Vue的keep-alive的理解_2023-02-28
- vue 中基于html5 drag drap的拖放
- Vue中 webpackChunkName【魔法注释】
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- Vue + SpreadJS 实现高性能数据展示与分析
- 前端Vue和React项目 Git 管理常用.gitignore配置
- 今日热榜HotList-Web前端开源Vue - (聚合热榜)
- react源码分析:深度理解React.Context_2023-02-07
- 一个Vue表单的终极解决方案
- 这3个Vue开源项目,YYDS !
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- 手把手教你vue项目接入漂亮的验证码
- ruoyi-vue版本(十)字典管理 的源码解析
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- 探索React框架中MySQL数据库的应用(react mssql)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- Vue应用中部署Redis(vue中使用redis)
- Oracle Vue考场助力企业数据库技术突破(oracle vue考场)