vue和react兩家的對比之–表格-（增刪查小demo）
這篇博客主要就是對比一下使用分別react和vue實現下面這個小demo ，這個案例實現起來可以清除的看到vue模板的優勢，但是這個案例並不能說明vue就比react要好，vue很多東西都給你封裝好了，你只需要去調用，這就可能寫出來的東西比較死，但是react就不一樣了，大部分實現還得靠自己寫，雖然寫起來沒vue那麼快，但是寫的花樣很多，很靈活，這個可以從我下面的代碼中體現出來，這兩個都是現在很火的框架，此案例僅供參考。
vue
代碼中使用了 bootstrap3，這個裏面有一個需要注意的點是，這個模糊查詢 v-for遍歷時 in 後面是search函數的返回值，這個使用vue實現起來比較簡單 ，，但是使用react相對"麻煩”很多 這個從代碼長度上就可以看出來 vue 100行 react 170多行（我寫的麻煩了–但是還是有必要的）😂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../day1/vue.js"></script>
<link rel="stylesheet" href="./bootstrap.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加信息</h3>
</div>
<div class="panel-body form-inline">
<label>
ID:
<input type="number" class="form-control" v-model="id" />
</label>
<label>
NAME:
<input type="text" class="form-control" v-model="name" />
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add" />
<label>
按照關鍵字搜索:
<input type="text" class="form-control" v-model="searchText" />
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>序號</th>
<th>ID</th>
<th>NAME</th>
<th>CREATE_TIME</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in search()" :key="item.id">
<td>{{index + 1}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.create_time}}</td>
<td><a href="" @click.prevent="del(item.id)">刪除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: '小明', create_time: new Date().toLocaleString() },
{ id: 2, name: '小李', create_time: new Date().toLocaleString() },
{ id: 3, name: '小天', create_time: new Date().toLocaleString() },
],
id: null,
name: null,
searchText:''
},
methods: {
add() {
let { list, id, name } = this
if (list.find(item => item.id === parseInt(id))) {
this.id = ''
return alert('id重複了')
}
if (!id || !name) {
return alert('不能爲空')
}
list.push({
id,
name,
create_time: new Date().toLocaleString()
})
// console.log(new Date().toLocaleDateString() +' ' + new Date().toLocaleString());
this.id = ''
this.name = ''
},
del(id) {
const index = this.list.findIndex(item => item.id === id)
this.list.splice(index, 1)
},
search() {
return this.list.filter(item => {
if(item.name.includes(this.searchText)) {
return item
}
})
}
},
})
</script>
</body>
</html>
react
當然這個代碼 我把這個小案例組件化了 分成了3個組件，這樣無形間增加了大量的代碼 ，react中這個父 子 組件之間 數據的交流並不是太方便，然後這裏就使用了props在父子組件和兄弟組件之間傳參。 裏面組件之間交流 比較容易整迷了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../day1/js/react.development.js"></script>
<script src="../day1/js/react-dom.development.js"></script>
<script src="../day1/js/prop-types.js"></script>
<script src="../day1/js/babel.min.js"></script>
<link rel="stylesheet" href="./bootstrap.css">
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
list: [
{ id: 1, name: '小明', create_time: new Date().toLocaleString() },
{ id: 2, name: '小李', create_time: new Date().toLocaleString() },
{ id: 3, name: '小天', create_time: new Date().toLocaleString() },
],
searchText: ''
}
}
toSearch = (searchText) => {
this.setState({ searchText })
}
toDel = (a) => {
let { list } = this.state
const index = list.findIndex(item => item.id === a)
list.splice(index, 1)
this.setState({
list
})
}
toAdd = (info) => {
const { id, name, create_time } = info
let { list } = this.state
list.push({
id,
name,
create_time
})
this.setState({
list
})
}
render() {
const { searchText } = this.state
const { list } = this.state
return (
<div>
<Add toAdd={this.toAdd} toSearch={this.toSearch} list={list} />
<Table toDel={this.toDel} list={list} searchText={searchText} />
</div>
)
}
}
class Add extends React.Component {
state = {
searchText: ''
}
static propTypes = {
toAdd: PropTypes.func.isRequired,
toSearch:PropTypes.func.isRequired
}
add = () => {
const { list } = this.props
if (list.find(item => item.id === parseInt(this.idInput.value))) {
this.idInput.value = ''
return alert('id重複了')
}
if (!this.idInput.value || !this.nameInput.value) {
return alert('不能爲空')
}
console.log(this.idInput.value, this.nameInput.value)
let info = {
id: this.idInput.value,
name: this.nameInput.value,
create_time: new Date().toLocaleString()
}
this.props.toAdd(info)
this.idInput.value = ''
this.nameInput.value = ''
}
handleChange = (event) => {
const searchText = event.target.value;
this.setState({ searchText });
this.props.toSearch(searchText)
}
render() {
return (
<div className="panel panel-primary">
<div className="panel-heading">
<h3 className="panel-title">添加信息</h3>
</div>
<div className="panel-body form-inline">
<label>
ID:
<input type="number" className="form-control" ref={input => this.idInput = input} />
</label>
<label>
NAME:
<input type="text" className="form-control" ref={input => this.nameInput = input} />
</label>
<input type="button" value="添加" className="btn btn-primary" onClick={this.add} />
<label>
按照關鍵字搜索:
<input type="text" className="form-control" value={this.state.searchText} onChange={this.handleChange} />
</label>
</div>
</div>
)
}
}
class Table extends React.Component {
static propTypes = {
toDel:PropTypes.func.isRequired,
list:PropTypes.array.isRequired,
searchText:PropTypes.string.isRequired
}
del = (a) => {
this.props.toDel(a)
}
search = () => {
const { searchText, list } = this.props
return list.filter(item => {
if (item.name.includes(searchText)) {
return item
}
})
}
render() {
let { list } = this.props
return (
<table className="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>序號</th>
<th>ID</th>
<th>NAME</th>
<th>CREATE_TIME</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
this.search().map((item, index) => {
return (
<tr key={item.id}>
<td>{index + 1}</td>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.create_time}</td>
<td><a href="" onClick={(e) => { e.preventDefault(); this.del(item.id) }}>刪除</a></td>
</tr>
)
})
}
</tbody>
</table>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
</script>
</body>
</html>