React & Redux 对比 Vue & Vuex 使用分享

文章目录

  • 一、Vue & React 对比
    • Vue
      • template
    • React
      • 元素
      • 组件
        • 函数组件
        • class 组件
        • 渲染组件
      • State
      • 组合
      • 事件处理
  • 二、Vuex & Redux 对比
    • Vuex
      • 一个简单的 store
      • 工作流程
    • Redux
      • 核心概念
        • Action
        • Reducer
        • combineReducers()
        • Store
  • 三、React-Redux
    • Provider
    • connect
      • mapStateToProps
      • mapDispatchToProps
        • 有两种方式可以 dispatch action
    • 异步 Action

本文旨在帮助 Vue 方向的同学了解 React 用法,所以侧重两者对比。而且是根据我的实践选取了一些我认为需要注意或重点讲解的内容,不涉及深层原理。文中没有提到基本语法和核心 API 建议阅读文档,见下文。

如果没有使用过 Vue 的同学建议直接阅读文档进行学习:
React 中文文档
Redux 英文文档
React-Redux 英文文档

希望对你有帮助,那我们开始吧

一、Vue & React 对比

Vue

template

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function() {
    return {
      greeting: "Hello"
    };
  }
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

这是一段 vue 单文件组件的代码,其中 template 模版编译的过程是:vue-template-compiler 将 template 预编译为 render functions 后注入到从

你可能感兴趣的:(React)