vue 与 react 写法差异

发表于

一直想写一下vue与react在写法上有哪些差异，打算跟着vue官网写一遍，然后再看对应的react是怎么实现的，所以现在开始吧。

安装

我直接使用工具来做这个例子了。

vue-cli

1
2
3
4
5
npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

create-react-app

1
2
3
4
5
npm install -g create-react-app
create-react-app my-project
cd my-project
npm install
npm start

如果需要自己配置的话，自己去摸索。

启动实例

vue

1
2
3
4
5
6
7
8
import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
1
2
//html部分
<div id="app"></div>

react

1
2
3
4
5
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
1
2
//html部分
<div id="root"></div>

插值

vue

1
<div>Hello {{name}}</div>

react

1
<div>Hello {this.state.name}</div>

添加事件

vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
    <!-- @click可改为v-on:click -->
    <button @click="clickMe">Click</button>
</template>

<script>
export default {
    methods: {
        clickMe(){
            console.log('click);
        }
    }
}
</script>

react

1
2
3
4
5
6
7
8
9
10
11
12
constructor(props){
    super(props);
    this.clickMe = this.clickMe.bind(this);
}
clickMe(){
    console.log('click');
}
render (){
    return (
        <button onClick={this.clickMe}>Click</button>
    );
}

条件渲染

vue

1
<div v-if="isTrue"></div>

react

1
2
3
4
const showDiv = isTrue ? <div>{'true'}</div> : <div>{'false'}</div>;
return (
    <div>{showDiv}</div>
);

列表渲染

vue

1
2
3
4
5
6
7
8
//html部分
<div v-for="list in lists">{{list}}</div>
//js部分
data(){
    return {
        lists: [1,2,3,4,5]
    }
}

react

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
constructor(props){
    super(props);
    this.state = {
        lists: [1,2,3,4,5]
    };
}
render (){       
    return (
        this.state.lists.map((list, index) => {
            return (
                <div key={index}>{list}</div>
            )
        })
    );
}

组件

vue

1
2
3
4
5
6
7
<template>
    <div></div>
</template>
<script>
export default {};
</script>
<style></style>

react

1
2
3
4
5
6
7
import React, {Component} from 'react';
class 组件名 extends Component{
    render(){
        return (<div></div>);
    }
}
export default 组件名;

props

vue

无需像react一样安装npm包
以组件作为例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <div id="Hello">
        Hello {{name}}
    </div>
</template>
<script>
export default {
    props: {
        name: {
            default: 'world',
            type: String
        }
    }
}
</script>

react

安装

首先需要import PropTypes from ‘prop-types’
以组件作为例子

1
2
3
4
5
6
7
8
9
10
11
import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Hello extends Component {
    render (){
        return (
            <div>Hello {this.props.name}</div>
        );
    }
}
export default Hello;

默认值

1
2
3
Hello.defaultProps = {
    name: 'world'
}

类型检查

Hello.propTypes = {
name: PropTypes.string
}

分发内容

vue

1
2
3
4
5
6
7
8
9
//Hello组件
<div id="Hello">
    <slot></slot>
</div>

//使用Hello组件，并使用slot
<Hello>
    <div>slot</div>
</Hello>

react

1
2
3
4
5
6
7
//Hello组件
<div id="hello">
    {this.props.slot}{/*props后面的slot只是参数名，可为任意值*/}
</div>

//使用Hello组件，并使用slot
<Hello slot={内容} />