Dash 2.17版本新特性介紹

费弗里發表於2024-05-06

本文示例程式碼已上傳至我的Github倉庫https://github.com/CNFeffery/dash-master

　　大家好我是費老師，不久前Dash釋出了其2.17.0版本，執行下面的命令進行最新版本Dash的安裝：

pip install dash -U

　　2.17版本中新增了多項重要的新功能，使得我們在開發Dash應用功能時更加的得心應手，下面我們就來一起get其中的重點😉：

Dash 2.17版本新特性介紹

1 回撥函式允許無Output目標

　　在之前版本的Dash中定義回撥函式，基本準則之一就是回撥函式中必須要編排Output目標，否則在debug模式下訪問應用會有下圖所示的提示資訊：

Dash 2.17版本新特性介紹

　　而從2.17版本開始，允許定義無Output角色的回撥函式，這在諸如日誌蒐集等不一定需要Output的場景下很受用，簡單的示例如下：

Dash 2.17版本新特性介紹

app1.py

import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Input

app = dash.Dash(__name__)

app.layout = html.Div(
    [fac.AntdButton("示例按鈕", id="demo-button", type="primary")],
    style={"padding": 50},
)


@app.callback(Input("demo-button", "nClicks"))
def no_output_callback(nClicks):
    print(f"nClicks: {nClicks}")


if __name__ == "__main__":
    app.run(debug=True)

2 後端回撥函式新增set_props()方法

　　在Dash的上一個版本（2.16）中，為瀏覽器端回撥新增了set_props()方法，使得我們可以在瀏覽器端自由靈活的更新指定元件的屬性值。

　　而從2.17版本開始，等價的set_props()方法亦可在後端回撥函式中使用，其第一個引數component_id用於定義目標元件id，第二個引數props接受字典型輸入，用於以鍵值對的形式更新單個或多個屬性值，配合回撥函式無需Output的新特性，可以實現很多靈活自由的功能邏輯。

　　值得注意的事，set_props()在常規回撥函式和background回撥函式中具有不同的更新時機：

  • 常規回撥函式中使用set_props()

　　對於常規回撥函式，在函式體內部執行的若干次set_props()，將會在每次回撥函式執行完成後統一同時反饋更新到前端，下面是一個簡單的例子：

Dash 2.17版本新特性介紹

app2.py

import dash
from dash import html, set_props
import feffery_antd_components as fac
from dash.dependencies import Input

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdButton("翻轉顏色", id="reverse-color", type="primary"),
        fac.AntdRow(
            [
                fac.AntdCol(id="left-block", span=12, style={"background": "white"}),
                fac.AntdCol(id="right-block", span=12, style={"background": "black"}),
            ],
            style={"height": 500},
        ),
    ],
    style={"padding": 50},
)


@app.callback(Input("reverse-color", "nClicks"))
def reverse_color(nClicks):
    if nClicks % 2 == 0:
        set_props("left-block", {"style": {"background": "white"}})
        set_props("right-block", {"style": {"background": "black"}})

    else:
        set_props("left-block", {"style": {"background": "black"}})
        set_props("right-block", {"style": {"background": "white"}})


if __name__ == "__main__":
    app.run(debug=True)
  • background回撥函式中使用set_props()

　　與常規回撥函式不同，在background回撥函式執行的過程中執行的set_props()，會即時的反饋更新到前端中：

Dash 2.17版本新特性介紹

app3.py

import dash
import time
import diskcache
import feffery_antd_components as fac
from dash.dependencies import Input
from dash import html, set_props, DiskcacheManager

cache = diskcache.Cache("./cache")
background_callback_manager = DiskcacheManager(cache)

app = dash.Dash(__name__, background_callback_manager=background_callback_manager)

app.layout = html.Div(
    [
        fac.AntdButton(
            "執行任務",
            id="execute-task",
            type="primary",
            autoSpin=True,
            loadingChildren="執行中",
        ),
        fac.AntdFormItem(
            fac.AntdProgress(id="task-progress", percent=0, style={"width": 300}),
            label="任務進度",
        ),
    ],
    style={"padding": 50},
)


@app.callback(Input("execute-task", "nClicks"), background=True, interval=500)
def execute_task(nClicks):
    for i in range(1, 6):
        set_props("task-progress", {"percent": i * 20})
        time.sleep(1)

    set_props("execute-task", {"loading": False})


if __name__ == "__main__":
    app.run(debug=True)

3 background回撥功能增強

　　從2.17版本開始，針對background回撥函式中的running、progress、cancel目標，新增了對字典型id格式的支援，具體的功能使用我將在後續專門針對background回撥函式的文章中做詳細介紹，本文不多贅述。

4 新增自定義服務介面快捷註冊功能

　　新版本中額外增加了add_startup_route()方法，其第一個引數name用於設定對應介面的路由地址，第二個引數view_func用於傳入對應的檢視函式，第三個引數methods以列表形式傳入對應的http請求方法型別（取值在'GET'、'POST'中），直接來看一個簡單的例子，下圖展示的，就是我們快捷註冊到Dash應用中的額外自定義服務介面，其自動被新增上/_dash_startup_route字首：

Dash 2.17版本新特性介紹

app4.py

import dash
import time
from dash import html


def demo_api():
    return {"now": time.time()}


# 在Dash物件例項化前新增自定義介面
dash.Dash.add_startup_route("demo-api", demo_api, ["GET"])

app = dash.Dash(__name__)

app.layout = html.Div("測試")

if __name__ == "__main__":
    app.run(debug=True)

5 layout可接受列表型輸入

　　在過往版本的Dash中，app.layout只接受單個元件，或返回單個元件的函式，從2.17版本開始，直接賦值由元件構成的列表也被允許，譬如：

app.layout = [html.Div("測試")]

　　完整的更新內容說明請移步https://github.com/plotly/dash/releases/tag/v2.17.0。

　　以上就是本文的全部內容，對Dash應用開發感興趣的朋友，歡迎新增微訊號CNFeffery，備註“dash學習”加入我的技術交流群，一起成長一起進步。

相關文章