React & Vue 实现 Todolist 对比

React：

脚手架初始化项目

npx create-react-app todolist

import React, { Component } from 'react';
import './Todolist.css';

// 若上面不引用 { Component }则需要写成 React.Component
class Todolist extends Component {
  constructor(props){
    super(props);
    // 类似于Vue的data中 变量声明
    this.state={
      inputValue:'', // 输入框中的值
      list:[] // todolist数组
    }
  }
  // 点击增加条目
  handleAdd(){
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
  // 动态监听输入变化inputValue值
  handleInput(e) {
    let inputValue = e.target.value; // 获取input值
    this.setState({
      inputValue // 键值对相同时 可简写
    });
  }
  // 点击删除条目
  handleRemove(idx) {
    let list = this.state.list; // 尽量不直接操作state中数组 备份一份出来性能高
    list.splice(idx,1); // 删掉list中下标为idx的项
    this.setState({
      list
    });
  }
  render() {
    return (
      <div className="todolist">
        <div>
          {/* value = {foo} 与 onChange = {} 加起来等价于Vue的 v-model = "foo" */}
          <input type="text" value={this.state.inputValue} onChange={this.handleInput.bind(this)}/>
          <button onClick={this.handleAdd.bind(this)}>Add</button>
        </div>
        <ul>
          {
            this.state.list.map((item,index)=>{
              return <li key={index}>{item}
                {/* index可以通过bind传给handleRemove */}
                <button onClick={this.handleRemove.bind(this,index)}>-</button>
              </li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default Todolist;

Vue：

脚手架初始化项目

vue init webpack my-project

<template>
  <div class="todolist">
    <div>
      <input type="text" v-model="inputValue">
      <button @click="handleAdd()">Add</button>
    </div>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        {{item}}
        <button @click="handleRemove(index)">-</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Todolist',
  // 类似于React的state中 变量声明
  data () {
    return {
      inputValue:'', // 输入框中的值
      list:[] // todolist数组
    }
  },
  methods:{
    // 点击增加条目
    handleAdd(){
        this.list=[...this.list,this.inputValue],
        this.inputValue='';
    },
    // 点击删除条目
    handleRemove(idx) {
      let list = this.list; // 尽量不直接操作state中数组 备份一份出来性能高
      list.splice(idx,1); // 删掉list中下标为idx的项
      this.list = list;
    }
  }
}
</script>
<style scoped>
.todolist{
  background:linear-gradient(left,rgba(255,255,255,.8),rgba(0,0,0,.2));
}
ul {
  list-style-type:disc;
}
li {
  display: list-item;
  margin: 0 10px;
}
</style>

简单の对比总结：

1.事件绑定：
Vue:
@click @change
React:
onClick onChange

2.表达式&运算
Vue:
{{userInfo.userName}}
React:
{this.state.userInfo.userName}
3.类名の动态切换(《,》改为<,>)
Vue:
《div class=”todolist” :class={ showMsg ? ‘red’ : ‘green’ }》
React:
《div className=”todolist” className={ this.state.showMsg ? ‘red’ : ‘green’ }》
4.其他区别及对应关系
Vue data(){ } 对应 React this.state={ }
Vue表达式中不需要this,React中需要指定this,this.state及 调用方法的this绑定:bind(this)
Vue 各个方法及钩子需要逗号’,’隔开，而React是构造器语法，并不需要逗号
Vue v-model=”{foo}”可实现双向绑定，React需要 value={foo} onChange={this.updateFoo.bind(this)}来实现视图与数据的双向绑定
CSS一个是写在本文件.vue内部，另一个是引入.css文件