vue语法和react语法对比

目录

前言：

语法对比：

定义数据，改变数据

计算属性（缓存计算结果）：

显示/隐藏dom元素：

循环数据：

监听：

style样式：

Class：

父组件状态传递到子孙组件中 provide/inject：

插槽slots：

---

前言：

作为前端框架的绝代双骄，react和vue都是必须要会的，很多人可能只熟悉甚至精通其中的一种，但是对另一种框架显得很陌生，这显然是不太好的。本文将针对常用的语法进行对比，帮助小伙伴们更快的上手不熟悉的另一种框架。也欢迎大家提醒补充其他的常用语法。

语法对比：

定义数据，改变数据

vue

vue里在data里定义数据，在methods里定义方法改变数据

react

react里在函数式组件里使用useState定义数据和定义改变数据的方法

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("react");

  const changeName = () => {
    setName("reactjs");
  };
  return (
    <>
      
{name}
      变更名字
    
  );
}

计算属性（缓存计算结果）：

vue

vue中使用computed来实现计算属性的效果

补充：computed(计算属性)可用于快速计算视图（View）中显示的属性，这些计算将被缓存，并且只在需要时更新。计算属性设置的初衷是能够解决复杂的计算。

react

react里借助useMemo实现计算属性，一个值随着另一个值得改变而改变 

import { useState, useMemo } from "react";
import "./App.css";

export default function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);

  const changeNum1 = (e) => {
    setNum1(e.target.value);
  };
  const changeNum2 = (e) => {
    setNum2(e.target.value);
  };

  const result = useMemo(() => Number(num1) + Number(num2));
  return (
    <>
      

        第一个数字：
        
      
      

        第二个数字：
        
      
      
两个数相加的结果是：{result}
    
  );
}

效果图：

显示/隐藏dom元素：

vue

vue里使用v-if或者v-show来切换元素的显示与隐藏

v-if是直接插入dom或者移除dom来作元素的显示和隐藏的

v-show是根据CSS 中的 display 属性来作占位显示和隐藏的

react

react里可以根据JavaScript 中的三元表达式和“&”实现元素的显示与隐藏，等同于v-if

也可以使用元素的属性值来做元素的显示与隐藏，等同于v-show

import { useState } from "react";

export default function App() {
  const [isIf, setIsIf] = useState(true);
  const [isShow, setIsShow] = useState(true);

  const checkoutIf = () => {
    setIsIf(!isIf);
  };
  const checkoutShow = () => {
    setIsShow(!isShow);
  };
  return (
    <>
      

        切换（类似于v-if）
        切换（类似于v-show）
      
      

        
{isIf && 
这段文字是用来做类似于v-if的显示与隐藏的
}
        

          这段文字是用来做类似于v-show的显示与隐藏的
        
      
    
  );
}

循环数据：

vue

在vue中我们使用v-for来循环展示数据

react

在react里，我们可以使用js的map数组方法进行数据的循环展示

import { useState } from "react";

export default function App() {
  const [userList, setUserList] = useState([
    { id: 1, rank: 1, name: "吕布" },
    { id: 2, rank: 2, name: "赵云" },
    { id: 3, rank: 3, name: "关羽" },
    { id: 4, rank: 4, name: "典韦" },
  ]);

  return (
    <>
      {userList.map((item) => {
        return (
          

            排名：{item.rank}   武将名：{item.name}
          
        );
      })}
    
  );
}

效果图：

监听：

vue

在vue中我们可以使用watch来实现监听数据变化然后执行回调函数

react

在React中使用useEffect来完成监听的效果

1.在函数组件中调用 useEffect，并传入一个回调函数作为 effect。这个回调函数将会在组件渲染完成后执行。

2.可选地，传入一个依赖项数组作为第二个参数。依赖项数组表示什么情况下需要重新运行 effect。如果不传入依赖项数组，则 effect 每次组件重新渲染时都会执行；如果传入一个空数组 []，则 effect 只会在组件挂载和卸载时执行；如果传入依赖项数组，effect 将会在依赖项发生变化时执行。

import { useState, useEffect } from "react";
import "./App.css";

export default function App() {
  const [hintValue, setHintValue] = useState("所有的");
  const [selectValue, setSelectValue] = useState(0);

  const changeSelectValue = (e) => {
    setSelectValue(e.target.value);
  };

  useEffect(() => {
    const selectData = new Map([
      [0, "所有"],
      [1, "男性"],
      [2, "女性"],
    ]);
    setHintValue(selectData.get(Number(selectValue)));
  }, [selectValue]);
  return (
    <>
      
        全部
        男
        女
      
      
现在选择的是{hintValue}
    
  );
}

效果图：

style样式：

Vue 和 React 都为我们提供了一种不错的动态的给dom元素添加样式的方法。在Vue中，我们通过数组语法绑定多个样式对象，React主要是单个对象的形式

vue

vue添加动态style的语法示例：

react

react添加动态style的语法示例：

export default function App() {
  const style1 = { width: "300px", height: "300px" };
  const style2 = {
    backgroundImage: "linear-gradient(120deg, #fccf31 0%, #f55555 100%)",
    borderRadius: "30px",
  };

  return (
    <>
      

    
  );
}

效果图：

Class：

vue

在vue 里我们可以使用动态class完成class的增添

react

在react里可以借助className去控制class的增添

//App.js
import { useState } from "react";
import "./App.css";

export default function App() {
  const [buttonNum, setButtonNum] = useState(1);

  const clickButton = (num) => {
    setButtonNum(num);
  };
  return (
    <>
      {[1, 2, 3].map((item) => {
        return (
           clickButton(item)}
          >
            按钮{item}
          
        );
      })}
    
  );
}

//App.css
.button-style {
  display: inline-block;
  width: 100px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border: 1px solid #ccc;
}

.button-style-active {
  background-color: skyblue;
  color: #fff;
}

效果图：

父组件状态传递到子孙组件中 provide/inject：

vue

在Vue中，我们可以使用“provide/inject”将顶级状态传递给任何子节点

父组件App.vue

子组件Child.vue

react

在react里可以借助 Context 将全局状态共享给任何子节点

主页面App.js

import { useState } from "react";
import { FatherInfoDetail } from "./Father";
import Child from "./Child";

export default function App() {
  return (
    <>
      
        
      
    
  );
}

父组件Father.js

import { createContext } from "react";

export const FatherInfoDetail = createContext({
  adminInfo: {
    name: "",
  },
});

子组件Child.js

import { useContext } from "react";
import { FatherInfoDetail } from "./Father";

export default function Child() {
  const { adminInfo } = useContext(FatherInfoDetail);

  return (
    <>
      
父组件传过来的内容是 {adminInfo.name}
    
  );
}

效果图：

插槽slots：

vue

vue里面通过slot标签实现插槽

主页面App.vue

子组件接收插槽的页面Child.vue

react

React没有插槽的概念，但是可以通过props.children获取组件内部的子元素，类似于默认插槽。

主页面App.js

import Child from "./Child";

export default function App() {
  return (
    <>
      

        
这里是父组件所在的页面
      
      
        
本行文字就是父组件插槽传递到子组件里面的
      
    
  );
}

子组件接收插槽的页面Child.js

export default function Child(props) {
  const { children } = props;

  return (
    <>
      
{children}
    
  );
}

效果图：