react+redux

一、相关概念

数据流是用户行为和响应的抽象

使用数据流帮助我们明确流行为对应的响应。

React和数据流

需要数据流做支撑。

主流数据流框架——Redux

简单\单一的状态树。

分享图片

Redux

分享图片

 

React

分享图片

 

安装:

npm install react-redux redux

https://redux.js.org/

https://cn.redux.js.org/

分享图片

二、项目

actions  用户行为

components 组件

container 组件

reducer store里负责分发action的行为

index.html

server.js

1、action

action是行为的抽象

分享图片

 

2、reducer

 根据action.type来决定怎么做。

分享图片

 

 3、store

store是所以数据和状态的存储。 state+Reducer。

分享图片

4、组件

分享图片

Redux知道container的存在,不知道component的存在。

 

 

redux-thunk

实现异步action

reux-gen

利用生成器,实现middleware

redux-router-redux

 

分享图片

Q1:function这种写法确实不错,但是写出来的组件生命周期怎么弄!A1:无状态组件都推荐使用function写组件。如果组件需要内部状态、声明周期,那就需要用class创建类组件。推荐用function和class创建组件。优先用function创建,需要生命周期和内部状态才用class创建。

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...