百科狗-知识改变命运!
--

Vue和React的使用场景和深度有何不同

泡在奶味里1年前 (2023-12-02)阅读数 20#综合百科
文章标签数组的是

不同:

1.react基本上已经有一套遵循Flux的完整开发方案(基本上也就这一套大家默认的方式),而vue虽然有配合vuex使用,但是还有其他很多组织方式来解决,所以并不算是有固定模式,相对灵活很多,当然这个你可以看作是优势,也可以看作是不足

2.react社区还是要比vue大很多

3.react在view层侵入性还是要比vue大很多的

4.首次渲染性能,对于大量数据来说react还是比vue有优势

5.对于component的写法,react偏向于all in js,语法学习上需要下一些功夫,而vue配合vue-loader,其实在很大程度上让你不会觉得陌生--这不就是web component么。

1、Jsx和template

在Vue2中是使用 template 的,这点使用 Vue 的同学们都知道,而在 React 中使用的是 JSX , JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

它有以下优点:

JSX 的例子:使用ReactDOM.render函数,将DOM渲染到对应到id为app的节点下

2、React 中给元素设置 style

React 使用内联样式。我们可以使用 驼峰法 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了给 h1 元素添加 myStyle 内联样式:

3、React 中给元素设置 class

由于 JSX 就是 JavaScript,一些标识符像 class 不建议作为 XML 属性名。作为替代,使用 className 来做对应的属性。

4、React 中的点击事件

在 Vue 中的点击事件使用的是 @click 来触发的,而在 JSX 中使用的是 onClick

5、React 中修改值触发DOM更新

我使用的是 React hook 其中的 useState ,这一个hook在修改常量的时候比较简单,但是在修改引用 对象 或者 数组 的时候就需要先进行 浅拷贝 再进行覆盖修改

6、生命周期

使用React的hook—— useEffect

第二个参数不传

当 useEffect 第二个参数不传时, 页面初始 和 数据更新 的时候,第一个参数函数都会执行,所以此时初始页面时会输出一次啦啦啦,然后无论你点修改num或者修改count的按钮时,也都会输出啦啦啦

第二个参数传递空数组

当 useEffect 第二个参数传 [] 时,那么第一个参数函数只有在 页面初始 的时候才会执行,也就是只执行一次,无论你点修改num或者修改count的按钮,都不会执行这个函数

第二个参数传递非空数组

当 useEffect 第二个参数传非空数组时, 页面初始 和 依赖的数据发生更新 的时候,第一个参数函数都会执行。比如上方的例子:

return清除操作

React 会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。React 会在执行当前 effect 之前对上一个 effect 进行清除。

实在不理解的同学,可以疯狂点击按钮,看看 我是定时器 这句话会输出多遍还是只输出一遍,就恍然大悟了

Vue和React的使用场景和深度有何不同

7、React 中实现 v-if & v-else

Vue中的v-if和v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

也可以用 v-else 添加一个其他模块:

React中实现

如果单单只想实现 v-if 的话,可以借助 && 逻辑运算符

如果想实现 v-if 和 v-else 的话,可以借助 三元运算符

8、React 中实现 v-show

Vue 中的 v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS property display 。

React中实现

其实就是改变元素的 display 这个样式来实现效果

9、React 中实现 v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数组,而 item 则是数组的每一项的别名。

Vue中的v-for

React中实现

JSX 允许在模板中插入数组,数组会自动展开所有成员:

但是我大多数情况会使用数组的 map 方法来协助渲染

10、React 中实现 computed

Vue 中的 computed

只要 name 或者 food 改变, mag 会更新成相应的值

React中实现

在 React 中需要通过 useMemo 这个 hook 来来实现 computed 的效果

11、React 中实现 watch

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)