随着项目文件逐渐变大，人们大多会把按钮、弹窗、输入框和导航栏这类重复出现的元素做成组件，否则每个页面单独维护一套状态的话，修改起来不光费时，还很容易让不同页面的样式出现出入。要在ProtoPie里搞清楚组件的状态怎么被多个地方共用，以及修改主组件后为什么有些实例不跟着一起变，就得先把主控组件和子版组件这两个概念区分开，主控组件负责统一的管理和修改，子版组件只是在不同地方摆放出来的具体副本。

　　一、ProtoPie组件状态怎么复用

　　让组件被复用的核心想法，其实就是只保留一份主控组件，其他所有要用到它的地方统统去调用它的实例，这样一来，后期需要调整的时候就不用一页一页地去翻改了。

　　1、把重复出现的元素转成组件

　　先在画布里找到那些需要复用的图层和它们身上的交互，接着去点一下工具栏里的【Component】按钮，或者直接单击右键选【Convert to Component】，创建完成以后，原来这些图层就变成了一个组件的实例，往后就可以在好多个不同的场景里重复去用它，而不必再拷贝一大堆互不相干的普通图层。

　　2、通过组件面板往别的页面添加实例

　　再多打开一个场景，随手把左侧组件面板里的那个组件拖进去，一个新的实例就又生成了；像按钮、卡片、导航栏这一类在原型里反复出现的东西，都应该照这个办法来处理，而不是简单地把原有的图层复制粘贴过去，否则等到要修改的时候，所有拷贝都要逐一改动。

　　3、把状态逻辑放在主控组件里统一处理

　　进到【Edit Main Component】这个编辑模式里，去改主控组件本身，把那些默认的样子、按下时的状态、鼠标悬停时的反应，还有跟其他对象连接的交互动作，全部在这儿做好；往后如果要新增一个页面，直接拿来就能用上已经做好的整套状态，省得在不同的地方一遍遍重新搭建。

　　4、借助嵌套组件去管理更复杂的状态

　　万一一个组件里面还夹着按钮、图标或者输入框这些小家伙，就可以继续往里面套别的组件，一层一层地嵌下去；以后去改动最底层的那个小子组件，所有把它包裹在里面的父组件也都会一块儿跟着更新，这样同步的范围会更全面一些。

　　二、修改主组件后为什么有的实例不跟着变

　　不少人碰到过这种情况，明明在主控组件里改过了，可是有些地方的副本看上去还是老样子，就容易觉得是组件功能坏掉了，其实大多时候并不是这样，而是实例身上有些东西已经被覆盖掉了，或者跟主组件之间的联系被断开了。

　　1、实例的属性被局部改动过

　　要是在某个实例里头，手工去调整了它的文字内容、透明度、颜色这类属性，这些改动就会形成一层覆盖，以后再回到主控组件去修改同样的属性时，那个被覆盖过的实例因为已经存了自己的一套数值，就不会再接收主组件那边的更新，所以显得好像没有同步过去，实际上它只是故意保持了自己那份特例。

　　2、把覆盖掉的属性再恢复回来

　　可以选中那个看起来不同步的实例，点一下右键，从菜单里执行【Reset Overrides】或者类似“恢复为主控属性”的操作；这样做了以后，实例就会把身上那些独立的设定给丢掉，重新回到跟着主控组件走的继承关系里，下一次主组件再有变动，它也就能正常跟着一起刷新了。

　　3、实例已经跟主组件彻底分开了

　　如果之前某次操作时不小心点了【Detach Instance】，那么这个实例就退化成了一组普通的容器，和原来的组件之间彻底断了关联，以后再去修改主控组件，对它自然再也不会有半点儿影响；去属性面板瞄一眼，看看它是不是还挂着组件的标志，如果已经被分离了，就没有同步这回事了。

　　4、改的其实是某个实例而不是主组件本身

　　还有一种容易搞错的地方是，动手修改的时候选中的是画布上摆着的某一个具体的副本，而不是主控组件；只有进入了【Edit Main Component】之后做的那些调整，才会自动同步到所有其它的实例上，如果只是随手点了一个普通实例就改，那这个改动只会停留在当前这一个对象身上，别的副本不知道也是很自然的事情。

　　三、怎样让组件长期保持同步

　　组件做得多了，就要有一套统一的维护习惯，否则各种不同步的小毛病会越积越多，找问题的功夫比从头做还多。

　　1、尽量只动主控组件

　　颜色、字号、动效还有整套交互的逻辑，最好全都在主控组件里面完成，实例只要负责好自己被摆放的位置，以及少数几个可以各自不一样的小参数就够了，这样主动权就全攥在主组件手里，别的地方不会乱。

　　2、对于需要局部差异的地方用可覆盖的变量

　　有些按钮上的名字或者卡片的标题，确实需要每个实例显示得不一样，这时候就可以用上变量，并在变量身上打开【Make Overridable】这个开关；这么一来，既能保持大部分样式仍旧跟着主控组件同步，又允许不同的实例各自写出自己那一点独特的内容，两边都兼顾到了。

　　3、给组件配上一份说明文档

　　项目规模一上来，可以把组件里都用了哪些变量、会发送或接收什么消息、各个交互是怎样设计的，这些信息用文字简单记下来；后面别的团队成员再来用这套组件的时候，一眼就能看清什么能自己改，什么最好别动，免得有人不小心改了不该动的地方。

　　4、隔一段时间检查一下不正常的实例

　　如果在一些页面上发现某些按钮或卡片的样式跟主控组件比其他地方差得挺多，可以优先去看看它们身上是不是留着以前没清掉的覆盖，或者是不是被不小心分离出去了，还是有人在实例上直接做了改动；大多数所谓的“同步失效”，翻来翻去都跳不出这几个原因。

　　总结

　　把这些思路理清之后，ProtoPie组件状态的复用，比较稳的做法就是建立好一个主控组件，然后在各个不同的场景里靠实例去用起来；一旦修改主组件后发现有不同步的地方，第一时间去查有没有被实例局部覆盖、有没有被分离，或者是不是不小心改到了某个具体的实例本身；只要主控组件和它的那些实例之间还保持着正常的关联关系，大部分样式和交互的更新就都可以自动流转到整个原型项目里，不需要一处一处地去手调。