Stencil笔记(4)- 组件钩子

原创 2018年04月15日 10:49:14
import { Component } from '@stencil/core';

@Component({
  tag: 'my-component'
})
export class MyComponent {

  /**
   * 组件正在加载,尚未渲染呈现时触发调用。
   *
   * 这是在渲染前进行最后更新的地方。
   *
   * 只会被调用一次
   */
  componentWillLoad() {
    console.log('The component is about to be rendered');
  }

  /**
   * 组件已经加载完毕,并渲染呈现时触发调用。
   *
   * 在这个钩子里改变数据可能会导致组件重渲染。
   *
   *  只会被调用一次
   */
  componentDidLoad() {
    console.log('The component has been rendered');
  }

  /**
   * 当组件正在更新并重新渲染时触发调用。
   *
   * 可以多次调用,只要组件有更新。
   */
  componentWillUpdate() {
    console.log('The component will update');
  }

  /**
   * 当组件更新完毕时触发
   *
   * 调用于componentWillUpdate之后
   *
   *也是可以多次调用,只要组件有更新。
   */
  componentDidUpdate() {
    console.log('The component did update');
  }

  /**
   * 组件出栈,将被销毁时调用,用于清尾工作。
   */
  componentDidUnload() {
    console.log('The view has been removed from the DOM');
  }
}

下面是一个简单的时间显示例子:

import { Component, State } from '@stencil/core';


@Component({
  tag: 'custom-timer'
})
export class CustomTimer {

  timer: number;

  @State() time: number = Date.now();

  componentDidLoad() {
    this.timer = window.setInterval(() => {
      this.time = Date.now();
    }, 1000);
  }

  componentDidUnload() {
    clearInterval(this.timer);
  }

  render() {
    let time = new Date(this.time).toLocaleTimeString();

    return (
      <span>{ time }</span>
    );
  }
}

componentDidLoad只被调用了一次,每一秒中将现在的时间赋给time属性,time属性是用State装饰器装饰的属性,上面说到,State装饰的属性每次变化都会触发render函数,而render函数中将时间显示出来。

当组件出栈时触发componentDidUnload(),做清尾工作。

YII框架分析笔记2:组件和事件行为管理

Yii是一个基于组件、用于开发大型 Web 应用的高性能 PHP 框架。CComponent几乎是所有类的基类,它控制着组件与事件的管理,其方法与属性如下,私有变量$_e数据存放事件(evnet,有些...
  • wzllai
  • wzllai
  • 2012-06-13 13:03:18
  • 8758

即将到来的Ionic4以及它使用的Stencil会产生什么影响?

Ionic Team最近宣布在明年即将发布的Ionic4会全面采用Stencil来实现标准Web Components。Ionic4因为很多原因所以是一次重大的升级,但是最牛逼的地方在于它第一次实现了...
  • liujiawei00
  • liujiawei00
  • 2017-12-18 18:57:39
  • 1699

angular2 组件的生命周期钩子

按照生命周期执行的先后顺序,Angular生命周期接口如下所示名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会...
  • feifei159
  • feifei159
  • 2017-01-09 14:54:31
  • 7480

Stencil笔记(1) - 组件

Stencil: 一个Web Components编译器Stencil具有诸如以下特征Virtual DOM异步渲染(受React Fiber启发)响应式数据绑定TypescriptJSX通过添加带有...
  • qq993284758
  • qq993284758
  • 2018-04-06 22:08:07
  • 4

Vue父子组件钩子函数

vue父子组件钩子函数触发顺序beforeMount后mounted前构造子组件 依次遍历beforeCreate-父组件create-父组件beforeMount-父组件beforeCreate-子...
  • a8725585
  • a8725585
  • 2018-01-18 10:24:07
  • 103

UnityShader实例09:Stencil Buffer&Stencil Test

Stencil Buffer&Stencil Test 在开始前先吐槽下unity的官方文档,说实话关于stencil ,官方文档真的是可以不要了,除了记流水账般解释了下各个参数的作用,作为例子...
  • u011047171
  • u011047171
  • 2015-07-17 15:44:16
  • 11026

vue中钩子

vue中的钩子实际就是hook,指的是一种事件劫持机制,也就是说它会比你的事件更早进行执行处理什么是 axiosaxios 是一个基于 Promise 的,为浏览器和 Node.js 设计的 HTTP...
  • A_bet_of_three_years
  • A_bet_of_three_years
  • 2017-09-11 18:29:47
  • 396

Vue2.X的路由和钩子函数

最近上班有些忙,好久没有更新文章,也没学习新的东西。 今天来说说这个路由钩子吧。 各位朋友帮我点点关注啊顺便来个666。 导航和钩子函数: 导航:路由正在发...
  • settingSun66
  • settingSun66
  • 2017-05-29 11:39:28
  • 5607

Unreal Engine 4 —— 适用于FPS游戏的勾边后期效果

这篇博客介绍了在FPS游戏中常用的勾边效果在UE4(4.8 or later)中的实现。
  • noahzuo
  • noahzuo
  • 2016-05-10 17:54:46
  • 3572

Stencil buffer

模版缓冲(stencil buffer)或印模缓冲,是在OpenGL三维绘图等计算机图像硬件中常见的除颜色缓冲、像素缓冲、深度缓冲之外另一种数据缓冲。词源模版(stencil)是指一种印刷技术,通常以...
  • qp120291570
  • qp120291570
  • 2015-06-24 20:40:46
  • 2691
收藏助手
不良信息举报
您举报文章:Stencil笔记(4)- 组件钩子
举报原因:
原因补充:

(最多只允许输入30个字)