106_尚硅谷_React全栈项目_复习&总结

好，来，我们先来看一下我们昨天讲的东西。其实昨天我们讲的功能呢，并不多啊，主要前面讲了一些面试中常用的一些知识点。那第一个知识点呢，是关于4S的完整使用。啊。那我们最先用的只有用过一种用法，就是给这个传一什么。是不是传的对象啊？能听懂吧，而这个对象就是新的状态对象吗？这个理解不太准确。新的状态对象应该是拿这一个状态对象跟以前的状态对象进行什么。合并。产生的结果才是那个新的状态对象，听懂了吧？啊，也就是说，比如以前的状态对象里面有M有N2个属性。那我在新的方程对象里面呢，给N指定了一个新的值。

那我的M丢掉了吗？没有对不对，M还是以前的值吧。那说明啊，这个是做了一个什么呢，和最终是做了一个合并的处理。产生新的状态对象啊。但实际上，它最原始的使用方式。传的第一个参数是什么？函数，而我们用的对象的模式实际上是它的一个什么？简写方式对不对，而且这个函数。是我们掉的吗？不是吧，是它是一个回调函数，也是它自己调的对不对，那传什么参数由我来决定吗？不由我来决定吧，是不是他早已经定好了？那我们要做的是什么？是不是定义行参去接收啊？电脑吧。这个函数要有什么要求？

要定义成什么样子，或者说。这个函数必须返回一个对象。如果你键函数必须这么写吧，啊，那个对象就是我们以前简写的那个对象。听到了吧。而他接收什么？这不是我定的，我只是要知道他到底给我传什么，是不是？传什么呢？啊，传组件里面的两大类数据。一个是state。一个是什么？当然，你得知道我们新的啊。这些改变的数据是不是有可能跟原来的数据有关系？这能听懂不，有可能跟原来数据有关系，所以他把已有的数据是不是传给你，当然你想用就用，不想用拉倒是不是。这能听懂吗？那我们也就是说的有两种使用的方式，一种呢是传函数，一种传什么对象。

我们通过后面的学习应该知道他们。这种一般情况下是没什么区别的，但在特殊情况还是稍微有点小区别，是不是稍微会有一点小区别？那他的。他除了传第一个参数，是不是还有第二个参数可以传了。那第二个参数是一个什么。叫回调函数，它叫扩败，这个可传可不传是不是，那这个回调函数什么时候调用呢。文档里面说的很清楚啊，是在状态更新且界面更新之后，是不是才就诶他为什么设计这个语法呢。因为我们知道的有可能很有可能是个什么异步更新状态的，对不对，那就有一个事情了，我调用set指定新的状态数据之后，我下一步马上去取，一定能取到吗。

不一定能取到，是不是，是不是有可能取不到最新的值。那我就想保证我能取到最新的值，我该怎么做呢？OK，在这个回掉函数里面去取是不是就可以了？至于他设计这一系列东西的一个意义。他每一个语法的设计都是有用意的。如果你在学习语法的时候，最终能把它的意图搞清楚。那基本上你肯定不会忘记。即使你忘了，你很快能捡回来。就知识这个东西，技术这个东西吧，你学了一个知识，你过了一个月，甚至过了一周以后。你就给他丢掉。但是。啊，是不是我忘记了，就以后以前的学习就没有意义了不是。那就看你捡起来是快还是慢。如果你前面学透了，那你就拿起来很快。

对吧，那如果开始没有学太明白，那你再次看到的时候，那他相对说就是完全陌生的。那好了，那有这样两种，有一种函数的模式，有一种对象模式，那到底我们用哪一种方式去使用，去用来去更新状态呢？啊，我们有一个基本的判断的依据。如果新的状态不依赖于原来状态啊，用什么方式比较简洁对象方式？因为对象方式这个简写方式所说的简写就是编码上更简单一些，是不是。这能听懂吧？二。那如果新的状态依赖于原来状态，那最好，我就建议大家用函数的形式去写。这个没问题吧，没问题。啊。这个地方啊，大家如果去看的话，我把这个打开啊。

RA。这不是的首页吗？它其实下面就是些例子。下面就是例子，一个简单的组件以及有状态的组件怎么去更新，大家看看它的写法都是什么。函数的模式去写的，包括下面也有啊，下面也有，只要涉及到需要更新状态的，很多时候都是用函数去写的。能看到吧。因为这种方式啊，是比较严格的。是严谨的。嗯。当然，如果是一个纯新的数据，那你用对象也未尝不可啊。好，如果我们需要得到最新的数据，需要用破败，这是我们刚刚说过，好下面一个，这是面试中问的最多的一个。晒黑的到底是异物还是同步的？他有可能不直接问你。

