react学起来好头疼，很多概念好像没搞清楚

Question

全家桶

    "react": "^16.2.0",
    "react-dev-utils": "^5.0.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",

这都是什么？？？

Vue相比之下友好很多，大部分看个教程就能开始用。

状态管理

Vue官方已经分好了4个操作，数据存放以及操作一目了然。
然后现在学react跟着某个教程写的

import axios from 'axios';
import {getRedirectPath} from '../util.js';

const REGISTER_SUCCESS = 'REGISTER_SUCCESS'
const ERROR_MSG = 'ERROR_MSG'

const initState = {
  redirectTo: '',
  isAuth: false,
  msg: '',
  user: '',
  pwd: '',
  type: '',
}


// reducer
export function user(state = initState, action) {
  switch(action.type) {
    case REGISTER_SUCCESS:
      return {...state, msg:'',redirectTo:getRedirectPath(action.payload) , isAuth:true, ...action.payload}
    case ERROR_MSG:
      return {...state, isAuth:false, msg:action.msg}
    default:
      return state
  }
}

function registerSuccess(data) {
  return {type:REGISTER_SUCCESS,payload:data}
}

function errorMsg(msg) {
  return {msg, type:ERROR_MSG}
}

export function regisger({user, pwd, repeatpwd, type}) {
  if (!user || !pwd || !type) {
    return errorMsg('用户名密码必须输入')
  } else if (pwd !== repeatpwd) {
    return errorMsg('密码和确认密码不同')
  }
  return dispatch => {
    axios.post('/user/register', { user, pwd, type }).then(res => {
      if (res.status === 200 && res.data.code === 0) {
        dispatch(registerSuccess({user,pwd,type}))
      } else {
        dispatch(errorMsg(res.data.msg))
      }
    })
  }
}

dispatch到底在干嘛？

组件传值

Vue:父向子:子组件数据名="父组件数据名"
子向父@子组件传递的事件名="父组件定义的事件" this.$emit('子组件传递的事件名', 数据)
react: this.props.history.push('/register')你这个props里面存了什么？为什么一下有history函数一下又有this.props.msg这种字符串？

教程引入那么多插件每个插件里导入的函数是做什么的？
你告诉我这里用了这个插件的这个函数，但是他到底是干什么的？要解决什么问题？

Vue一些东西一句代码解释清楚了，react想写笔记不知道从哪里下手，一股强耦合的味道
我现在总感觉缺了什么东西，概念好像没搞清楚。有大神提点一下嘛？

Answer 1

建议跟着官方教程走，国内总结的教程说实在的，有时候上来就全家桶但是又不讲清楚各个都干嘛的是有些头疼。

比如里边的 redux 实际上并不是 react 独家的东西，它是个 JavaScript 状态容器，提供可预测化的状态管理，只是对 react 做了支持而已。

router、thunk之类的都是遇到一些场景问题了才需要引入的，刚开始学没必要上来就全齐活。

一句即可: npm install -g create-react-app

Answer 2

虽说已经选择了最佳答案，但是刚刚看到，也来回到一下，既是提供一点不同的观点，也是对我自己的一点总结。

首先，我是从react转到vue的，醉醉深切的观点就是，react比vue难，但是react比vue功能更强大，更好用。vue的局限性太大了，

解答一下楼主的疑问点：
1。状态管理，redux的状态管理其实比vue的状态管理更合理，更优雅，至于为什么我这么说，因为vuex的mutations居然对扩展运算符的state更新有严重的不兼容性或者说api设计上的bug。这会造成很多的不必要代码，并且vuex的type这个玩意真的很恶心。

2。关于dispatch其实在使用上和vue在感觉长差别不大，但是具体的差别你要查看下相应的api并自己去尝试。

3。学习建议：现在国内react使用最广泛的是支付宝，强烈建议学习支付宝的antd前端ui库，和ant-design-pro,非常好的一套框架。

Answer 3

我记得当初我刚开始学react的时候，感觉很熟悉，看了一个下午就可以写出一个todolist了，因为之前我学过一些vue，虽然也只是做了一些简单的demo，但是react的很多概念在vue中都有，所以我不觉得一个会vue的人会学不来react。
个人觉得，学习编程真的不能本末倒置，理论在前，实战在后，先别急着看react-router和redux这些东西，就像vue还没学好就直接上vue-router和vuex，这样能学好吗？
建议先从阮一峰的react教程开始看起，把这些基本概念搞懂。

Answer 4

可以去看react官网 react的api很少 也没什么指令乱七八糟的东西 纯js 数据控制视图 逻辑不放在视图里
至于插件基本也就redux router那几个 学习成本很低

Answer 5

初学的时候不要用redux。

---

曾经有人说过这样一句话。

"如果你不知道是否需要 Redux，那就是不需要它。"

Redux 的创造者 Dan Abramov 又补充了一句。

"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"

Answer 6

参考： https://github.com/allan2code...