Flexx框架中的反应机制(Reactions)深度解析-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00809/article/details/148578460

Flexx框架中的反应机制(Reactions)深度解析

什么是Reactions

在Flexx框架中，Reactions（反应机制）是一种强大的事件响应系统，它允许开发者对组件属性变化和用户交互事件做出响应。这种机制类似于其他框架中的"事件监听"或"数据绑定"概念，但提供了更灵活和强大的功能。

基本用法

让我们通过一个简单的例子来理解Reactions的基本用法：

from flexx import flx

class Example(flx.Widget):
    def init(self):
        super().init()
        with flx.VBox():
            with flx.HBox():
                self.firstname = flx.LineEdit(placeholder_text='First name')
                self.lastname = flx.LineEdit(placeholder_text='Last name')
            with flx.HBox():
                self.but = flx.Button(text='Reset')
                self.label = flx.Label(flex=1)

    @flx.reaction('firstname.text', 'lastname.text')
    def greet(self, *events):
        self.label.set_text('hi ' + self.firstname.text + ' ' + self.lastname.text)

    @flx.reaction('but.pointer_click')
    def reset(self, *events):
        self.label.set_text('')

在这个例子中，我们创建了两个反应函数：

greet()函数会在firstname或lastname的text属性变化时触发
reset()函数会在按钮被点击时触发

连接字符串(Connection Strings)

Flexx使用"连接字符串"来指定要监听的事件或属性。这些字符串采用"路径"形式，如"sub.subsub.event_type"。这种设计提供了极大的灵活性，我们将在后面的"动态性"部分详细讨论。

事件处理细节

反应函数通常接受*events参数，这是因为：

当手动调用时(如ob.handle_foo())，可能没有事件参数
当由事件系统调用时，至少会有一个事件参数
当一个属性被多次设置时，函数可能被调用一次但带有多个事件

如果需要单独处理每个事件，可以这样做：

@flx.reaction('foo')
def handler(self, *events):
    for ev in events:
        ...  # 处理单个事件

反应模式

Flexx提供了三种不同的反应模式：

1. 普通模式(Normal Mode)

这是默认模式，事件系统确保所有事件按照它们被触发的顺序处理。这意味着在一个事件循环迭代中，一个反应函数可能被多次调用，中间可能穿插其他反应函数的调用。

2. 贪婪模式(Greedy Mode)

在这种模式下，所有针对某个反应函数的事件会被一次性处理。这在需要同时处理所有相关事件或性能至关重要时特别有用。

@flx.reaction('foo', mode='greedy')
def handler(self, *events):
    ...

3. 自动模式(Auto Mode)

自动反应会在它所访问的任何属性发生变化时自动触发。创建自动反应有两种方式：

明确指定mode='auto'
创建不带连接字符串的反应

@flx.reaction
def slders_combined(self):
    self.label.set_text('{:.2f}'.format(self.slider1.value + self.slider2.value))

自动反应非常方便，但相比普通反应有更多的性能开销，因此当访问大量属性或属性频繁变化时应谨慎使用。

动态性(Dynamism)

Flexx的反应机制支持动态连接，这意味着即使事件源发生变化，连接仍然有效。考虑以下例子：

@flx.reaction('box.children*.pointer_click')
def a_button_was_pressed(self, *events):
    ev = events[-1]  # 只关心最后一个事件
    self.label.set_text(ev.source.id + ' was pressed')

在这个例子中，无论box.children如何变化（添加或删除按钮），反应函数都会自动重新连接到当前所有的按钮点击事件。

隐式动态性(Implicit Dynamism)

自动反应天生具有动态性，因为它们会自动连接到所有被访问的属性。例如：

@flx.reaction
def a_button_was_pressed(self):
    ids = []
    for checkbox in self.box.children:
        if checkbox.checked:
            ids.append(checkbox.id)
    self.label.set_text('checked: ' + ', '.join(ids))

这个反应函数会自动：