他有可能出现面试题，昨天我们是不是做过面试题来着，就是看打印顺序，那个其实考察就是同步异步的问题。啊，甚至也包含了啊，像out。回答历练对面的一个问题。啊。那我们说三一定是一步的吗？不一定，有可能是一路，也可能是什么同步。那到底是一般同步，我们判断的依据是什么？其实非常的简单，我们要去总结规律是吧？啊，如果啊，这个地方100同步看什么，就看你调用这个方法的时候。是在哪个位置？是吧，是在哪个回调函数里面调呢，对不对，如果你是在X的相关的回调函数里面，那就什么。异义步的react有哪些轨迹函数？两大类生命周期钩子与生命周期毁掉，以及什么的事件监听毁掉对不对？

大家要知道的事线监听跟原生动物事件监听它是什么？两个两套系统。听懂了吧，是两套完全不一样，这完全不一样是说他们实现啊，是啊，RA生命事件处理是一道自己的实现，当然他们很多表象是不是差不多的。很多行为是不是有点很类似？啊，但也有区别啊，也有是有区别的。好，那除了在相关回调，那其他的回调呢。是在什么是同步的吧？那其他国家有哪些呢？下面有哪些？嗯，定时器回家，这是我们的比较多的是吧，再还有什么。原生事件经济毁掉吧。再一个。Promise回家。这能听到能听到啊，行啊，首先要知道这么一回事啊，下面还一个事情啊，就是关于义务。

它的一个多次调用的问题。我们的，嗯，它对于我们对象的模式和函数的模式，它是有些区别的吧。这里面其实就在于啊。是否合并的问题。就多次调用，它是做合并的处理，还不做合并的处理，听懂了吧？啊说白了，如果是对象的模式，我每次我我调两次都是在原理上加一，那13加二吗？没有没有。能听到吧，只加了一是不是，那如果我用函数模式，我加了一又加一了。这两次是不都起了效果，但是他会更新两次那个人的吗？不会，他只有执行一次什么的。但是啊，这个说过了，前提是我是异步的什么。

Seriously。听懂不是E的三类啊，这个要注意。美女们。没点儿。啊，这是这个，这个刚才我们说过，没什么说的，下面一个啊是关于component，这个也是面试中问的比较多的一个东西。嗯。那首先我们要说清楚他们相关的东西，首先要说清楚component存在的问题。有两大类问题，两种论观察的问题。第一个。啊。父组件，子组件。是吧，负组件里面是不是渲染子组件标签。那这个地方如果副组件重新扔的。就会导致于什么。子组件也会重新认的，对不对，即使子组件的数据没有发生任何的变化，它也会新的吧。

跟大家说啊，重新扔的并不代表界面会重新渲染。重新re，是产生一个新的虚拟动。他会进行新旧训动物的什么对比，如果发现完全没有变呢？它会更新真是多么吗？不会。能找吧。我们rest它会有一个基本的套一个套路啊，在更新的时候，它是呃，先有一个原有的虚拟动物的一个结构，它实际上也是个也是一个树状结构，跟我们的动物的结构呢，是类似的一个结构，接着一旦更新的时候，它是通过re产生一个什么呢？新的虚动，接着就要进行什么。两者进行些什么？差异对比去判断有没有变化，如果有变化是要更新真实动物，那如果没有变化呢？那就不会去更新。真实动。

对吧。这能听懂不好，我假设父组件更新了，但子组件它其实本质上它的属性和它的状态都没有变化，有必要认的吗？没有必要认吧，因为最终的结果界面是不是还是一样的。是不？你render是不是要去产生新的虚拟动，虽然说界面没有重新更新，但是你是不是花了一定的时间去生成一个虚拟动？你调用render执行代码不就要花时间吗，是不是？能不掉是不是就不掉啊？那好了。那。关键是他是不是默认就会掉啊。这是他的默认行为吧？好，这是一个问题。还有一个问题，当我当前主线如果调用s state，即使我状态没有任何变化，他也会重新什么？原来只要我调用三的，它必然什么。

扔的这能听到，不必然扔的，那这个时候就有点不对劲了呀，因为我的状态是不是没有发生变化。你是重庆人的，是不是做了一个无用功？听到了吧。你render的最终的结果应该是要去更新界面才需要render嘛，是不是如果不需要更新界面，你也去render，这不就浪费时间吗？那现在就要说了，为什么会这样呢？我调用set副组件，Re，我当前组件去去进入更新流程，这个是正常，这个是应该的。但是在真正去执行render之前。你应该是还有一个阀门。能听到吧，来去检，你要通过你的检查以后，你发现它需要更新，你是不是才放心。能听到不，那如果他不需要更新，也就是他数据没有改变，我让他去问了吗？

