Blazor组件的生命周期解析

执行周期

  • 1. SetParametersAsync
  • 2. OnInitializedAsync（调用两次） 和 OnInitialized；
  • 3. OnParametersSetAsync 或 OnParametersSet；
  • 4. OnAfterRenderAsync 和 OnAfterRender；
  • 5. 每次组件呈现都会调用ShouldRender；

各周期解析

SetParametersAsync

每次调用 SetParametersAsync 时，ParameterView 都包含整个参数值集。

SetParametersAsync 的默认实现使用 [Parameter] 或 [CascadingParameter] 特性（在 ParameterView 中具有对应的值）设置每个属性的值。 在 ParameterView 中没有对应值的参数保持不变。

如果未调用 base.SetParametersAync，则自定义代码可使用任何需要的方式解释传入的参数值。 例如，不要求将传入参数分配给类的属性。

如果设置有事件处理程序，处置时会将其解除挂接。 有关详细信息，请参阅使用 IDisposable 处置组件部分。

public override async Task SetParametersAsync(ParameterView parameters)
{
    await ...

    await base.SetParametersAsync(parameters);
}

OnInitializedAsync 和 OnInitialized

SetParametersAsync 中的组件在从其父组件接收初始参数后初始化，此时，将调用 OnInitializedAsync 和 OnInitialized。

在组件执行异步操作时使用 OnInitializedAsync，并应在操作完成后刷新。

对于同步操作，替代 OnInitialized：

预呈现其内容的 Blazor Server 应用调用 OnInitializedAsync 两次：

  • 在组件最初作为页面的一部分静态呈现时调用一次。
  • 在浏览器重新建立与服务器的连接时调用第二次。

为了防止 OnInitializedAsync 中的开发人员代码运行两次，请参阅预呈现后的有状态重新连接部分。

在 Blazor Server 应用进行预呈现时，由于尚未建立与浏览器的连接，无法执行调用 JavaScript 等特定操作。 预呈现时，组件可能需要进行不同的呈现。 有关详细信息，请参阅检测应用何时预呈现部分。

如果设置有事件处理程序，处置时会将其解除挂接。

备注

应用参数和属性值时，异步操作必须在 OnParametersSetAsync 生命周期事件期间发生。

protected override void OnInitialized()
{
    ...
}

protected override async Task OnInitializedAsync()
{
    await ...
}

OnParametersSetAsync 或 OnParametersSet

在以下情况下调用：

在 OnInitializedAsync 或 OnInitialized 中初始化组件后。

当父组件重新呈现并提供以下内容时：

  • 至少一个参数已更改的唯一已知基元不可变类型。
  • 任何复杂类型的参数。 框架无法知道复杂类型参数的值是否在内部发生了改变，因此，它将参数集视为已更改。

备注

应用参数和属性值时，异步操作必须在 OnParametersSetAsync 生命周期事件期间发生。

protected override async Task OnParametersSetAsync()
{
    await ...
}

