1228-redux学习笔记(摘录) | WEB前端零基础课
今天的WEB零基础课的内容是Redux,它的思路比较“拧”,不怎么好理解,算是react里的一个难点。讲完之后,同学们纷纷表示没听懂,
这个东西只靠听,肯定是搞不懂的,还是要多写,通过多写去理解它的运行思路。
在我看来,redux的目的之一,就是把数据的传递从组件的层级上,剥离开。不使用redux时,组件的层级,其实是react数据的传递的通道。
要多写,否则没用。
<!-- 1228的redux学习笔记摘录 -->
redux [ri:'dʌks],是reactJs的状态管理。
它就是用来专门的管理react的数据传递的。
reactJs它就是dom的一个抽象层,它不是一个完整的webApp应用的解决方案。
它有二个方面没有处理:
1,代码结构的管理;
2,组件之间的通信;
redux,它出现的原因,我个人主观认为是第二个。
<!-- -->
如果你的UI层、页面交互很简单,没有很多层的页面,那用不着redux,
否则会增加不必要的复杂性;
如果没有,多用户之间的协作、跟服务器大量的交互,那用不着
redux的适用场景:多交互,多数据源
<!-- -->
Redux的设计思想比较简单:
1,web应用的就是一个状态机,视图与状态是一一对应;
2,所有的状态,保存在一个大对象里。它也是一个单独的东西,一般是单独的js文件。
<!-- Redux,它的基本的api: -->
所有的状态,保存在一个大对象里。
它叫做:Store,
<!-- 创建一个Store,createStore() -->
import {createStore} from 'redux';
<!-- 返回新生成的一个Store对象 -->
const store = createStore(fn);
// fn,就是 reducers,
<!-- 获取初始状态:getState() -->
Store对象,它里面保存着当前应用的所有状态。
它里面的状态,State,
调用 getState()
方法获取,
import {createStore} from 'redux'; //引入redux
const store = createStore(fn); //创建一个Store
let state = store.getState(); //获取它里面的状态
<!-- Action -->
Action,它是view(视图)发出的通知,表现State要发生变化。
Action,
它里面是一个对象,里面是属性和值,type属性是必须的,是名称,
let action = {
type : '名称,其实就是引用',
具体事情的名称: '要做什么事'
}
<!-- dispatch -->
dispatch,是store的方法。store.dispatch(),
import {createStore} from 'redux'; //引入redux
const store = createStore(fn); //创建一个Store
store.dispatch({
type : '名称,其实就是引用',
具体事情的名称: '要做什么事'
});
它接收一个action做为参数,发出Action
<!-- -->
Reducers [rɪ'dju:sə]
Reducers,它是一个“处理action要做的事情的地方”,
Reducers 收到state之后,要返回一个新的 state,
这个过程,叫做 Reducers [rɪ'dju:sə]
Reducers,是一个方法,接收二个参数:
1,action;2、当前的state
返回的是一个新的 state,
// 伪代码:
let defalutstate = 0;
let reducer = ( state = defalutstate, action ) => {
switch ( action.type ){
case 'add':
return state + action.addNum
case 'mins':
return 减法的内容
defalut:
return state
}
}
let state = reducer( 1,{
type : 'add',
addNum : 2
});
// 此伪代码的返回值,应该是3
返回的新的state,它的值是3
从这个伪代码可以看出,它的计算,脱离了父子组件的传递。
redux的目的之一,就是把数据的传递从组件的层级上,剥离开。
之前我们的写法,组件的层级,其实是react数据的传递的通道。
<!-- store.subscribe(libs) -->
它用来监听函数,一但state发生变化,就自动执行。
这是什么?观察者模式。
import {createStore} from 'redux'; //引入redux
const store = createStore(fn); //创建一个Store
...
..
.
store.subscribe( ReactDOM.render(...) );
重新渲染页面。
<!-- -->
Redux的工作流程:
1、发出action
<!-- store.dispatch(action) -->
2、store自动调用 reducers,并传入二个参数,
-当前state
-收到的action,
它会返回新的state
3、state一但发生变化,就自动 调用 store.subscribe(listen);
4、listen要通过 getState()得到更新之后的state,
调用render,重新渲染页面。
<!-- -->
reactJs,它的思路跟 jquery 完全不同。
redux,它的思路,跟reactJs,不说完全不同,相差也很大。
<!-- -->
redux,不是reactJs自带的。需要通过npm安装,
npm install redux -save
- mongodb数据结构与基本操作增删改查整理(二)
- 使用在线重定义重构亿级分区表(r10笔记第34天)
- 【Go 语言社区】一个WebSocket的简单Echo例子
- Java基础-day10-代码题-继承&抽象类
- 闪回区空间不足引发的SQL问题分析(r10笔记第32天)
- JavaScript Window - 浏览器对象模型
- 纯CSS实现的圆角折叠菜单特效代码
- MySQL和Oracle中的半连接测试总结(一)(r10笔记第31天)
- 【Go 语言社区】关于select和channel数组的配合使用--转
- Java基础-day09-代码题-对象;类;封装
- MySQL replace into的使用细则(r10笔记第48天)
- Win10下用Anaconda安装TensorFlow
- 【Go 语言社区】跨域问题解决方案:jsonP客户端和服务器代码
- 图;代码轻松理解,代理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- drf序列化器之反序列化的数据验证
- yum仅下载不安装---保留rpm包
- Java——数据库编程JDBC之JDBCTemplate的使用简化数据库操作步骤(含增删改查练习实例源码)
- Java——数据库编程JDBC之数据库连接池技术(C3P0与Druid,提供了Druid的工具类)
- MySQL数据库——多表查询之内连接查询、外连接查询、子查询
- MySQL数据库——表的约束(非空约束、唯一约束、主键约束、外键约束)
- 如何取消rxjs Observable的订阅
- 使用Angular rxjs打印鼠标点击事件的x坐标之和
- js变量提升 和函数提升
- JavaWeb——HTTP请求协议及request对象使用方法一点通与request登录实战案例(含BeanUtils类的使用)
- redis学习(二十一)
- Linux下查看文件和文件夹大小
- 使用Angular rxjs进行优雅限流
- Nginx自动重定向
- dotnet OpenXML SDK 形状的翻转与旋转