关于自定义组件的那些事儿

自定义组件的原理

运行基本原理

自定义组件的具体创建方法，hello world示例，请参考智能小程序官网：

smartprogram.baidu.com/docs/develo…

了解原理之前，我们来看一下自定义组件中的js构造器：

以上包括了自定义组件的逻辑部分内容，开发者可以在Component构造器的各个生命周期回调函数中，编写自己的逻辑代码。

在Component构造器中写的自定义组件的原型，运行在小程序的逻辑层(jscore)中，并不与自己的

swan模板运行在一起--swan模板运行在视图层(webview)中。

所以，setData等操作，都是通过数据通讯，将要设置的数据传递到真正的视图层，然后进行自定义组件的渲染。同理，所有的生命周期，也是当组件的模板在视图层渲染完毕之后，传递回逻辑层进行触发的。

所以对于setData的调用，也如同页面的setData一样，需要谨慎调用。因为每一次setData都意味着一次jscore与webview的数据通讯。

类 or 累？

看过自定义组件基本使用方法的同学肯定知道，自定义组件内使用的样式类是独立空间，即： 组件模板中使用的css样式类并不会应用上使用该自定义组件的页面上的样式类。

emmmmm，如果上面那句话把你绕晕了，我们来看一下例子：

​展示效果如下：

展示效果如下：

我们可以看到，虽然都是渲染到同一个页面上，但是页面上定义的样式类，在组件中并没有生效。

那么同样的，在组件中定义的类，也不会透出去，影响整个页面，例：

效果如下：

那么这个“隔离“是如何做到的呢？ 我们仔细观察一下自定义组件最后生成的模板和样式：

真相大白，原来是自定义组件中使用的样式类，都被编译增加了前缀。这才使内外的类可以互相隔离。这种设计也有好处也有缺点，好处就不用再想之前用很多框架那样自己去寻找解决方案(如：CSSinJS或css modules)自定义组件中直接集成了内置解决方案。坏处就是可能有些css上的使用限制，比如（摘自官网）：

这块也请读者在开发过程中多注意。

TIPS: 关于css的解决方案，官方貌似还在持续优化，相信不久就可以迎来限制更小的集合了。

组件间的通讯

父子自定义组件之间，可以使用两种方式进行通讯：

• 利用自定义事件
• 利用dispatch消息

利用自定义事件

利用自定义事件在父组件中进行事件的绑定，在子组件中进行自定义事件的派发。 例：

dispatch消息

通过 dispatch 方法，组件可以向组件树的上层派发消息。消息将沿着组件树向上传递，直到遇到第一个处理该消息的组件，则停止。通过 messages 可以声明组件要处理的消息。messages 是一个对象，key 是消息名称，value 是消息处理的函数，接收一个包含 target(派发消息的组件) 和 value(消息的值) 的参数对象。 (摘自san官网)

如果组件有消息需要一直向上透传，则可以使用这个方法，只要没有组件组件拦截，消息则会一直向上传递。

例：

其中根组件中使用了父组件，父组件中使用了子组件。当子组件调用dispatch方法时，则会一直传递到根组件上（因为父组件并没有message消费本次dispatch）。

至于父组件想通知子组件嘛，可以通过props的改变，来触发子组件。

通过上述两种方式均可以实现父子组件的通讯，当然，各位读者也可以试试自己引入事件流，或者其他三方库，来丰富自己的应用通讯方式。