我应该是不是一个统一的检查的一个阀门。啊，这个阀门是谁呀？啊，Should component这个名字写错了吧，应该是。Should component什么update？这能听懂吧，哎，这一个方法它的返回值默认是什么值。返回处，那也就是说这个房门一直是开的是不是。能听懂吧。这好吗？不好，那也就是说，即使你的数据没有变，这个是不是也进入了人的里面重新执行了？呃，我们要怎么解决这个问题呢？那解决问题是不是就控制这个阀门了。那我们最简单最直接的方法，首先想的方法是干嘛去。重写这个方法呗，来判断我的数据什么有没有变化，是不是如果有变化反为什么数如果没有变化了，或那判断数据判断哪些数据啊。

我组件里面有两个数据会影响到我的显示，一个是pro，一个什么。能听到吗？那我们是要比较这个两个对象，这两个都是对象嘛，这两个对象里面的属性。是不是有改变呢？如果有改变，是不是返过去？当然，这个比较我们称它为前比较。要深比较那个就复杂了，没必要，能不能听到是个前比较，也就是比较这两个啊，对象里面的属性值，至于属性值对象或者是数组里面有没有变，我需要比吗？不需要，记住一定要说明白，这是个前比较。当然，我自己写是不是有点费劲了？每个都自己写遍，他是不是有点烦呐，怎么做呢，哎。

那个库，那个框架是不是已经想到了，你有这种需求啊，它设计了一个什么样的组件呢？叫PE component。而这一个组件相对于原来的component做了什么事情？这就要说到PU component实现我们优化的一个基本原理，是不是他去重写了这个方法，那重写方法里面干嘛呢？其实就干咱刚才要说的干的事情是不是。这能听到吧。说白了就咱这些想干的事情有，是不是这个框架自动帮我们已经定好了呀。是吧？但是啊，你跟人说一定要先说出来这一个含方法，是不是把这个方法的作用。说清楚我们要在里面去做什么，你说清楚，最后再说，Component就做了这些，就解决了问题。

这能听懂吧，好，那生老师。他要问我，你开发中哪里用的了，说一个例子呗。说一个例子，就是不用不用不用就效率低，用上以后诶就效率高了，其实相同机相对高了是不是，就看你的那个扔的方法调用的次数是不是减少了是不是。我们昨天有没有跟大家演示过啊。啊，还记不记得我们有一个model对话框是吧？是吧，对，它里面是不是有一个form组件。是吧？当我把这一个model进行隐对话框进行隐藏的时候，它是不是也会去调用我的这个form组件的方法？为什么呢？因为附组件渲染。因为附组件的状态发生改变嘛，那当然还重新渲染了，但是这个状态有传给我的。

这个标识的状态有传过我的这个主页吗？没有啊，我本身是没有必要渲染的，对不对。但是如果你用，那就会选。听懂我意思吧，那这样就能说明这个问题啊。这怎么能，可以吧？可以啊，这是这一个时期啊，刚才我们已经说过了啊，这里面就会涉及到相关的一些命题啊，其实回答的办法都差不多。就你就把我们刚才讲的这一系列的东西都回答清楚就行啊。好，那我们做的功能呢？啊，说完之后我们来看一下我们的功能主要有两个，一个是用户管理，因为角色管理前面我们是不是已经做了。那接着是最后实现导航菜单的一个权限控制。嗯，那用户管理呢，这里面其实很简单，就实现了用户数据的增删改查，我也不想详说了，因为这没什么太大意思。

跟前面来比，其实这整个这一个是最简单的一个。啊，前面咱做过分类的管理，对不对，做过商品的管理，还做过什么角色管理，最后一个是什么。是不是用户管理。能听懂吧，啊，这个我就不再去一个一个的去说了啊，那最后呢，我们需要去对我们的菜单啊，导航菜单进行一个权限控制，也就是说我当前登录用户啊，登录用户只能看到什么，我当前这个用户。拥有的权限吧。能听懂吧，他能看到哪些，就只让他显示哪些好，那这个时候就要说一下，我们有一个基本的思路。会涉及到哪些东西？首先这里面需要有两个集合数据，有两个数据对象，这一个啊得说一下权限控制依赖于后台。

能听到。是依赖后台的，后台得做一些东西，比如说后台得提供两个数据啊，一个角色，一个用户，是不是这能听到吧，而角色。里面包含了一些什么重要信息呢？它必然包含一个这个角色所拥有的权限的所有菜单项，每个菜单项是不是都有一个唯一标识的K？对吧的数组，我们那个名字叫什么来着，我们当时叫麦这个一定要叫这个名字吧，我能不能叫。也是可以的，只是我们设在后台，在设计这个角色的结构的时候，设计成M。听懂了吧，名字叫什么其实是关键，呃，这个里面的值是个什么值？

