00:00
上节课我们已经把P组件要使用redux所需要的一些文件给提前准备好了,比如我们的这个reducer,以及我们的这个action。哎,这一块我们继续完成我们案例,那我们先写什么案例呢?我们在初始化这个人的时候,是不是在这里,诶初始化了一个人的一个数据,对吧,我们先写第一步先把这个啊reducer里面存到这个人的这个数据给展示到这里。可以吧,好那。我们先来想一个问题啊,现在在写这个之前,先来看什么东西,看一看我们的这个person reducer,它到底执行没有执行,在这里我们来输出一下啊。Look。好,To组件的。Person组织啊,Personr。来,我们来看看他有没有输出来保存。情况下来刷新。是不是没有输出。
01:00
那我们去count组件去count的这个来看一看。来在这里,那这个肯定输出了对吧。来这个是。Can't?来保存。刷新啊。这个是不是执行了,那我们的这个P组件,它根本就没有执行的一个R,没有执行这个初始化的操作,明白吗?啊,这是一个问题啊。那接着我们来看一看啊,先把这个就删掉,大家现在已经啊,等会再删吧。那。说明什么?我们的person这个reducer它根本就没有执行,也没有完成这些初始化,也就是现在reducedu里面并没有来存,我们存储的就是我们初始化的这个person的这个数据,对吧?啊,我们想要取出来这个数据展示到这里,那必须得解决这个问题才可以清楚了吗?好来。接着我们看一下谁是在哪操作的,这里是不是在套这个文件操作的这里对吧,那。
02:04
死头这里呢?Count reducer是如何生效的?是我们在这里引入了,并且在暴露这个的时候,诶,把这个count reducer我们给它放到了这里,注册了进来。啊,也就是说我们在之前在说过,我们要暴露这个死套的时候,要为死涛去安排一些能为死操服务的一些reducer,是不是,而且是reduce很多,但这里我们只安排了一个,对不对啊,那所以说我们必须得在这里去做文章,去解决这个问题,我们要给他安排多个。只有我们把a personal reer在这里啊,在这个死套这里,也给它注射到死套中,那这个personal reducer它才能正常的初始化,清楚了吧?好,那在说这个问题之前,我们先来想一个前置的一个问题,也就是我们的这个redu,它里面到底存了什么东西啊?来画一个图看一看啊。这是我们的。Count组件,这是我们的po组件,然后。
03:01
这边是我们的这个,哎,我们的这个redu在这写上啊。嗯。来按照我们之前写的这个求和的这个例子。这个count组件是不是存了,哎,初始化的一个数据,初始化的一个零到这个里面了。来零。好,那我们把这个线也换一换,换这个颜色啊,然后它使用的时候也是从这个里面去取出来,这个状态去使用,是这样的吧,对不对啊,但是现在我们来想一想,我们这个person组件,它也要用这个redu,那它往这里面去存什么,它要存它的这个对象啊,存的对象。要存啊这个东西什么内膜。然后是这个,呃,随便写吧,啊Tom比如说它A级12啊11他要去存这个是不是,而且它不仅存,它也要从里面去取出来,这个去用,是这样的吧,那我们现在只是两个组件,如果还有其他组件呢?哎,比如说第三个组件,第四个组件,哎有人想要存这个。
04:05
哎,存这个什么,存这个字符串啊,存字符串。然后还有人想要存什么,还有人想要存这个数组。好,大家都在往这个里面去存。想想他存了这么一堆乱糟糟的数据,大家不感觉乱吗?怎么取出来,我怎么知道我拿的就是这个count,万一我这个count组件我拿拿拿到了数组呢?拿到了这个群呢?对吧,那我怎么能保证我的人这个组件,我拿到的就是哎这个对象,而不是说拿到了一个字符串,或者拿到了这个零对不对,所以说redux他要去管理这么一大堆,哎,所有的这个组件的一个数据,那我们肯定得对这个数据的格式。来进行一个调整。啊,各存各的肯定不行,那谁也找不到谁的,对不对,那么想想如何去有效的去组织这些数据呢?是不是可以呃,借助于这个数组,那数组里面我们去,哎,你第一个元素你存零,第二个你你存你的这个对象,哎,第三个什么你存你的字符串是吧,然后第四个什么什么你其他的组件你存你的这个,哎,你存你的数组啊什么的,对不对,但是数组有个问题啊。
05:12
数组我们怎么才能取到这个值,只能通过它的索引,好,这个索引是零,这个索引是一,这个索引是二,我们还得数啊,你去取零的,你去取一的,如果我们的组件比较多,有100个啊,或者说100多个,你一直数下去吗?对吧,万一数组之间的这个顺序再发生了改变,是不是就乱套了,所以说数组不合适就pass掉了,对吧,那我们来想一想什么比较合适。这对象比较合适,如果我们直接把一个哎,一个整个对象存到了re中,而这个对象呢,对象我们又可以使用KY6的形式去对每个组件要使用数据做个区分,比如说你第一个组件,你是不是要啊存这个零,那我我给你取个名字,你是count,你存你的零可不可以,那比如我们第二个组件,我们的P组件,它要存什么,它要存一个数组,数组里面在包裹这个对象,对吧,那好,我给你再来一个persons啊,Persons一个啊这样的一个K,然后你Y6就是一个数组,数组里面就是你一个一个的人的一个对象。
06:06
哎,是不是万一你还有其他的组件,比如说你的啊,有这个什么,那么呃,其他的啊A组件啊,你要存什么字符串,你就存字符串。是不是这样可以,也就是说我们最终要把这样的一个对象形式的一个数据去存到re里面,这样才能让啊各个组件都能使用到这个re,而且不会去乱,哎,比如说他想要count就去拿count,他想要这个人就拿这个人,明白了吗?啊。也就是说我们要对这个re里面存储的这个数据进行一个调整,之前存的是零,那肯定不行,因为他自己用的时候,你存零就无所谓了嘛,你自己去拿就可以了啊,Get去获取可以,但是现在有多个组件要用,我们就势必要对这个数据进行一个啊KY6的一个重组。清楚了吧,这个思路明白没有,明白了这个之后啊。我们再回过头来看。我们刚才所提出的这个问题,也就是说。这个person的这个reducer,他想要生效,想要那正常的说法正常执行,我们必须得在死道里面给他,给他对注册进来,哎,那按照大家的这个想法,我来引入一个person的这个。
07:09
是不是来person?Reducer啊,也是从这个从这个person里面去引入啊。啊,引入之后怎么放呢?你看看他现在已经占了一个countt reduce了,我怎么放,是不是在在第二个位置放好是这么想,没有问题,我们来刷新看看有没有问题啊好来直接看。是不是报错了啊?他说我们不能这么去传参数,它是不被支持的啊,不被支持的。好,那我直接给大家说结果吧,我们不能这么去传,这是我们想当然,我们想的要这么去做,哎,这时候我们得借助于一个一个东西,从这个。Re,里面来借助一个东西,借助什么东西呢?这个东西就是哎,Comba reducer,大家看这个名字,Comba,它它是不是有合并的意思,那后面是reducer是多个的,Reducer是不是这个单词意思合并reducer对吧?来想一想,我们是要合并谁,是不是要合并这个count和person这个reducer对不对,也就是说。
08:13
刚才我们这种方式行不通,那这里所以要要传一个or radior就传一个,呃,所有的这个radio。CCS啊or reduce,但是这个all,这个所有的这个reduce从哪里来?是不是在使用我们请出的这个工具去进行一个合并的一个操作,对吧。对不对,它是一个函数啊,它是一个函数,所以我们要执行才可以,好,接下来就是很关键的函数里面我们写什么。这个里面我给大家说写什么啊,你按照我们想当然你再传两个参数过去,我给你说还是会直接报错的啊,这样显然是不行的,这里面写的是一个对象,清楚了吧,这里面写的是一个对象。明白了没有啊,这个对象是什么?这个对象就是我们刚才给大家画的那个图,那个re里面存的那个总对象啊。
09:11
还在这个位置画啊,在这个位置画。这个对象就是我们这个里面存的,这个总对象存的。哎,就是刚才我画的那个对象。哎,比如说我们的count啊零,比如说我们的这个persons是一个数组,对吧?啊在这的省略了这个。是我们中存的这么一个对象,因为刚才说了多个组件,你要用我们大中存的,你必须得把它变成一个对象,对不对,所以说。啊,我们这里。来把这个先关掉啊,我们这里啊。使用这个合并reduce,这里传的这个参数,就是我们大这种存在那个总对象,这个一定要理解啊,大家写一写啊。就是reduce。
10:01
啊,不是。哎,存的总总对象明白了没有,这个一定要理解透了,因为这个理解不了,后面都没法写了。好。把这个参数写上啊,这个参数就是re存的总对象,那既然存的是一个总对象,我们也说了,我们的这个总对象,它是一个K86的一个形式,所以说那这里我们应该。怎么写?是不是写K写count对吧,Count是谁就是我们的。Count reducer清楚了吧?好,那全是count的话不分啊,这里名字我先给大家。先随便写到后面,我再再来整理啊,接着我们不仅要存这个啊,能求和的这个reduce,还要存这个人的一个主是不是?那我就这里写个人S然变量,等会我们单独抽一节整体一画啊,因为这个这么写的话,方便大家去区分好人。要使用哪个radior,是不是使用这个人他自己的这个radior。
11:02
对不对,是不是这样的。好。之后哎,我们把它给传到这里面就可以了,那我们这步操作是干什么,是不是在汇总。所有的。来,我们来看一看能不能正常的执行啊。来刷新。啊,先不用管那个报错,我们就先看这里输出没有count reducer person reducer,那这时候我们的这个person reducer,它是能能正常的去输出化了,清楚了吧。啊,先不用管报错,你先看这里有没有输出,有哎,Cant re正常,Port正常,那说明我们的这个。这个这个套处理了没问题对吧,接下来我们再看看报错,他报的什么错来,他说了object对象它不能,哎作为一个react一个节点,这个错大家熟悉了吧,之前给大家讲过,那这个时候只会发生什么情况,是我们把一个对象放到了这个react的这个这个。
12:00
呃,当中对吧,让它不,它不能作为这个react的一个节点。好。而且。这个问题是怎么产生的?是不是因为我们把这个react它的不是中存的这个数据给改变了,原来只是存了一个零,现在我们改成对象了,那我们是不是使用这个零的这个地方是不是就就得去做一个调整来找一找,看哪个地方使用的零是不是我们的。看。Index这里面。看到了吧,是不是在这里面使用的这个this purpose count,对吧,它是一个对象,也这里是这里报的错,你不能把一个对象给放到。这个节点中是这样的吧,而且我们先不用关注这个UI组件,因为UI组件它只是去获取真正传数据给UI组件的是谁,是不是我们这里容器组件,你看容器组件我们第一个参数是不是把这个数据哎,传给了这个UI组件对不对?那问题出现在哪?出现在我们传数据这里来,注意我们之前说过,这个state是谁?State是redu中保存的总状态,那state是谁是一个对象啊?
13:08
对吧,在原来它是一个哎数字一个零,我们把这个零直接给到这个UI组件上去就没问题,但是现在我们state变成了一个对象,也就是说它是对象,你把对象给到抗的这个变量你。UI组件里面,你才直接去渲染这个count,直接去使用这个count,那肯定是要出事情的,对吧。我们不动UI组件,它该怎么使用,怎么使用我们。改一改这个传的这个值就可以了,既然state它是一个对象啊,存了很多这个中的一个状态,哎,还有人的,还有count的,那我这里只是要count,我是不是拿到count就可以了,对不对啊,点什么点和啊,为什么点和,因为我们在这个点JS里面,我们去定义这个瑞大中,哎,所有的这个总对象的时候,就是用的这个和,明白了吗?这也是为什么我用变量给大家区分开。清楚了吧,我们在键是定义了啊redu中它要存的这个总对象的这么一个格式,一个键一个值,那我们在用的时候,你这边定义的什么键,那这边我们用的时候你就要用什么键来取。
14:11
这点不要乱清楚了吧,那取到这个和之后我们来再看看来刷新是不是就没问题了,你正常的加减都没问题,是这样的啊那。接下来。这些问题都解决了,Person组件也能,你看person的这个reducer也能正常渲染了,是不是,是不是该我们从里面去取出来初始化的person的数据,然后展示到这里就可以了,是吧?啊,把这个。刚才拖动一下啊,来接着我们给这个portion组件开始写啊,现在看看这个portion组件。哎的,这个组件现在还只是很单纯的一个。普通的组件对吧,那我们想要操作这个。再来看看这个图,必须得借助谁容器组件去和进行交互,对吧?现在我们只是有了一个简单的人的一个UI组件,还没有容器组件的,我们是现在创建人的容器组件才可以对吧?啊,那我们之前也整合文件,我们在这个文件里面去继续去创建人的容器组件就可以了。
15:11
看到了吧,啊,那这里我们就先不暴露这个UI组件了,因为我们要在这里去来创建这个。人的啊。容器组件,好,这里给大家注释一下,这里只是这个percent UI组件,Percent UI组件清楚了吧,那接下来就开始写我们的这个代码,怎么创造这个容器组件,是不是要借助于react那个,那这里你既然要用到,你就要引入import。诶,我们直接写出来啊,把这个。Connect。好。从哪里面去导入?从这个。React-redu里面,哎,写错了啊,React杠里面去请出来这个connect,因为我们创造这个容器组件需要借助于这个connect啊,Connect括号括号先把这两个给写上,因为它的执行结果是一个函数嘛,这里面我们要传入我们的这个UI组件,是不是就是传入我们的这个person UI组件,然后是connect的它的两个参数,还记得两个参数吗?回想一下第一个参数是不是传的这个总的这个。
16:31
X中的stay是不是也就是第一个参数对吧,那第二个参数,哎,我们在这写。是不是操作。Relax方法对吧,操作的方法吧啊。好,我们先来把第一个参数给传上。那第一个。Redux中的state。STATE。它是一个什么,对吧,它第一个参数它是一个函数啊,对吧,然后函数的这个返回的这个结果。
17:06
是给到我们的UI组件,让我们UI组件去用,对不对,而且这个state是我们大总的总的这个state嘛,啊,它是一个对象,好,那这个就是我们要return的一个内容,因为我们要一个对象,所以这里先用括号包起来的是谁,呃,我们的这个。啊,一堆一堆人吧,好,这一堆人从哪里面去拿,是不是从redux中去拿,那这个就是redu中总的这个状态,那我们是不是state。第二。点谁?是我们star中存的啊,总的它还有count,还有还有这个人的对吧,那看看我们,哎,这个里面定义的什么定义的是不是人死对不对。它是成了我们的所有的人这么一个键,对吧,那我就C点人诶。也就是说我从这个总的大中存在这个状态中获取到,哎,这个人这个键啊,我们这里定义的吗?获取到之后呢,这个就是我们人的这个数组,存在大众这个人的数组,我把这个数值给到了谁给到了一堆人给到这个变量,那最终是这个变量啊,就是它会通过purpose传给这个UI自主量,那所以我们这里就可以去循环去迭代这个一堆人,那就这里就不写这个了,对不对啊,我们来写一下啊。
18:16
嗯。为了方便的话,我在这上面要不要先展开一下啊,啊,不展开也行,直接循环吧,来我们直接在这。那这意思第二。Purpose点谁点一堆人,这个是不是我们传过来的这一堆人对吧,那点map我来遍利他。嗯,Person读笔记,哎,这是一个人的一个数据。然后。Return。复制一个啊,复制一个我们的结构。然后这个姓名就替换成这个POBG。
19:04
这里面的谁叫name?然后A就是我们的。Po OBg.AG注意还要有一个K啊,要不然它会报错K就是我们po.obbg.ad就可以了啊好,那这个就不要了。看到吧,哎,我们从这个大中纯的。所有的人去拿到这个re中存到所有的人之后给到啊这个这个K,这个K呢,它会作为这个purpose传给这个他的UI组件,那UI组件里面我们去,呃,便利这个人对吧,然后去循环他的这个名字和年龄,接下来看一看啊。先看看能不能展示出来。嗯,我们的这个没有暴露啊,就是人的这个reducer。找一下在这儿。R。啊,不是reducer,是我们的人的这个容器组件啊,容器组件那最后我们得得暴露才可以啊,Exportt啊,Default得把它给暴露出去才可以啊,我们只是创建了这个人的容器组件,还没有给它暴露出去,所以外面用不了啊来记得保存一下再看看。
20:20
好,有了这个是不是我们一开始初始化的这条数据,对不对,看到了吧啊。啊,那我们把这个注释先都删掉啊,因为没有用了,我们能确定他这个这个reducer是肯定可以去注册的了,这个人的这个也删掉啊,这个里面这个count这个。这个也删掉吧,好,来整个全部关一下,现在写的有点多了,我把它折叠一下,因为写的一多大家就容易乱。现在我们的人他已经能从rena里面去取出来这个数据了,对吧,接下来我们玩干什么要。就是说添加人之后,要把这个数据我们要给传到,哎,存到这个中,对吧?来接着来找一找。
21:03
找到我们的人的这个容器组件,那也是这里我们就不conl了,要哎存入这个re是不是。哎,纯属大。我们现在在写的是什么?嗯,在写的是UI组件,来看一下这个图,UI组件你有办法能去操作,大不能。只有容器组件才能去操作Rex。对吧,但是我们的容器组件可以为UI组件提供操作的方法,是这样的吧,好。那我们如果想要在这个UI组件里面去操作这个redu,那必须得让我们的容器组件,哎,它的第二个方法就是操作redu的方法来给我们提供过来,是不是这样的好。哎,它是一个最后我们优化后的一个简写的方式,是不是一个对象就可以,哎,我们把这个给写上啊。来一个对象就可以啊,那这个对象啊K是什么呢?比如说是加乙人,哎,添加一人,好,这个是不是我们在写这个人的一个action啊,想想那个count那个那之前的例子对吧,我们要在这里写上这个人的,来添加人的这个。
22:18
哎,Person的这个IP。对吧。这样才可以啊,那我们要使用这个人的这个action。是不是就来引入才可以好来我们在上面去引入这个人的action,我把它先折叠了啊。Input。Input,谁呢?嗯,往下找啊。Action。因为这样找的话,他自己就帮我们引入了那人的这个action,引入之后注意它是什么,它是一个方法对吧,他要接受一个person OB,接受一个人的一个参数,哎,最终他能,嗯,这个X呢,哎,它就能。就是说这个第二个参数,诶,它就能帮我们自动去dispa,然后把这个action派发给这个啊,Stop stop,它就能去交给对应的reducer去执行,对吧。
23:05
来这里面写上之后啊。嗯,还是一样的,虽然就是他。它这里是接收一个参数对吧,那我们这里呢,其实就省略了不写,为什么呢?因为我们最终这个操作状态的方法要传给谁,传给UI组件。对不对,UI组件里面可以去执行这个函数的时候,再去传入这个参数啊,和我们的count的这个例子是一样的,来回想一下看,我们找找我们的count。Count啊在这呢来是不是,只不过count我们传的方法比较多,因为它有加减,还有异步啊啊那我们的啊这个呢,人呢,它就只有一个,哎只有一个是哎添加一个人对吧,他只有添加一个人,它不像上面的这这么多啊,所以我们这里人这里我们就传了一个,哎,Create person action。接着。我们。这个啊。这个参数它是传给了UI组件操作状态方法啊,那真正是传到这个UI组件的这个purpose,它接收到的这个K是谁呢?是他听懂了吧?啊来,我们在这里去调用this.purpose点这个方法之后把谁这个person org传过去。
24:13
那么因为这个方法呢,你看它里面,它要接受一个,这里面接受一个这个person的一个OB。好,我们来试一试啊。来刷新现在是初始化状态,哎,现在只有一个人,现在我再添一个啊,小明好,年龄12,哎,是不是小明年龄12就到了这个上面对不对,那我们的这个就完成了,对吧,而且让这个P组件也使用到redux,诶来给大家看一下现在的一个情况,那我这里先加加几个啊。看一下现在的我们re中的一个情况啊。这是我们的count组件。这是我们的。P组件。那这个是我们的这个redux对不对,现在。哎,他往里面去存了数据,并且也取了数据去显示,显示到这里了是不是。
25:02
好,那我就这样写吧,而且我们P组件也是往里面存的数据,也去使用的数据显示到这里是这样的吧,啊,虽然。这个里面存的呢,就是一个,哎,总的一个对象,我们通过不同的。这个K来取的,哎,它有一个count,比如说现在呢,我们看到是八,然而而且呢,它还有一个啊person啊,应该是人人啊,然后是一个数组对吧,而上面也不是count的,上面我们存的是谁是和是吧?啊和对不对,是这样的一个形式,但是。如果是这样的话,就没有任何意义了啊,你你的组件数据你存到这儿,你拿去用,你的组件数据你拿到这,你你你再再去取来用。没有就没有必要了,你完全状态你放自己自身主件也可以了,对吧?啊,所以这不是我们想要练习效果,我们想要练练习真正的的一个共享,也就是说哎,我这个人的这个数据,我这个组件也能用啊,这个组件也能用。
26:01
哎,这个人的数据这个组件能用,我想在这写一个,比如说哎,人的总数为人的总数是哎多少多少对吧,那我想在这个person组件后面再写一个什么呢?啊,求和的结果式,求和的结果式好这样的话。就做到了啊,你count组件里面的数据,哎,我也能用,我这个person组件里面的数据你也能用,我们才达到真正数据共享的目的,其实最终也是为了解决,就是说啊,不同的组件之间就是说。他们之间通讯的一个问题,对不对,那我们接下来写一写啊。就是一下刚才我画的这个例子啊。好。来看一看,这个是。这个是人的是吧。人这里用的H3,我说看着这个有点小呢,这个我也给他调一下H3啊行。嗯,接下来我们来先来一个一个的写啊,先把这个都关了啊,再给大家重新去找。一个一个来啊,那我想要在这个计算结果后面去写上一个,哎,人的总数,我先找到这个count的这个组件来,在这个容器组件里面找到count,先把这个字写上,比如说计算结果是它。
27:13
啊,然后。那我再来。给个逗号把空格逗号,哎,人。的总人数是,总人数是。回去换下号啊。不然太长了啊。总人数是。好,这个是多少,不知道,先写这啊。我们想想哪里面存了所有的人是不是redu,对吧?而且看我们的这个求和的这个方法里面,在这里我们是不是已经得到了redu中存的所有的这个数据,对吧?你既然能从redux里面你取出来和,那你为什么不能从re里面取出来这个人数呢?啊。对吧,哎,是state。
28:00
点谁点是不是人is啊,人S是我们存的它这里面的东西。对不对啊,好。那这个是谁?这个是个数组啊,那它是个数组,那你真的想要得到它的这个数量的话,是不是还得点Le才可以啊,点Les啊,点length,那这个时候我们就哎,Redu里面的这个人的这个数量,我们就给到了这个变量,那这里是不是就可以直接显示了,那this啊,Purpose啊,人数。这样的吧,啊,先不用管变量,我们后面有小节单独去优化这个变量。看到了吧,来。保存先看一看啊,是不是总人数是二已经有了啊,来我重新刷新,重新刷新只有一个对不对,来加一个A,加一个幺幺,是不是变成了二对吧,那这个就处理好了,接着我们来处理这个啊,就是让这个人这个就是说P这个组件去显示这个计算的结果来。同样的一样的想法啊,我们先找到pon组件,你要先把字给它加上吧,是不是这样的啊,Pon组件那直接在这写吧啊,求和结果是,哎,这里不知道写什么,还先空下啊。
29:08
还是一样的啊,你想想这里我们已经拿到了redux中存的所有的这个数据,对吧,我们既然能把这个人给取出来,你自然的也能把这个和给取出来,猜测第二。哎和是不是,那我就直接这里。This,这purpose这和啊,最终我们会把这个啊给到它的子组件嘛,给到这个UI组件。来这时候我们来看一看啊,好刷新。嗯,先去加啊,加加加加加,你看这里是不是也在变,这里也在变,哎,然后我们来加几个人AA11。哎,两个人再加再加再加是不是这是五,这样我们就完成了数据的一个共享,也就是让啊。不同的组件之间啊,或者说兄弟组件之间进行数据的一个交互,借助的就是redux啊,这也是我们为什么要使用这个redu,它可以集中式的去管理我们的一个状态。
30:04
大家一定要注意的一点就是,哎,我们在创建这个容器组件的时候,第一个参数,第一个参数就是我们redux里面所保存的所有的这个整个的一个状态,只不过后来随着数据量越来越多,我们把原先的简单的那个状态,就是一个零的那个状态,我们给它变成了一个对象,哎,然后存的就是比较多了一些,但是我们用什么去取什么就可以了,而我们定义这个redux中它存储的数据的这个结构呢,是在。套里面在这里定义了它的这个结构,就是说你要哎存。的K是什么啊?要使用的这个reducer是什么?你要存的这个K是什么?使用的reducer是什么?哎,只有这样我们才能让re里面去存更多的数据啊。才能更好的让各个组件去使用这个re,好的,那这一小节先到这里啊,关于这个变量问题,我们单独抽出一节去进行优化,那这么写只是说为了让大家更好的嗯去理解啊。
我来说两句