从Vue使用者的视角看React

两者的优缺点比较这里就不列了,没啥子意义。

仅从个人主观的观察,Vue 的视频教程数量要远远多于 React 相关。

两者在视觉上最大的区别应该就是有没有将结构行为样式相分离,但注意,这些仅仅是视觉上给人的感受,实际上 template 中写的东西也是要交给 render 函数去处理的。而这也是很多人争论的点。

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Snipaste_2021-01-14_13-13-13.png
Snipaste_2021-01-14_13-15-03.png

趁着 Vue3 的间隙来看一波 React,学的东西类似,如何插值,如何响应式,如何组件化。


React 没有类似 v-if 指令的东西,那么列表遍历渲染逻辑就不同了。

同样 React 没有采用 mustache 语法,那么如何将数据和 DOM 搞到一起也是个问题。

React 推荐使用的是 JSX,这货和 TypeScript 与 JavaScript 的关系类似,最终还是要搞成 JavaScript 代码,至于这个过程是怎样的就涉及到编译原理的知识了。

不得不说前端的方言是真多。
JavaScript ===> TypeScript JSX
CSS ===> stylus less sass
HTML ===> markdown
DOM ===> VDOM

又到了立flag的时候了

来看一波场景

// 如何将数据弄到DOM中
<h1>{{title}}</h1>

const element = <h1>{title}</h1>
// 如何将数据插入到元素属性上
<img :src=user.avatarUrl />

const element = <img src={user.avatarUrl} />

组件方面,Vue更多地使用单文件格式,而React可以使用函数组件和class组件,且组件名要大写开头。

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>
}

好吧,上面就是一个函数组件了,它和普通普通函数相比,在于 return 的地方,其实是 return 了一个对象。当然了,也可以使用类组件,要继承 React.Component,更多地使用函数组件。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

那么,接下来如何将 props 值传给组件?

// Vue
<Welcome :name=name></Welcome>
// React
const element = <Welcome name={name} />;

接下来是生命周期,和Vue使用上没啥区别,名字不同。

接下来是事件处理,都是要编写处理函数的。

// vue
<button @click="activateLasers">
</button>

// react
<button onClick={activateLasers}>
  Activate Lasers
</button>

紧接着是条件渲染,在 Vue 中会使用 v-if 指令,而在 React 中使用 JSX 可以根据值return不同的组件。就按照 JavaScript 的逻辑来看就好。忽然有点想投入 React 的怀抱了。

// react
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

下面是列表渲染,在Vue中使用v-for,前面提到过 React 没有指令这一套,还是使用JSX。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

当然了,你不用map也可以,foriin也不拦着,能遍历就完事了。这里也有key的概念,和Vue中的key类似。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 155,348评论 4 355
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 65,906评论 1 283
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,191评论 0 235
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,295评论 0 201
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,606评论 3 283
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,107评论 1 202
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,507评论 2 305
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,217评论 0 193
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,848评论 1 234
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,183评论 2 238
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,734评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,084评论 2 247
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,608评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,921评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,627评论 0 190
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,103评论 2 261
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,054评论 2 257

推荐阅读更多精彩内容