react 與vue開發中常見的不同（持續整理中...）

引入圖片和背景

react:

import logo from './logo.svg';
...
<img src={logo} className="App-logo" alt="logo" />

vue:

<img :src="logo" className="App-logo" alt="logo" />
<div v-bind:style="{ 'background-image': 'url(' + logo + ')'}">背景</div>
...
import logo from './logo.svg';
...
data: function () {
            return {
              logo:logo,//必要
            }
        },

動態添加className

不同於常規的calss寫法，react中要寫"className"

react:

 <div className={navFlag=='shopCar'?"activedTheme":''}>添加className</div> 
 <div className={`main clearfix ${noLine?"noBorder":""}`}>添加更多className</div> 
 {/*動態給子組件的class傳值*/}
 <i className={iconName+` iconfont ${actived?"activedTheme":""}`}></i>

vue:

<div v-bind:class="{'activedTheme':navFlag=='shopCar'}">添加class</div>
 <div class="main clearfix" v-bind:class="{'noBorder':noLine}">添加更多class</div>

組件生命週期

vue:根實例在main.js中被創建：

var app=new Vue({el:"#app",components:{APP},template:’’})

然後項目中的vue文件，一個vue文件可看做一個組件，這些可嵌套可複用的組件與根實例組成一個vue應用。

實例（組件）鉤子：

 <template>
      <div>
        flag:<input type="text" v-model="flag">
        <div id="box">{{flag}}</div>
      </div>
    </template>

<script>
  export default {
    props: [],
    data: function () {
      return {
        flag:'data數據',
      }
    },
    watch:{

    },
    beforeCreate: function () {
      console.log('beforeCreate---------');
      console.log(this.flag);//undefined
      console.log($("#box").length);//0
    },
    created: function () {
      console.log('created----------');
      console.log(this.flag);//data數據
      console.log($("#box").length);//0
    },
    beforeMount: function () {
      console.log('beforeMount---------');
      console.log(this.flag);//data數據
      console.log($("#box").length);//0
    },
    mounted: function () {
      console.log('mounted-----------');
      console.log(this.flag);//data數據
      console.log($("#box").length);//1
    },
    beforeUpdate: function () {
      console.log('beforeUpdate--------');
      console.log(this.flag);//data
      console.log($("#box").length);//1
    },
    updated: function () {
      console.log('updated------------');
      console.log(this.flag);//data
      console.log($("#box").length);//1
    },
    beforeDestroy: function () {
      console.log('beforeDestroy--------');
      console.log(this.flag);//data
      console.log($("#box").length);//1
    },
    destroyed: function () {
      console.log('destroyed------------');
      console.log(this.flag);//data
      console.log($("#box").length);//1
    }
  }
</script>

當改變data時觸發beforeUpdate updated函數，其他的函數都只是調用一次，當需要監聽某個data改變時，可使用watch。
react:

現在看一下執行：

import React,{Component} from 'react'
class Home extends Component {
    constructor(props) {//getInitialState()
        super(props);
        this.state = { flag: 'data數據' };
    }
    componentWillMount(){
        console.log('componentWillMount-----------');
        console.log(this.state.flag);
    }
    render() {
        console.log('render-----------');
        console.log(this.state.flag);
        return (
            <div id="box">Home</div>
        )
    }
    componentDidMount(){
        console.log('componentDidMount-----------');
        console.log(this.state.flag);
        console.log(document.getElementById('box'));
    }
    componentWillReceiveProps(){
        console.log('componentWillReceiveProps-----------');
    }
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate-----------');
    }
    componentWillUpdate(){
        console.log('componentWillUpdate-----------');
    }
    componentDidUpdate(){
        console.log('componentDidUpdate-----------');
    }

    componentWillUnmount(){
        console.log('componentWillUnmount-----------');
    }
}

export default Home

看出組件初始化時，componentDidMount後面的函數不會觸發，
當state改變時，如果有shouldComponentUpdate會先觸發這個函數，沒有則繼續下面圖的：

切換路由時，離開當前組件：

當改變state時觸發componentWillUpdate，render，componentDidUpdate函數，其他的函數都只是調用一次。

this指向

vue中，生命週期鉤子及事件函數中的this即當前的vue對象

例 <span @click=‘closeThis’>關閉

closeThis:function(){
      console.log(this)  //VueComponent
}

react要做處理，否則事件中的this爲undefined，或者用es6寫法

例：< span onClick={this.closeThis}>關閉

closeThis(){
      console.log(this)  //undefined
}

例：< span onClick={this.closeThis.bind(this)}>關閉

closeThis(){
      console.log(this)  // Home [即當前的react對象]
}

es6寫法：
< span onClick={this.closeThis}>關閉

handleChange=(event)=>{
    console.log(this);//Home
}

全局組件

場景：需要封裝一堆的自定義組件，一次引入，全局使用
vue:
配置：main.js(一次引入)

//elementUI引入
import ElementUI from 'element-ui'
Vue.use(ElementUI);

使用：（任意地方）

<el-form :inline="true"><el-form/>

react使用（某jsx中）：

import BottomNavigation from '@material-ui/core/BottomNavigation';
...
<BottomNavigation ><BottomNavigation />

React不能使用vue的上面的方式，只能使用一次，單獨import目標組件；（這個答案不絕對啊，只是現在我這裏是這樣的，確實找不到方法了，希望有更好的辦法的朋友評論告訴一下技巧，謝謝）

組件的命名

react組件的命名必須是大寫開頭，但是vue不是。

import書寫位置

react使用import時要注意，在import前不能出現非import語句，否則報錯。

組件內樣式的書寫

react:

//樣式的書寫格式應該是鍵值對的方式，屬性名爲駝峯
var style={
    banner:{
        fontSize:"32px",
        color:"red"
    }
}
class Home extends Component {
    render() {
        return (
            <div style={style.banner}>324</div>
        )
    }
}

vue

<div class="banner">324</div>
...
<style lang="scss">
  .banner{
     font-size:32px;
     color:red;
  }
<style>

vue渲染html數據,React渲染html數據

vue :< div v-html=“htmlData”></div>
React:< div dangerouslySetInnerHTML={{__html: htmlData}}></div>