前端：Vue和React都学会后，对比React和Vue的11个基本功能-

Posted 2023-02-27

参考技术A

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 进行清除。

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

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