Vue和React对比学习之条件判断、循环、计算属性、属性监听

简介

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对比学习之Style样式

Vue和React对比学习之Ref和Slot

Vue和React对比学习之Hooks

Vue和React对比学习之路由(Vue-Router、React-Router)

Vue和React对比学习之状态管理 (Vuex和Redux)

Vue和React对比学习之条件判断、循环、计算属性、属性监听

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！