泉州品牌网站设计定制,iis网站搭建,企业网站备案要多久,如何线上营销在Rust的世界中有一个叫Yew的框架#xff0c;它借鉴了React的思想。我的React代码也写了不少#xff0c;今天就聊一下我个人对Yew应用开发中事件相关部分的体验。
我的也是才开始学习Rust和Yew#xff0c;说得不对的地方还请大家多多指教。
下面的例子涉及到3个组件 Paren…在Rust的世界中有一个叫Yew的框架它借鉴了React的思想。我的React代码也写了不少今天就聊一下我个人对Yew应用开发中事件相关部分的体验。
我的也是才开始学习Rust和Yew说得不对的地方还请大家多多指教。
下面的例子涉及到3个组件 ParentComponent组件 Button组件 button/原生html元素 也就是说在ParentComponent组件中放置了Button组件这个Button组件其实就是对button/的一个封装。这里的事件传递就是 button/ - Button - ParentComponent
先从Button组件中的点击事件说起。
按钮事件定义如下
use yew::{Properties, Callback, MouseEvent};#[derive(Properties, PartialEq)]
pub struct Props {#[prop_or_default]pub onclick: CallbackMouseEvent,
}这里上面关于事件的onclick虽然就2行代码但这里面的信息量比较大我将为大家逐一分析以能知其所以然。
Properties
用于定义组件的参数和React一样当组件的参数更新时Yew框架会自动更新组件。 在Yew框架中通过结构体struct来定义组件的参数。在这个结构体中你可以定义各种类型的字段这些字段对应的就是组件的参数。 Properties本身是一个tarit但并不需要我们开发人员来实现这个trait。Yew框架通过Rust的derive功能自动将Properties的实现和你定义的结构体结合起来。 在结构体的字段中就包含了我们要讨论的事件Callback。 也就是说我们的事件就可以定义成下面这个样子。
#[derive(Properties)]
pub struct Props {pub onclick: Callback(),
}PartialEq
和Properties一样PartialEq也是一个trait如果大家结合React的组件更新逻辑估计能够猜得出来它的用意。是的它就是Yew框架用来比较属性值看其是否有更新。不过你完全不必担心自己忘记加上这个trait因为编译器的错误报告会提醒你。这也是我喜欢Rust的地方。
Callback
用于定义组件暴露出来的事件。它的声明形式如下
pub struct CallbackIN, OUT () { /* private fields */ }当我们定义一个空事件时代码就是这样
pub onclick: Callback()在Yew应用开发中通常用Callback来定义事件因为Yew框架本身用Callback类型包装了html元素的事件。使用Callback类型来定义事件比较方便和安全。
prop_or_default
prop_or_default其实不是必须的。如果你不为你的字段添加这个attribute 宏就必须在使用这个组件的地方为它设置值否者会编译报错。这对组件的使用者来说显然不太友好。 因此这里我们使用到了prop_or_default它可以帮助Yew框架在运行时如果没有为事件字段赋值系统会为其计算推导出默认值。 在Yew框架中除了prop_or_default还有prop_or(value)和prop_or_else(function)。 prop_or_default: 使用类型的默认值 prop_or(value): 使用给定的默认值 prop_or_else(function): 通过函数来获取默认值
MouseEvent
yew::MouseEvent实际上是从web_sys中导出的它包含了鼠标当前的位置信息。具体可以参考https://docs.rs/web-sys/0.3.60/web_sys/struct.MouseEvent.html 之所以把MouseEvent提出来是为了让大家对Yew中的Html的事件参数有一个初步的了解。
pub use web_sys::AnimationEvent;
pub use web_sys::DragEvent;
pub use web_sys::ErrorEvent;
pub use web_sys::Event;
pub use web_sys::FocusEvent;
pub use web_sys::InputEvent;
pub use web_sys::KeyboardEvent;
pub use web_sys::MouseEvent;
pub use web_sys::PointerEvent;
pub use web_sys::ProgressEvent;
pub use web_sys::SubmitEvent;
pub use web_sys::TouchEvent;
pub use web_sys::TransitionEvent;
pub use web_sys::UiEvent;
pub use web_sys::WheelEvent;上面说了这么多关于Yew事件定义接下来看看如何从原生的button/ html元素上获取事件吧。 使用方式和React几乎是一样的开发过React项目的同学是不是觉得很亲切啊。 button style{danger_style} onclick{props.onclick.clone()}{props.text.clone()}/button
Button.rs的完整代码如下
use yew::{function_component, html, Callback, Html, MouseEvent, Properties};#[derive(PartialEq)]
pub enum DisplayType {Default,Danger,
}#[derive(Properties, PartialEq)]
pub struct Props {#[prop_or_default]pub text: String,#[prop_or(DisplayType::Default)]pub display_type: DisplayType,#[prop_or_default]pub onclick: CallbackMouseEvent,
}static default_style: str ...; //隐藏不必要代码
static danger_style: str ...; //隐藏不必要代码#[function_component]
pub fn Button(props: Props) - Html {match props.display_type {DisplayType::Danger html! {button style{danger_style} onclick{props.onclick.clone()}{props.text.clone()}/button},DisplayType::Default html! {button style{default_style} onclick{props.onclick.clone()}{props.text.clone()}/button},}
}在上面的Button.rs中我们创建了组件Button并为其定义了事件onclick下面就来看如何消费这个事件。
这里我想稍作停顿。我们知道Yew借鉴了React的思想可以看到两者间很多的相似之处。但是毕竟Yew是基于Rust语言开发的而React这里特指ReactJs)是基于Javascript开发的。前者是静态编译语言后者是动态语言。 因此在Reat中如何要处理Button中的onclick事件代码应该像下面这个样子
Button onclick{()console.log(clicked)}/但是在Yew中代码就没有简单了。 没关系只要知其所以然其实Yew中的事件处理也很简单。
在Yew应用开发中处理事件的步骤如下
定义事件枚举将事件枚举绑定到要处理的组件事件上在当前组件的update方法中处理事件
下面的代码用struct组件为例来展示如何处理Button上的onclick事件。
定义事件枚举
use yew::{ Component }
enum ParentComponentMsg {Toggle,
}pub struct ParentComponent;impl Component for ParentComponent {type Message ParentComponentMsg;
}在上面的代码中按照Yew的惯例将事件枚举的名称定义为组件名称Msg建议大家也遵守这个惯例。 然后不要忘记对于初学者来说很容易忘记下面这行代码
type Message ParentComponentMsg;这行代码是告诉编译器ParentComponent使用的事件枚举的类型。如果没有这行代码或者这行代码是type Message ();在下一个步骤上编译器会报错。 the trait std::convert::Fromcomponents::base::parentComponent::ParentComponentMsg is not implemented for ()将事件枚举绑定到要处理的组件事件上
这里我们要处理Button组件的onclick事件代码如下 fn view(self, ctx: ContextSelf) - Html {let onclick ctx.link().callback(|_| ParentComponentMsg::Toggle);html! {div classmodalButton text点击 onclick{onclick}//div}}
上面的参数中Context的出现频率很高它用于获取当前组件的属性值以及处理事件相关的处理。后面有机会再展开说说。
在当前组件的update方法中处理事件 fn update(mut self, ctx: ContextSelf, msg: Self::Message) - bool {match msg {ParentComponentMsg::Toggle {log!(clicked);// 可以在这里修改self上的属性即改变组件本身的状态来触发新的渲染。这就是react的做法了。}}true}让我再来夸夸Rust它利用它的mut关键字来告诉编译器这个对象是可修改的。如果没有mut关键字但有修改对象属性的代码编译器会直接报错。这一点在ReactJs中是做不到的。在ReactJs中我们只能严格遵守只能通过setXXX来修改状态但如果你鬼使神差地直接修改了状态值一般情况下好像也没有报错我不确定某些eslint插件是否具有这个功能。
相比于ReactJs要处理一个事件要多些这么多的代码是有点不方便但是如果你的代码写错了编译器会报错这里总算挽回了一点面子。
好了关于《Rust Yew应用开发的事件初探》我就写在这里了。这真的是一个初探里面的见解比较粗浅因为我也是边学边用。我要去写我的项目去了有什么新发现我再来和大家分享。
有不对的地方还请大家留言指教。
