React组件mixins和动态子级的介绍

组件是React里复用代码的最佳方式，但有时一些复杂的组件间也需要共用一些功能或具有一些共同的行为，如输出日志等，有时这也称为跨切面关注点。React使用mixins机制解决这类问题。由于组件之间共享逻辑，所以也能通过这个逻辑实现组件之间的通信与协作。举一个典型的例子，很多组件都会有定时更新界面的需求。用setInterval（）实现定时器的操作并不难，只是当不需要定时器时要及时清除定时器，以减小内存开销，尤其是大量的组件都包含定时器时。React的组件生命周期方法可以告知我们组件创建或销毁的时机，但如果多个组件都需要定时更新机制时，我们为每个组件都实现一套定时器的创建和销毁机制显然是不可取的，最好是将这个机制共享并使其能为多个组件所用，这时可以使用mixins机制。下面使用setInterval（）来做一个简单的mixin，并保证在组件销毁时清理定时器。

简单地说，在mixins中定义的函数被“混”入组件实例中，多个组件定义相同的mixins则会使组件具有某些共同的行为。SetIntervalMixin中也定义了componentWillMount函数，在这种情况下，React会优先执行mixin中的componentWillMount。如果mixins中定义了多个mixin，则按声明的顺序依次执行，最后执行组件本身的函数。如果一个组件使用了多个mixin，并且有多个mixin定义了同样的生命周期方法（如：多个mixin都需要在组件销毁时做资源清理操作），所有这些生命周期方法都会被执行到：首先按mixin引入顺序执行mixin里的方法，最后执行组件内定义的方法。在最新的React中mixins机制已不再是优先提倡对象，我们大致了解其原理即可。

一个React复合组件会包含多个子组件，如果在运行的过程中子组件的位置会发生变化（如在搜索结果中）或者有新的子组件插入到列表开头，React会难以识别这些组件的变化关系，从而导致子组件删除后重建。如果要确保子组件在多个渲染阶段保持自己的特征和状态，就需要给每个子组件都赋予一个唯一标识key。

当遇到带有key的子组件时，React会确保它们被重新排序而不是重建。值得注意的是，key只对组件有效，对HTML元素不起任何作用。