简介
Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。
今天我们通过对比的方式来学习Vue和React的条件判断、循环、计算属性、属性监听。
希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。
条件判断
Vue使用v-if、v-show
v-if
v-if可以有多个分支，类似js中的if。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
Not A/B
</div>v-show
v-show没有分支，只能对单一元素操作
<div v-show="type === 'A'">
A
</div>v-if和v-show的区别就是，v-if为false时不会进行渲染，而v-show为false时页面会渲染，只是使用样式display: none;进行了隐藏。
React使用三目运算符、&&、if else、style、className
由于jsx的灵活性，在React中相较Vue条件判断的方式比较多。
三目运算符
利用jsx的特性，在html中写js。类似if else的功能
<div>
{this.state.switch ? <div>开启</div> : <div>关闭</div>}
</div>&&
&&可以实现当表达式为true就渲染的功能。
<div>
{this.state.switch && <div>开启</div> }
</div>if else
我们还可以在render之间使用js的if else判断好再渲染。
render() {
let text1 = '';
if (this.state.switch) {
text1 = <div>开启</div>;
} else {
text1 = <div>关闭</div>;
}
return (
<div>
<div>{text1}</div>
</div>
);当然这里还可以延伸出使用switch case，这个笔者就不再细说了。
style
我们还可以利用样式属性来进行隐藏，类似Vue里面的v-show。
render() {
const styleObj1 = { display: this.state.switch ? 'block' : "none" }
return (
<div>
<div style={styleObj1}>开启</div>
</div>
);className
className跟style的用法是类似的。
render() {
const classStr = this.state.switch ? 'show-item-class' : "hide-item-class"
return (
<div>
<div className={classStr}>开启</div>
</div>
);循环
Vue使用 v-for
在Vue中非常简单直接使用v-for指令就可以了。for of、for in效果是一样的。
for of
<ul>
<li v-for="item of arr1" :key="item">{{ item }}</li>
</ul>for in
<ul>
<li v-for="item in arr1" :key="item">{{ item }}</li>
</ul>React使用map或其它循环
由于jsx的灵活性，在React中相较Vue循环的方式比较多。
map
map由于它的返回值是数组，所以用的最广。
render() {
return (
<div>
{this.state.lists.map((item) => (
<div key={item}>{item}</div>
))}
</div>
)
}forin、forof、forEach、filter
js中的for循环都可以拿来使用。这里拿forEach举例，其他的用法也是一样的。核心就是在render返回之前把数据处理好。
render() {
const elements = [];
this.state.lists.forEach(item => {elements.push(<div key={item}>{item}</div>)})
return (
<div>
{ elements }
</div>
)
}计算属性
计算属性我们应该都知道，就是当依赖发生变化的时候才会对值进行重新计算。
在计算属性这块，Vue是比React做得更好的，不需要显示传递依赖，会自动对依赖进行监听。
Vue使用 computed
computed、onComputed是一样的，只是一个是Vue2版本，一个是Vue3版本。
Vue2 computed
computed: {
fullName() {
return this.firstName + this.lastName
}
}Vue3 computed
computed(() => {
return return this.firstName + this.lastName
})这里只是简单介绍了computed、onComputed如果想了解更多用法，可以看看笔者前面写的对比Vue2总结Vue3新特性(2022年最全，2.5w字！)，里面有详细介绍。
React使用 useMemo、useCallback
React class组件没有提供计算属性的方法，在函数组件中可以使用useMemo、useCallback两个hook。
useMemo
useMemo接受两个参数，第一个参数是一个函数，返回值用于产生保存值。 第二个参数是一个数组，作为dep依赖项，数组里面的依赖项发生变化，重新执行第一个函数，产生新的值。
import { useMemo, useState } from "react";
function MemoHook() {
const [count, setCount] = useState(0);
const [name, setName] = useState("randy");
// 1. 用来缓存值，当依赖变化值才变，类似vue里面的computed
// 首次渲染是会执行的
// 当count改变useMemo1才会重新计算，改变name并不会重新计算
const useMemo1 = useMemo(() => {
// 返回值等于useMemo的返回值
return count;
}, [count]);
return (
<div>
<div>useMemo1,我是依赖count{useMemo1}</div>
<div>{count}</div>
<div>
<button onClick={() => setCount(count + 1)}>add count</button>
</div>
<div>{name}</div>
<div>
<button onClick={() => setName(name + "!")}>
change name 没什么依赖我
</button>
</div>
</div>
);
}
export default MemoHook;useCallback
useCallback 和 useMemo 接收的参数都是一样，都是在其依赖项发生变化后才执行。区别在于 useMemo 返回的是函数运行的结果， useCallback 返回的是函数。
下面我们来看例子
import { useCallback, useState } from "react";
// 子组件
function CallbackHook1({ count, say }) {
return (
<div>
<div>我依赖count:{count} 不依赖name</div>
<div>
<button onClick={say}>say</button>
</div>
</div>
);
}
// 父组件
function MemoHook() {
const [count, setCount] = useState(0);
const [name, setName] = useState("randy");
// 这种写法是实时的， 每次输出最新的count和name
const callback1 = () => {
console.log(count + name);
};
// 相当于只有count发生变化的时候 callback返回的函数才会重新计算
// 不是实时的 也就是当count变化才重新返回函数，所以name就会有滞后性
const callback2 = useCallback(() => {
console.log(count + name);
}, [count]);
return (
<div>
<div>{count}</div>
<div>
<button onClick={() => setCount(count + 1)}>add count</button>
</div>
<CallbackHook1 count={count} say={callback1}></CallbackHook1>
{/* <CallbackHook1 count={count} say={callback2}></CallbackHook1> */}
<div>{name}</div>
<div>
<button onClick={() => setName(name + "!")}>改变name</button>
</div>
</div>
);
}
export default MemoHook;当我们使用callback1回调方法的时候，每次点击触发say方法都会获取最新的count和name值。
但是我们使用callback2回调方法的时候，每次点击触发say方法，只有在count发生变化的时候才会重新计算，name的改变不会触发，所以name的值可能就不是最新的。
想更深入了解Hook的可以看看笔者前面写的Vue和React对比学习之Hooks。
监听
Vue使用watch或watchEffect
watch
// Vue2
watch: {
count(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
// Vue3
watch(
() => count,
(newVal, oldVal) => {
console.log(newVal, oldVal);
}
);watchEffect
watchEffect是Vue3新增的。它在组件初始化的时候就会运行，并且会自动监听里面的依赖，当依赖发生变化会自动执行函数。
相较于watch，他是获取不到oldValue的，只能拿到最新值。可以根据自身情况选择使用
watchEffect(
() => {
console.log("watchEffect", count);
}
);这里只是简单介绍了watch或watchEffect如果想了解更多用法，可以看看笔者前面写的对比Vue2总结Vue3新特性(2022年最全，2.5w字！)，里面有详细介绍。
React使用useEffect、或生命周期方法
在函数组件可以使用useEffect，在class组件可以使用生命周期方法。
useEffect
useEffect只能用在函数组件里面。
useEffect 可以看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。可以弥补函数组件没有生命周期的缺点。
useEffect接收两个参数，第二个参数可选。第一个参数是一个函数，第二个参数是依赖项(数组)，当依赖发生变化的时候会重新运行前面的函数。
初始化和更新的时候被调用
没有依赖项的useEffect会在组件初始化和组件更新的时候被调用。（任何引起组件更新的操作都会导致运行）。
useEffect(() => {
console.log("没有依赖项，组件初始化和组件更新的时候就会被调用");
});类似class组件的
componentDidMount() {
console.log("没有依赖项，组件初始化和组件更新的时候就会被调用");
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("没有依赖项，组件初始化和组件更新的时候就会被调用");
}如果想只在某个state发生改变的时候才被调用可以传递依赖项。
初始化和具体state更新的时候被调用
这个依赖count的useEffect会在组件初始化和仅count发生变化的时候被调用。这个类似vue里面的immediate watch。
useEffect(() => {
console.log("依赖count", count);
}, [count]);生命周期方法
在React class组件中，组件自身state的改变会依次触发如下生命周期方法getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
我们可以选择合适的生命周期函数进行处理。具体可以看看笔者前面写的Vue和React对比学习之生命周期函数(Vue2、Vue3、老版React、新版React)。
总结
在条件判断、循环、计算属性、属性监听，Vue和React都有各自对应的方案。
总体感觉就是Vue封装的更好，每个都有对应的方案来解决。React相对来说就更灵活，可以使用各种自己喜欢的方式来实现。
但是在计算属性和监听一块，笔者觉得Vue做的更优秀，它会自动收集依赖，而不用我们显示的去指定依赖，让我们用起来更舒服。
系列文章
Vue和React对比学习之生命周期函数(Vue2、Vue3、老版React、新版React)
Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)
Vue和React对比学习之路由(Vue-Router、React-Router)
Vue和React对比学习之状态管理 (Vuex和Redux)
Vue和React对比学习之条件判断、循环、计算属性、属性监听
后记
感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！
