vue与react的小区别

1：绑定事件event传递区别(没有特殊区别)

通过event获取dom节点
<input ref={(userName) => {
    this.userName = userName
}}  onChange = {this.inputChange} />
react并不需要传递参数
inputChange = (event)=>{
    const target = event.target 
    let value = this.refs.userName.value //通过ref获取dom的值
    this.setState((prevState) => {
        return {
            userName : value
        }
    })
};
如果需要额外传递参数，似乎也需要动态的将event作为参数传递进来

 

通过event获取dom节点
<button @click="handleClick">点击</butoton>
这种也可以获取到dom
<button @click="handleClick($event,123)">点击</button>
需要使用特殊的参数$event,才可以准确的获取到
handleClick: function (e,value) {
    console.log(this, e, value)
},

 

 2：事件系统的区别

react给元素绑定的事件都属于合成事件(可参考什么是合成事件)，在速度方面，原生事件会优先与合成事件触发

　　vue

　　1：v-on指令在普通元素上面使用，属于监听元素的原生事件；在组件上面使用。属于监听子组件的自定义事件

　　2：vm.$on监听当前实例的自定义事件

 

 

3：ref的使用区别

　　vue

　　1：ref用于普通元素上面时，包含的是该dom节点的相关信息；在组件上面使用时，指向的是子组件的实例(是不是给我们多提供了一种组件间通信的方式呢)

　　2：ref的具体使用方式似乎只有一种

　　react

　　1：ref用于普通元素上面时，包含的是该dom节点的相关信息；在组件上面使用时，指向的是子组件的实例(是不是给我们多提供了一种组件间通信的方式呢)

　　2：不能再函数组件当中使用ref,因为函数组件没有实例

　　3：ref的具体使用方式可参考(react-ref的使用方式)

 

4：状态管理器的简要区别

vuex的Mutation 与redux dispatch(reducer) 笔记记录

1：提交方式的区别
vuex
store.commit('increment', 10) //额外添加参数

使用对象的形式
store.commit('increment', {
  amount: 10
})

使用对象的形式
store.commit({
  type: 'increment',
  amount: 10
}) //我更倾向于这种方式 与dispatch(action)一致

2：使用常量代替Mutation 事件类型
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

store.commit({
  type: SOME_MUTATION,
  amount: 10
})

总结：redux确实也喜欢将常量定义在常量文件中；

3：Mutation 必须是同步函数
reducer要求的是纯函数，两者的目的是一致的

4：在组件中提交 Mutation

vuex借助mapMutations 函数，将组件中的 methods 映射为 store.commit 调用

react-redux 提供connect函数，将方法映射到props属性上面

5：action
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作

总结：vuex异步数据存放在action中，直接请求；redux需要借助中间件的形式

6：Module
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
}

redux的写法
export  default combineReducers({
    appReducer,
    headerReducer,
    todoListReducer
})

 

5：vuex 与 redux的核心原则

Redux 遵循三个基本原则：

单一数据来源： 整个应用程序的状态存储在单个对象树中。单状态树可以更容易地跟踪随时间的变化并调试或检查应用程序。
状态是只读的： 改变状态的唯一方法是发出一个动作，一个描述发生的事情的对象。这可以确保视图和网络请求都不会直接写入状态。
使用纯函数进行更改： 要指定状态树如何通过操作进行转换，您可以编写reducers。Reducers 只是纯函数，它将先前的状态和操作作为参数，并返回下一个状态

vuex 应用构建的原则是什么

集中在 store 中的应用级 state。
只有通过提交一个 mutations 这样一个同步的事务来改变 state。
同步的逻辑应该封装在 mutations 中并能够被 actions 操作。

总结：大同小异