课程章节介绍
让我们来聊聊这个练习5-2。在这个练习中，我们要让图库视图和网格视图保持同步。想象一下，你在一个页面上有两个不同的视图来展示学生信息：一个是图库视图，另一个是网格视图。你希望当你在一个视图中选择一个学生时，另一个视图也能自动更新，显示同一个学生的信息。
首先，当你点击图库视图中的一个学生卡片（StudentTile）时，StudentBrowser组件会调用网格视图上的一个公共方法，叫做setSelectedRecord。这个方法的作用是告诉网格视图：“嘿，用户刚刚选择了这个学生，你也应该选中他。”
反过来，当你在网格视图中点击一行时，StudentBrowser组件会调用图库视图中的一个公共方法，叫做setSelectedStudent。这个方法的作用是告诉图库视图：“用户刚刚在网格中选择了这个学生，你也应该选中他。”
在这两种情况下，我们使用了一个叫做pubSub的机制来更新StudentDetail组件，确保它显示的是当前选中的学生信息。
不过，这里有一个小问题，叫做“延迟实例化”。简单来说，就是网格视图的内容在你点击网格选项卡之前还没有被创建出来。所以，在你点击网格选项卡之前，你不能对网格视图调用任何公共方法。这是一个限制，我们需要想办法解决它。
在练习的最后，我们会讨论如何更新架构，使得即使有延迟实例化的情况，两个视图也能保持同步，不管你先点击哪个选项卡。
一种可能的解决方案是，让StudentBrowser组件保留当前选中的学生ID的副本，并把这个ID作为属性传递给图库视图和网格视图。对于图库视图，你可以直接传入选中的学生ID，而不需要调用任何API方法来改变它。对于网格视图，你可以传递一个新的属性，叫做Selected-pk-val，然后在renderedCallback()方法中使用这个属性来高亮显示当前选中的行。
renderedCallback()方法的作用是在组件渲染完成后执行一些操作。在这个方法中，我们首先检查组件是否已经渲染过一次。如果是，就直接返回。如果不是，我们就设置一个标志位，表示组件已经渲染过一次，然后调用setSelectedRecord方法，传入初始的选中学生ID。
这样，无论你先点击哪个选项卡，两个视图都能保持同步，显示同一个选中的学生信息。
希望这个解释能帮助你理解这个练习的关键点。如果你有任何问题，随时问我！