组件生命周期

我们再来回顾一下 组件运行机制 介绍里的这张图。

其中，黄色部分是 JSCore 中组件 Component 的生命周期，蓝色部分是 WebView 中组件 UIComponent 的生命周期。本结将列出这些回调的详细信息。

Component

Component 的生命周期可以参考 React，在此不一一列出。

• constructor
• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentWillUnmount

UIComponent

UIComponent 中一个很重要的参数是 vnode（虚拟 dom）。它是 Component 向 UIComponent 输出的结构单元。所以我们先来介绍一下 vnode 的数据结构。

{
    attrs: {           // 写在标签上的属性
        componentType,     // 组件类型（即：组件类型唯一标识）
        componentId        // 组件 id
    },
    dom,               // 真实 dom 元素
    mounted,           // 是否渲染过
    order,             // 在父元素中的顺序
    vChildren,         // 子组件虚拟 dom
    vParent            // 父虚拟 dom
}

constructor

componentWillMount

该函数接受一个 bollean 类型的返回值，如果返回 true， YIS 不会执行节点的挂在，开发者可以手动挂载节点到目标容器，该场景主要用于处理动画。

@YISComponent.UI('Test')
export default class Test extends UIComponent {
    //......
    componentWillMount({vnode}) {
        vnode.dom.innerText = vnode.dom.innerText + '重写后';
        vnode
            .vParent
            .dom
            .appendChild(vnode.dom);
        return true;
    }
    //......
}

componentDidMount

componentWillUpdate

componentDidUpdate

componentWillUnmount

该函数接受一个 bollean 类型的返回值，如果返回 true， YIS 不会执行节点的挂在，开发者可以手动从目标容器卸载节点，该场景主要用于处理动画。

@YISComponent.UI('Test')
export default class Test extends UIComponent {
//......
    componentWillUnmount({vnode}) {
        console.log('componentWillUnmount', arguments);
        window.setTimeout(() => {
            vnode
                .vParent
                .dom
                .removeChild(vnode.dom);
        }, 3000);
        return true;
    }
}