對比 Vue 和 React 的差別

寫在前面

我想不少人和我同樣, 先學會了 Vue 或者 React, 而後再去學另一個, 可是忽然發現二者的實如今思惟上仍是有很大差別的, 而後就開始嫌棄另一個語言, 以爲哪哪不如我先學的這個.
我在學習了 Vue 以後再去學習 React 的. 發現若是能找到二者的類似和差別之處, 理解起來會更快, 因此作了下面一些總結, 但願對你有幫助.

時間有限, 文章不會一步到位, 會持續更新. 歡迎你們關注, 或者參與進來. 有錯誤的地方也歡迎指正.

Github地址

建立一個組件

// vue
// Vue.component('my-component-name', {})
new Vue({
  name: 'DemoComponent',
  props: { // 定義屬性
      bar: {
      type: String, // 定義類型
      required: true, // 必填
      default: '1', // 默認值
      validator: function (value) { // 自定義驗證
        return ['a', 'b'].includes(value)
      }
    }
  },
  data() {
    return { foo: '1' } // 初始化參數
  },
  template: '<div>{{ foo }} {{ bar }}</div>', // 渲染方式
  // vue 的 jsx 使用方式
  // render() { return <div>{a}</div>}
})
複製代碼

// react
export class DemoComponent extends React.Component {
  // getDefaultProps()
  DemoComponent.defaultProps = {
    bar: '1' // 默認值
  };
  DemoComponent.propTypes = {
    bar: React.PropTypes.string.isRequired.oneOf(['a', 'b']) // 定義類型.必填.自定義驗證
  }
  constructor(props){
    super(props);
    // getInitialState()
    this.state = { foo: '1' } // 初始化參數
  }
  render() {
    return (<div>{foo} {bar}</div>); // 渲染方式
  }
}
複製代碼

更新狀態

// vue
this.foo = 'demo'
this.$data.foo = 'demo'
this.$data.arrayFoo.push('bar')

// react
this.setState({foo: "demo"})
this.setState((state, props) => { foo: state.foo + props.bar })
this.setState({arrayFoo: [...this.state.arrayFoo, 'bar']})
複製代碼

生命週期

beforeCreate => [沒有]
created => [沒有]
beforeMounted => componentWillMount
mounted => componentDidMount
beforeUpdate => componentWillUpdate
updated => componentDidUpdate
[沒有] => shouldComponentUpdate
activated => [沒有]
deactivated => [沒有]
beforeDestroy => componentWillUnmount
destroyed => [沒有]
errorCaptured => * componentDidCatch
* watch函數 => componentWillReceiveProps(nextProps)
複製代碼

空白組件

<template> 至關於 <React.Fragment> 或者 <>

指定掛載

vm.$mount('#domid') 相似 ReactDOM.createPortal, 能夠在指定位置掛載組件內容

Hooks

vue3.x 的 composition-api 相似 Hooks

// vue
{ reactive, computed, toRefs } from '@vue/composition-api'

// react
import { useState，useEffect，useContext，useReducer } from "react";
複製代碼

事件處理

// vue
<div @click="handleClick('arg1')"></div>
// react
<div onClick={this.handleClick.bind(this, 'arg1')}></div>
複製代碼

自定義事件

// vue
<div @customEventName='handleCustomEvent'></div>
// this.$emit('handleCustomEvent', ...)

// react
// TODO
複製代碼

函數式組件

// vue
Vue.component('my-component', {
  functional: true,
}
<template functional></template>

// react
MyComponent = () => {
  return(<div>test</div>)
}
複製代碼

Vuex 與 Redux

// Action
action => Action Creators
// vue
example(context, payload) {
  context.commit('EXAMPLE_METHOD', payload)
}
// react
function example(data) {
  return { type:"EXAMPLE_METHOD", payload: data};
}

// Mutations
mutations => Reducers
// vue
EXAMPLE_METHOD (state, payload) {
  state.foo = payload
}
// react
function demoReducer(state = [], action){
  switch(action.type) {
    case "EXAMPLE_METHOD":
      return Object.assign({}, state, {foo: action.payload});
    default: return state;
  }
}

// map
mapState/mapAction =>
  const mapStateToProps = (state, ownProps) => ({xx: state.xx})
  const mapDispatchToProps = (dispatch) => ({actions: bindActionCreators(customActions, dispatch)})
  // this.state.xx
  // this.props.actions.yy
  connect(mapStateToProps, mapDispatchToProps)(MyComponent)
複製代碼

Computed(TODO)

Watch(TODO)

Router(TODO)

...