学习react ,react router,react redux的合适顺序是什么?

菜菜333
  • 190

学习react ,react router,react redux的顺序是什么?怎么学比较好接受这种思想呢

回复
阅读 10.8k
19 个回答

由浅入深的学习 React。其实思想和基本原理懂了,Redux,React-Redux,React-Router 都只是你的辅助工具而已。给你推荐我的《React.js 小书》,里面对于这三个都有涉及。也许你看完了就有了基本思路。http://huziketang.com/books/r...《React.js 小书》

第一个阶段
Lesson 1 - React.js 简介
Lesson 2 - 前端组件化(一):从一个简单的例子讲起
Lesson 3 - 前端组件化(二):优化 DOM 操作
Lesson 4 - 前端组件化(三):抽象出公共组件类
Lesson 5 - React.js 基本环境安装
Lesson 6 - 使用 JSX 描述 UI 信息
Lesson 7 - 组件的 render 方法
Lesson 8 - 组件的组合、嵌套和组件树
Lesson 9 - 事件监听
Lesson 10 - 组件的 state 和 setState
Lesson 11 - 配置组件的 props
Lesson 12 - state vs props
Lesson 13 - 渲染列表数据
Lesson 14 - 实战分析:评论功能(一)
Lesson 15 - 实战分析:评论功能(二)
Lesson 16 - 实战分析:评论功能(三)

第二个阶段
Lesson 17 - 前端应用状态管理 —— 状态提升
Lesson 18 - 挂载阶段的组件生命周期(一)
Lesson 19 - 挂载阶段的组件生命周期(二)
Lesson 20 - 更新阶段的组件生命周期
Lesson 21 - ref 和 React.js 中的 DOM 操作
Lesson 22 - props.children 和容器类组件
Lesson 23 - dangerouslySetHTML 和 style 属性
Lesson 24 - PropTypes 和组件参数验证
Lesson 25 - 实战分析:评论功能(四)
Lesson 26 - 实战分析:评论功能(五)
Lesson 27 - 实战分析:评论功能(六)

第三个阶段
Lesson 28 - 高阶组件(Higher-Order Components)
Lesson 29 - React.js 的 context
Lesson 30 - 动手实现 Redux(一):优雅地修改共享状态
Lesson 31 - 动手实现 Redux(二):抽离 store 和监控数据变化
Lesson 32 - 动手实现 Redux(三):纯函数(Pure Function)简介
Lesson 33 - 动手实现 Redux(四):共享结构的对象提高性能
Lesson 34 - 动手实现 Redux(五):不要问为什么的 reducer
Lesson 35 - 动手实现 Redux(六):Redux 总结
Lesson 36 - 动手实现 React-redux(一):初始化工程
Lesson 37 - 动手实现 React-redux(二):结合 context 和 store
Lesson 38 - 动手实现 React-redux(三):connect 和 mapStateToProps
Lesson 39 - 动手实现 React-redux(四):mapDispatchToProps
Lesson 40 - 动手实现 React-redux(五):Provider
Lesson 41 - 动手实现 React-redux(六):React-redux 总结
Lesson 42 - 使用真正的 Redux 和 React-redux
Lesson 43 - Smart 组件 vs Dumb 组件
Lesson 44 - 实战分析:评论功能(七)
Lesson 45 - 实战分析:评论功能(八)
Lesson 46 - 实战分析:评论功能(九)

一个个学很浪费时间,而且最后会发现上手一个项目还是很难。
我学react、redux、router的时候,根本就没有多少时间自学这些理论,在我看react文档的第三天,我就被老大要求开始用redux架构了,然后花了2个月用这套react技术栈把前端赶出来了,少年啊,叫个人逼着你直接上手一个项目,绝对很快就能学会了。

你可以看下这个链接,讲的比较详细!
链接描述

React是整个React项目的核心基础,Router是路由相关,而Redux是非常常用的状态管理组件,不过随着新的React版本推出,Hooks能够完成绝大多数项目中对于状态管理所需要的操作,而且步骤很少,所以全剧状态管理在未来项目中,未必是必须的,所以按照React->Router->Redux来学习是没有问题的。
此外,也把你的问题回答的全面一点,这些点是我自己做React项目中循序渐进,觉得都会使用到的技术,重要性按照顺序大致递减:

  1. HTML,CSS,JS基础
  2. React基础知识(包括react-dom,react-router-dom等)
  3. NPM, YARN等包管理工具
  4. 状态管理及钩子:Redux, Mobx, Hooks
  5. 表单开发:Formik, AntD Form
  6. API: Fetch, Axios, GraphQL
  7. UI框架:AntD等

这些知识能够基本上帮助你开发一个Web端的React应用了,当然,在应对具体需求时,你还会学习到更多细碎的知识和组件,光学习理论学习起来是枯燥和低效的,在项目中学习,带着目标学习,会事半功倍,有问题欢迎互相讨论~

就按你排的顺序就行,他们的名字也表明了这种依赖顺序,把redux加进去放在第三位。

动手练,几个小时就熟练了。核心思想就是单向数据流,拿着个检验是不是接受好了。

我的顺序是react,react-router,redux
react是基础,官网的例子走一遍就可以了
react-router是辅助与react,所以要在react之后,github上有比较多的例子 你可以搜react-router-tutorial,我当时看的就只这个例子
最后学redux 这个是架构层面的,所以要对reactyou比较好的掌握之后再学更容易着手

学习react的话理解有限状态机思想,所有的dom的改变都是由状态的改变而改变的。

react-router的话并不难可以说学习曲线很平滑的,react理解的差不多的话,react-router就可以当成一个组件来理解了。

redux的学习曲线比较陡,建议就是在github上找一个浅显的demo,重写一遍就理解的差不多了。还可以参考http://cn.redux.js.org/docs/a...

redux学的差不多了的话,那么就应该要学一点Immutable来提升react的性能了。

我是按这个顺序学的
1) react

2) react + redux

3) react + react-router

4) react + react-router + redux

这些在 github 都有现成的例子

dingxinglrj
  • 3
新手上路,请多包涵

先学react,react router,react redux

没有什么先学不先学的,你觉得需要就学。
React不用说了,构建UI界面。
Router就是模拟路由的,访问网页时www.xxx/xx/xxx这种,本来是后端的,放到前端来。
Redux就是存放state的,你的项目state结构很复杂就用,简单的就不用。

一起学啊,分开学更难接受这种思想。看文档,看demo,试着做demo,再看文档,然后尝试做个项目,慢慢磨

先模仿,后操作,学习别人做的项目和库,多看代码,才能多写,推荐一个不错的React组件和库的资源列表学习:

https://reactjsexample.com

先路由啊,肯定

宣传栏