前言

React 和 Vue 是两个流行的前端 JavaScript 框架，它们有着一些显著的区别。

React 更注重灵活性和可扩展性，它是一个库而不是完整的框架，因此在项目中使用时需要配合其他库和工具。React 的核心概念包括组件化和虚拟 DOM，它鼓励使用 JSX 编写组件，使得代码更加声明式和易于理解。

Vue 是一个更加全面的框架，它提供了更多的开箱即用的特性，如路由、状态管理等。Vue 的设计思想包括双向数据绑定和组件化，它的模板语法和指令使得开发者可以更快速地构建应用程序。

React 的学习曲线相对较陡，需要理解 JSX、虚拟 DOM 等概念，适合有一定 JavaScript 基础的开发者。Vue 则更容易上手，它的 API 设计和文档使得新手可以快速上手构建简单到复杂的应用。

总体而言，React 更加灵活和强调自由选择，而 Vue 提供了更多的集成和工具，适合那些希望快速构建应用的开发者。

今天就让我们以一个todolist简单列表为例子，来说明一下它们之间的不同之处。

准备工作

npm init vite

我们采用这个指令，来建立一个react加vite的标准格式文件。

我们目前不需要关注其他目录下的文件，我们只看src，这是我们操作的主文件夹。components里面存的是我们的组件，我们一个完整的react组件由一个jsx和css文件组成，然后我们的main.js文件将App.js文件挂载到我们的唯一html文件里面。

大家会发现，这个和我们的vue是有点像的。相比vue，react这方面更加统一和简洁，除了唯一的html文件，其他文件全部是jsx+css。

基本信息

首先我们看一下react中组件的声明，我们让一个类去继承Component，这样子它就是一个组件，我们在constructor里去继承父类相关属性（props传参），但是除此之外继承不到父类原有属性和方法。此外如果子组件没有自己的私有属性要声明，则不用super（props），相当于默认了super（props）。这里我们的App是最大的根组件，被挂载到html里面。

传参

接下来我们来看一下react中的传参，组件自己私有的属性和方法传给子组件时用this，最终子组件返回的数据在render（）里的return里面，html结构用（）包围，js结构用{}包围。这里我们可以发现，我们只传给了todoform一个增加todo的方法，而todolist我们不仅传了诸多方法，还把todos数组传给了子组件。

我们简单看一下这个add方法，可以发现，这个方法用于往数组里增加数据，因此子组件只要运用这个方法就可以修改父组件数组，不需要传入原数组。其他方法类似，在此不做赘述。

todoform

我们接下来详细地看一下子组件todoform

import { Component } from "react";
import "./TodoForm.css";

class TodoForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputText: "聚会",
        };
    }

    handleChange = (e) => {
        this.setState({
            inputText: e.target.value,
        });
    };

    handleSubmit = (e) => {
        e.preventDefault();
        if (this.state.inputText.trim()) {
            this.props.addTodo(this.state.inputText);
            this.setState({
                inputText: "",
            });
        }
    };

    render() {
        return (
            <form className="todo-form" onSubmit={this.handleSubmit}>
                <input
                    type="text"
                    placeholder="请输入待办事项"
                    className="todo-form_input"
                    value={this.state.inputText}
                    onChange={this.handleChange}
                />
                <button type="submit" className="todo-form_button">
                    Add
                </button>
            </form>
        );
    }
}

export default TodoForm;

我们首先引入组件Component和css，然后自己设置私有属性inputtext，并接收父组件传入的方法，由于react中没有双向绑定，因此我们在把inputtext的值给value后，value值便不会被修改，为了变成响应式数据，我们必须加一个handleChange函数来达到这个效果。此外react绑定事件用on。

这里我们做一个小结

1. react中input框响应式数据要通过this.setState来重新设置，没有双向绑定。
2. react中绑定事件通过on来绑定。
3. react中父组件传给子组件的值，子组件可以直接进行修改，即使不传值，也能通过传入修改值的方法进行修改。
4. react中解构出来的父类属性或方法可以直接用，自己的私有属性或方法要用this的方式。
5. react中继承到的父类方法如果不进行重写，最终就相当于在子组件里操作父组件的方法。
6. 如果子组件没有自己要设置的私有属性，则super（props）默认存在。不需要construct了。

todolist

接下来看看我们的todolist，同理我们先进行一些必要的引入，然后由于没有私有属性，因此只要render就可以了，我们先对父组件传入的属性和方法去进行解构，然后返回一个html结构，最终我们的所有属性和方法都传给了我们的子组件todoitem去进行操作。在这里我们也做几点小结

1. a的子组件接收到的数据可以传递给a的子组件的子组件去进行操作。最终操作的还是a组件里面的数据。
2. 组件最终采用export default 的形式抛出供其他组件使用。
3. react中没有v-for循环生成列表，可以采用js原生数组里的map方法去进行操作。