0%

React(三)

React本身是特别简单的,因为它最初的目的就是搭建用户界面,对于复杂的应用来说,就需要借助Redux之类的JavaScript库来帮忙管理应用。

什么是Redux?

Redux是一个JavaScript库,用来管理应用的状态,可以提供可预测化的状态管理。

什么时候需要Redux?

你的应用是否有以下的需求:

  1. 复杂的数据流动;
  2. 组件间有互动;
  3. 非继承的数据;
  4. 大量的操作;
  5. 同样的数据在多处使用。

如果有一项或一项以上,就可以考虑使用Redux。

Redux的核心要点

我们先不要管那些听上去就云里雾里的storeactionreducer,而是捋一捋一个应用的使用,这里就前一篇文章中新建的Todos为例:

当我们打开应用的时候,页面上得有一些东西,比如未完成的事项、新增todo的加号按钮等等,这个没问题吧,虽然我们不知道背后的原理,但是有一点是确定的:有一个东西在控制着要显示的东西,我们称之为老大哥。如果能听到计算机在说话的一定是这样的:呀,老大哥,有人来了,怎么办?老大哥说不要方,把未完成的todos显示到屏幕上,还有加号。
当然我们没有听到计算机说了什么,只是看到了屏幕上有一些东西。
然后我们想新建一个todo,怎么办?当然是先点击一下加号,这个没问题吧,虽然我们不知道背后的原理,但是有一点是确定的:我们点击了一下这个加号的动作被捕捉到了。如果能听到计算机在说话的一定是这样的:呀,这个兄弟点击了一下,点击的是加号,老大哥怎么办?老大哥说这是个送分题啊,交给老二去回答。老二:呀,我知道他点了这个加号,我是不是得做点啥?我猜他点这个加号他一定是想要新建一个todo,怎么办呢?怎么呢?不要慌,先把表单显示到屏幕上让他输入内容吧先,嗯,对,就这么办,老大哥我知道怎么了。
当然我们没有听到计算机说了什么,只是在点击加号按钮以后就出现了新建todo的表单。

[观众:你说的这是啥我为啥要关心这?]

虽然例子可能不是完全贴切,但这就是我们的storeactionreducer。应用的状态都由老大哥store控制,状态的改变需要发起一个动作action,描述动作该如何改变状态就需要老二即处理器reducer
这个基本上是大白话了,接下来用JavaScript语言来下定义:
store: 一个对象,它包含着应用的所有信息。
action: 一个对象,包含着动作的信息(至少要包含一个type属性,用来描述发生了什么事)。
reducer: 一个函数,确定针对特定的动作,状态要如何改变,这个函数必须有两个参数,当前的状态和动作,返回值只有一个就是变化后的状态。

[观众:为什么要这么做?]

为了让整个系统受监控,然后有条不紊运行,什么人什么时候唱仇恨歌的愤怒不到位就一清二楚了。

Redux的三个原则

Single source of truth 中央集权/真相只有一个/单一数据源

用一个对象来描述应用的状态,只要这个对象确定,应用的状态就确定了。

State is read-only 领红头文件/状态只读

那我想要钱怎么办?打个报告说莱茵河水又泛滥了,要钱修大坝。

Changes are made with pure functions 廉洁的财政部

你要钱我就给80%,你上税我就收。