是个数组，那数组里面是什么东西？是N个，我们menu item所对应的什么是K？这能听懂吧？每一个白点是不是都有一个唯一的标识的K呀？那这个地方不就是K1K2K3对吧，那这些是不是就是我们某一个菜单需要显示的菜单K2，有了这个K，我到时候是不是就可判断。对吧，好，再一个是用户，用户里面必须包含一个所属角色的什么呢？ID。甚至有的。后台管理项目是一个用户可以拥有多个角色。这能听懂我说的意思吗？一个用户就可以拥有多个角色，那这个时候不就是肉ID了？那是ids啊，对不对。能听到不？那那个时候我的用户啊，拥有的权限就可能不是一个数字了，是不是多个呀。

啊，当然我们没有这整的那么复杂啊，先把这个搞清楚就行。好，再一个当前登录用户，我当前登录用户是不是得到了一个对象叫优。是吧？而我通过user者，昨天我不知道大家还记不记得user里面有个很重要的属性叫。集合里面这个集合里面的这个用户本来只有消费ID，但是我返回的数据。我返回的数据。里面是把那个肉啊也查出来了，放到那个user里面，这样我就能很方便的看到水。什么menu？这能听懂不，这样我就能看到menu了，没问题吧，没问题啊。好，这是这个，那包含了所属的肉，到时候就能得到对应的menu啊。

最后一步了。我们在便利显示菜单项的时候，哎，昨天我们整过，我们把那个life的level打开。我们在这里面不是去通过这一个方，不通过这个方法，通过这个方法。来去啊，生成对应的item去显示了。那一定要需要生成吗？我们说过有的菜单项是不是不用显示啊。或者说哪些菜单上能显示了。一个菜单项是不是对应item数据，我得去判断这个item。我当前这个用户有没有他对应的权限吗。如果有是不是才行，对不对，那这个时候我们就专门设计了是不是一个判断的函数。通过这个函数来去判断，只有当有对应权限的时候才什么呢？它存在，才去创建，才显示，只是说我们判断的条件是什么，是不是。

能听到不，你先要知道啊，我们这里涉及哪些东西，再说我们判断条件，诶这里面我们实际上是设置了四个条件。能听懂吧，只要满足其中一个就行。首先我第一个条件是什么意思啊。是啥意思？你怎么说一句省话，这这这说明一个什么问题啊？党员又怎么着嘞？对呀，就一句话，管理员能看所有的菜单。这不就得了吧？那当然都是满足条件的啦，我还要做别的判断吗？不用了呀，是不是？能听到不，嗯，我命管理员是能看到所有的，其他的都不用检查是吧？好，这是这一个，还有一种比较特别的，我还有一个设计啊，是如果一个用户他没有权限，开始可能没有设置权限，是不是没有设置权限进来以后难道是空白的吗？这样不太好吧。

是不是好歹让他看到一两个界面是不是，那这个时候怎么办。那这个时候我们是不是要去在设计结构的时候。我们在某一个it可以配置一个不型的标识，对不对，来标识是否是什么。公开的，那就是说如果一个item是公开的，那必然可见，对于任何用户都可见，对不对。跟他有没有这个权限有关系吗？没有。好，这是这个。下面一个就要涉及到有比较了。比较什么呢？当前用户由此STEM权限，我怎么知道当前用户有此STEM的权限呢？就要看啊，我当前item这个item是不是有一个K。

对吧，当前用户是不是关联着一个menu。应该说对不对。因为当前用户是不是一个user。对吧，游者里面是不是有个热对象。任对象里面是不是有个menu。对吧。那这个时候就要看这个K有没有在什么。对吗？在的话是不是就可以了。Mini。没问题，那如果不在，那整个是不是就被隐藏了，对不对，这个地方就涉及到第四个，第四个是不容易发现的，但是你第四个不做很有问题。什么个意思呢？有的时候吧，我只有一个二级菜单的权限。一级菜单权限没有，听懂了，不，这个权限我没有，我我那时候没加。

它是什么呢？这个什么时候才有呢？是我选择了所有的子菜单的权限，他才会进入我的menu。听懂了吧？那这个时候你就想了。我一判断他的时候，就发现我没有这个权限。那直接整个就什么。Pass掉了。是不是，那还有可能显示它吗。来。那这个地方就是说第四个条件呢，就是如果当前用户有item的某个子it的什么选钱的时候，那我是不是应该把当前的这个item也显示出来。这样才有机会显示他的子怎嘛对不对。嗯，这个就是我们昨天讲的一些东西。这个要能表达清楚啊，面试的时候有可能问再一个重点就是前面的讲的这几个概念使用的异步和同步以及。

啊，这里面有一个非常重要的方法，这个名字最好能读出来秀的update。She。