protected override void OnParametersSet()
{
    ...
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Blazor框架简介

    Blazor框架简介

    Blaozr 是由微软2019推出得一种使用.NET 生成交互式客户端得Web UI框架. 该框架利用C#代替JavaScript进行创建UI , 并且可以共享.NET编写的服务端和客户端业务代码. 优势: 1 使用C#代替JavaScript编写代码, 意味着, 如果你使用的是.Net进行编写服务端(例:ASP.NET Core WebApi) 或者是 客户端(WPF/Winform),那么可以共享应用之前的逻辑, 无需针对Web再编写其他的业务代码. 2 始终高效支持 Windows.Lin

  • Blazor实现数据验证

    Blazor实现数据验证

    Blazor 提供一组输入组件. 输入组件会将绑定字段数据处理到模型,并在提交窗体时验证用户输入.下表显示了可用的输入组件: EditForm EditForm 组件通过 EditContext 包装这些输入组件并协调验证过程. 创建 EditForm 时,可以使用 Model 参数指定要绑定到的模型实例. 验证通常是使用数据批注完成的,并且可以进行扩展. 若要启用基于数据批注的验证,请将 DataAnnotationsValidator 组件添加为 EditForm 的子组件. EditFor

  • Blazor组件事件处理功能

    Blazor组件事件处理功能

    Blazor的组件当中, 提供了事件处理功能, 这点类似于使用客户端(Winform/Wpf)开发, 经常用到的一些类似: 按钮(Button), 输入框(TextBox) 用到的一些事件, 例如Click.DoubleClick.TextChanged 等等事件允许我们在后台代码当中进行处理相应的逻辑. 介绍事件 在Razor组件中, 同样提供了事件处理功能.对于具有委托类型值且名为 @on {EVENT}(例如 @onclick)的 HTML 元素特性,Razor 组件将该特性的值视为事件处

  • Blazor路由与页面导航开发介绍

    Blazor路由与页面导航开发介绍

    在 Blazor 中,应用中的每个页面都是一个组件,通常在 razor 文件中定义,具有一个或多个指定路由. 路由大多数发生在客户端,而不涉及特定的服务器请求. 浏览器首先发出对应用程序根地址的请求. 然后, Blazor 应用中的根 Router 组件会处理截获导航请求,并将它们处理到正确的组件. Blazor 中的路由由 Router 组件处理. Router 组件通常在应用程序的根组件( App.Razor )中使用. Router 下面是VisualStudio创建的默认App.Razo

  • Blazor数据绑定用法

    Blazor数据绑定用法

    Blazor当中, 类似实现了WPF的基础绑定功能, 支持在HTML元素当中使用Razor语法进行绑定C#字段.属性或 Razor 表达式值. 绑定语法 在Html标签中,使用Razor的语法, 前缀使用@符号, 然后添加 @bind="xxxx" 即可实现最简单的绑定, 如下: input @bind="Name" /> @code { private string Name{ get; set; } } 通过上面的操作, Input中的值与属性Name则进

  • Blazor页面组件用法介绍

    Blazor页面组件用法介绍

    Blazor应用中, 是使用组件来构建用户界面, 例如页面.窗口.对话框等. 组件 使用C#和HTML标记的组合, Blazor组件称之为Razor组件, 文件名以 (.razor)结尾的文件. 1.如下所示, 在VisualStudio创建Blazor应用模板后的截图, 展示了Page文件夹中定义的razor文件. 注意:所有的Blazor组件, 都必须大写字符开头, 否则无效.如上图所示 ↑ 2.关于.razor 页面 对于每个 .razor页面来说, 包含了两个部分: 1. Html标记的

  • ASP.NET Core中的Blazor组件介绍

    目录 关于组件 组件类 静态资产 路由与路由参数 组件参数 请勿创建会写入其自己的组参数属性的组件 子内容 属性展开 任意参数 捕获对组件的引用 在外部调用组件方法以更新状态 使用 @ 键控制是否保留元素和组件 指定基类 指定属性 导入组件 原始 HTML 项目 Blazor 中,使用 .razor 结尾的文件,称为组件:而 Blazor 中的组件,正式名称是 razor 组件: Blazor 组件是 razor 过渡而来的,使用 razor 的基本语法特性,但是 Balzor 不支持 razo

  • Blazor组件的生命周期解析

    Blazor组件的生命周期解析

    执行周期 1. SetParametersAsync 2. OnInitializedAsync(调用两次) 和 OnInitialized: 3. OnParametersSetAsync 或 OnParametersSet: 4. OnAfterRenderAsync 和 OnAfterRender: 5. 每次组件呈现都会调用ShouldRender: 各周期解析 SetParametersAsync 每次调用 SetParametersAsync 时,ParameterView 都包含整

  • Android编程中的四大基本组件与生命周期详解

    Android编程中的四大基本组件与生命周期详解

    本文实例讲述了Android编程中的四大基本组件与生命周期.分享给大家供大家参考,具体如下: Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity : 应用程序中,一个Activity通常就是一个单独的屏幕,它上面可以显示一些控件也可以监听并处理用户的事件做出响应. Activity之间通过Intent进行通信.在Intent 的描述结构中,有两个最

  • Vue组件与生命周期详细讲解

    目录 写在前面 生命周期 图解 总结 写在前面 Vue.js的核心就是以简洁的模板语法将数据渲染进Dom系统.vue实例在渲染成html的时候往往要经过以下的步骤: 读取数据和方法,设置数据绑定和监听 解析template 将实例挂载到Dom,并将实例状态和视图绑定,在执行这些步骤的时候,vue还提供了一些生命周期的方法,用来在不同的阶段对代码做增添和修改. 生命周期 beforeCreate vue实例初始化,数据监听和方法属性挂载之前调用 created 数据监听和方法属性挂载之后调用,是最

  • 浅谈angular2 组件的生命周期钩子

    浅谈angular2 组件的生命周期钩子

    本文介绍了浅谈angular2 组件的生命周期钩子,分享给大家,具体如下: 按照生命周期执行的先后顺序,Angular生命周期接口如下所示 名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前. OnChanges 指令和组件 ngOnInit 在第一轮 ngOnChanges 完成之后调用. ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges之后才会调用 ngOnInit ,此时所有输入属性都已

  • 浅谈React Native 中组件的生命周期

    浅谈React Native 中组件的生命周期

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第

  • vue同步父子组件和异步父子组件的生命周期顺序问题

    关于vue组件的引入方式有两种 一. 同步引入 例子: import Page from '@/components/page' 二.异步引入 例子:const Page = () => import('@/components/page') 或者: const Page = resolve => require(['@/components/page'], page) 两种引入方式的不同之处在于: 同步引入时生命周期顺序为:父组件的beforeMount.created.beforeMoun

  • 详解Angular组件之生命周期(二)

    详解Angular组件之生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子. 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用. @ViewChild('child1') child1:Child

  • React组件的生命周期详细描述

    React组件的生命周期详细描述

    目录 一.什么是生命周期 二.装载过程 1.constructor 2.render 3.componentWillMount和componentDidMount 三.更新过程 1.componentWillReceiveProps(nextProps) 2.shouldComponentUpdate(nextProps, nextState) 3.componentWillUpdate和componentDidUpdate 4.触发render 四.卸载过程 五.生命周期流程 1.第一次初始化

  • vue的生命周期钩子与父子组件的生命周期详解

    vue的生命周期钩子与父子组件的生命周期详解

    目录 vue的生命周期钩子的介绍 父子组件的生命周期 加载渲染过程 父组件更新过程 子组件更新过程 父子组件更新过程 销毁过程 代码示例 created和mounted的区别 vue的生命周期钩子的介绍 vue官网中提供的vue的生命周期钩子图 vue的生命周期可以分为8个阶段: 1.创建vue实例涉及的两个钩子 (1)beforeCreate:创建前,vue实例初始化之前调用. 此时的数据观察和事件配置都还没有准备好,而此时的实例中的data和el还是underfined状态,不可用的.Dom

  • React组件的生命周期深入理解分析

    目录 生命周期钩子(新) 生命周期钩子(旧) 父子组件生命周期 组件从创建到销毁的过程,被称为组件的生命周期. 在生命周期的各个阶段都有相对应的钩子函数,会在特定的时机被调用,被称为组件的生命周期钩子. 生命周期回调函数 = 生命周期钩子函数 = 生命周期函数 = 生命周期钩子 函数式组件没有生命周期,因为生命周期函数是 React.Component 类的方法实现的,函数式组件没有继承 React.Component,所以也就没有生命周期. <-- 容器!--> <div id=&qu

随机推荐