Dash 2.17版本新特性介紹

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

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

pip install dash -U

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

1 回調函數允許無Output目標

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

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

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()，將會在每次回調函數執行完成後統一同時反饋更新到前端，下面是一個簡單的例子：

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()，會即時的反饋更新到前端中：

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前綴：

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學習”加入我的技術交流羣，一起成長一起進步。