react入门

Posted 2020-09-21 桃之夭夭丶

react入门

react

入门

前端

用vue做了一些项目后，有一些疑惑的地方。学习下react对比一下，加深自己对前端框架的了解。学习的时候发现
大多网上的教程都不是最新的，例如：react router v4的react-router-dom。所以最好还是到官网上面去看，英文虽然有的看不懂，但是看懂示例代码就行了。react作为目前端最火热的框架，理应学习和掌握。

react技术栈预览

推荐看下阮一峰的React 技术栈系列教程，有的写的比较老，可以大致过下概念，有个大致了解，然后去官网看具体写法

1. react

react官网
gitbook-react gitbook入门

2. react-router,路由

react-router gitbook(老)
react-router(新)

3. Redux状态管理

redux中文文档
Redux是一个javascript app的可预测state容器。
如果你觉得需要Flux或者相似的解决方案，你应该了解一下redux，并学习Dan Abramov的redux入门指南，来强化你的开发技能。
Rudux发展了Flux的思想，同时降低了其复杂度。

4. Flux

阮一峰Flux 架构入门教程
Flux gitbook
Flux 是一种应用架构，或者说是一种思想，它跟 React 本身没什么关系，它可以用在 React 上，也可以用在别的框架上。]前面说到 Flux 在 React 中主要用来统一管理引起 state 变化的情况。Flux 维护着一个或者多个叫做 Store 的变量，就像 MVC 里面的 Model，里面存放着应用用到的所有数据，当一个事件触发时 ，Flux 对事件进行处理，对 Store 进行更新，当 Store 发生变化时，通常是由应用的根组件（也叫 controller view）去获取最新的 store，然后更新 state，之后利用 React 单向数据流的特点一层层将新的 state 向下传递实现 view 的更新。这里的 controller view 可以有多个也可以不是根组件，但是这样数据流维护起来就比较麻烦。

Flux 的思维模型如下：
Flux 主要包括四个部分， Dispatcher 、 Store 、 View 、 Action ，其中 Dispatcher 是 Flux 的核心枢纽，它相当于是一个事件分发器，将那些分散在各个组件里面的逻辑代码收集起来，统一在 Dispatcher 中进行处理。完整的 Flux 处理流程是这样的：用户通过与 view 交互或者外部产生一个 Action，Dispatcher 接收到 Action 并执行那些已经注册的回调，向所有 Store 分发 Action。通过注册的回调，Store 响应那些与他们所保存的状态有关的 Action。然后 Store 会触发一个 change 事件，来提醒 controller-views 数据已经发生了改变。Controller-views 监听这些事件并重新从 Store 中获取数据。这些 controller-views 调用他们自己的 setState() 方法，重新渲染自身以及组件树上的所有后代组件。使用 Flux 有个好处就是我只需要用 action 对象向 Dispatcher 描述当前的事件就可以执行对应的逻辑，因为 Dispatcher 是所有 Action 的处理中心，即使没有对应的事件发生，我们也可以“伪造”一个出来，非常利于测试。

Reacr实战

准备用react做一个js全家桶，把以前写过的js插件或者好用的“轮子”，给收集起来，最好还是能动态的添加和修改

我的GitHub地址：https://github.com/hwlv/reactdemo，明天续更