00:00
少女号,我们使用react的时候对这个容器组件的啊,第二个参数进行了优化。然后啊,我们把原来的这个参数名字都删了是吧,把它给补上吧,那第一个是。Map。State。Purpose是吧?啊,我们的第二个参数是map。Dispatch to purpose啊,我们把那个参数就是它原来的函数名字给它补上啊。啊,那上节课我们对这个第二个参数进行了一个优化,把它给简写成了对象的一个形式,这节课我们继续来看成优化看优化啊。把这些先都关了。看一下哪里呢,折叠一下。看看这里index键。之前我们在这里,哎引入了stop,然后使用stop的这个啊script去监听,哎,当这个red发生改变的时候,去重新渲染组件,对吧。
01:06
这个是我们之前啊,直接使用时候写的代码,那我们既然使用了reactdu,那这一块我们是不是也可以做一些优化呢?好,那怎么优化呢?首先哎,我把它给注释掉。那注死角之后,我们来看一看还能不能正常使用啊,保存一下。来,回过头来刷新一下。接下来我选数字点加加加,诶,大家会发现即使是没有这个监听也是好使的,对吧?那这是为什么?这是因为我们使用了react。啊,我们使用了react之后,我们是创建了一个容器组件,那创建了这个容器组件,它来和这个redu进行交互,清楚了吧,那。这个容器组件,它就会去监听redu中数据的一个变化。哎,它自动去监听,不用我们自己再去写了。
02:01
哎,这就是我们在这个里面,你看创建了这个容器组件嘛,那这个容器组件。他自己会去和这个嗯redu嗯对redu进行一个监监监听啊,然后他redu它发生改变的时候。诶,自己就会帮我们重新去渲染这个组件啊,渲染它的这个组件啊。啊,这是一点。好,这是一点啊。把那个那个注释掉啊。写一个注释吧,啊使用了。React之后。这里就。不要了吧,因为容器组件会自动监听。的变化。啊,这也是我们使用这个react的一个一个优势啊。
03:04
那这块也算一个优化是吧,也把这块优化了,就不用再写了嘛,那接着我们再来看一个什么东西呢。嗯。看一下啊。这个f.GS你看我们在这里。引入了。这个count啊,这个容器组件,然后在这里使用这个count容器组件,但是这个容器组件呢,它要和redu进行联系,那我们通过什么进行联系,通过这个套。哎,传入一个这个purpose啊,传入一个purpose这样建立联系的啊,容器组件它要和。UI组件进行联系,是直接传的参数,对吧,这个也说过很多次了,那要和。看下图啊,要和这个redux进行联系的话呢,那我们是把这个套呢,通过这个pops传给这个容器组件的,对不对啊。接下来我们来想象一个场景啊,因为现在的我们现在的页面比较简单,就这一个组件,假如我们的应用比较复杂啊,有这么。
04:01
几十个几百个这样的容器组件,你每一个都要传一个这个吗,是不是?大家自己看一看这个代码是不是比较麻烦啊,那有没有一种办法可以,诶让我们进行一个。优化就说不去每个都去传这个道,我们统一的在某个地方配置一下就可以了啊啊是有的啊啊我们这里先啊在这啊。来,我们来想一想,既然要想找一个地方去配置一下,就是说让这些组件。都不用再去传那个石头了,那么我们就必须得干什么,得往上一层去走那。app.gs它再往上一层上到了哪里呢?是不是就是上到了这里 inx.GS这里对不对好。那接下来我们只能在这个文件去想办法了,因为你再出了这个文件,你也没有其他地方可去了,是吧,这已经是比较顶层的一个文件了啊,那这个文件的话。我们怎么对他处理呢?这个时候可以引入一个东西啊来import。
05:02
结构复制。PROVI。啊,Provider。引入一个这个一个组件,那从谁身上引入呢?从这个react react上面引入一个provide啊这样一个组件,那这个组件什么意思呢?啊,它有这个提供者的意思啊,就是说。能。进行一个。啊,一些东西的一个提供啊,就大概这么个意思,大家去翻译一下也可以知道啊,那注意啊,我这边写的是大写是吧,大写呢说明它这个组件,这个组件怎么使用呢?我们让这个组件来包裹着这个APP组件。来,在这。哎,让他来。包裹着这个APP组件。啊。包裹之后啊,我们把这个磁套这个刚才啊注释掉的这个引入还打开,打开之后。
06:04
把这个作为它的一个属性传递给他就可以了。又因为per weather这个组件呢,它包裹了这个APP,那我们的APP又是我们最外层的这个组件,对不对,那所有APP里面的组件,也就是说这里面的,哎这些组件只要是需要死套的,它都会自动的去提供啊,这也是我们这个哎组件的名字的意思提供者吗?啊,我们把这个stop传给诶,它的这个purpose这样被它包裹的啊,这个所有的子组件,只要是需要stop,哎,只要是这些容器组件需要套的,它都会呃,由他来提供,它提供给容器组件,那这样的话,这个是不是不用写了。好,这里不用写了,那这里是不是也不用写了。我们看一下啊。刷新。选个二加加加是不是好使啊,异步执行也都好使,对吧?哎,那这个是我们对这个。
07:00
套如何传入这个套进能进行了一个优化,哎,主要是从这个react relax中去请出来这个provide啊,引出来这个provider这个组件,那这个组件呢,它有这个提供的意思,被它包裹的组件里面,只要需要用到这个store,也就是说只要是容器组件,哎,需要用到这个当就由他来提供,不用每个容器组件都写了,看到了吧?啊,而且我们的功能效果都是好使的。好的,那这一个是对呃,我们这个provider的一个使用,以及对这两块地方的一个优化啊,首先监听它会自己监听,我们不必再去自己写监听了,再一个我们可以通过直接使用provide传入这个啊,这个词套,让它所有的子组件啊,容器组件都啊需需要这个磁套的时候,由它来提供就可以了,不用每个都写好,这小节先到这里。
我来说两句