React和Vue的区别?

React和Vue也分别使用了一段时间了,作为一名前端开发者,今天就记录一下React和Vue两个框架的区别

1. Vue使用Template模板,React使用Jsx的形式

//Vue的Template
<template>
  <ul>
    <li v-for="node in list" :key="node.id">{{node.name}}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
export default {
  setup() {
    let List = [
      { name: '张三', id: 1 },
      { name: '李四', id: 2 },
      { name: '王五', id: 3 },
    ]
    const list = ref(List)
    return {
      list,
    }
  },
}
</script>

//React的Jsx代码
import React from "react";

export default function Countfunc() {
  let List = [
    { name: "张三", id: 1 },
    { name: "李四", id: 2 },
    { name: "王五", id: 3 },
  ];
  const [list] = React.useState(List);
  return (
    <>
      <ul>
        {list.map((node) => {
          return <li key={node.id}>{node.name}</li>;
        })}
      </ul>
    </>
  );
}

2. Vue是响应式的,React需要setState触发更新

//Vue操作数据只需要直接更改就可以
data(){
    return{
        count:0
    }
},
method:{
    addCount(){
        this.count+=1
    }
}

//操作addCount方法就可以使页面中的count递增1

//而React则需要调用setState方法触发数据更新
state = { count: 0 };
handleAdd = () => {
  const { count } = this.state;
  this.setState({
    count: count + 1,
  });
};

3.Vue中引入computed和wacth语法糖,React实现类似功能需要用户手动实现

4.React自身做的是很少,甚多事情都交给社区去做了,React自身其实只有react和react-cli,Vue作者则为我们提供了大量的Api供用户使用,这样写起来相比React确实方便一点,但是也限制了你的编写自由