Dash 2.16版本新特性介紹

费弗里發表於2024-03-07

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

　　大家好我是費老師，幾天前Dash釋出了其2.16.0版本，隨後在修復了一些潛在問題後，於今天釋出了可穩定使用的2.16.1版本，執行下面的命令進行最新版本Dash的安裝：

pip install dash -U

　　2.16版本中為我們帶來了多項強大的新功能，進一步提升了Dash應用開發的效率和靈活性，下面我們就來一起get其中的重點😉：

Dash 2.16版本新特性介紹

1 常規回撥新增running引數

　　新版本中為常規的回撥函式新增了running引數，使得我們可以針對若干個Output目標屬性，快捷定義其在當前回撥函式執行中及未執行狀態下分別的屬性值，引數格式如下：

running=[
    [Output('目標id', '目標屬性'), 執行時的值, 未執行時的值],
    ...
]

　　舉個簡單的例子，針對fac中的開關元件AntdSwitch，假如其每次被使用者點選進行狀態切換後，都會在對應回撥函式中執行具有一定耗時的計算過程，那麼配合running引數，我們就可以快捷實現當回撥執行時，開關呈現載入中狀態：

Dash 2.16版本新特性介紹

app1.py

import time
import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdSwitch(
            id='switch-demo',
            checked=False
        ),
        html.Div(id='message-container')
    ],
    style={
        'padding': 50
    }
)

@app.callback(
    Output('message-container', 'children'),
    Input('switch-demo', 'checked'),
    running=[
        [Output('switch-demo', 'loading'), True, False]
    ],
    prevent_initial_call=True
)
def switch_demo(checked):

    time.sleep(1)

    return fac.AntdMessage(
        content='已開啟' if checked else '已關閉',
        type='success'
    )

if __name__ == '__main__':
    app.run(debug=False)

2 瀏覽器端回撥新增set_props()方法

　　在過去的版本中，我們如果需要透過回撥函式對目標元件的相應屬性值進行更新，需要在編寫回撥函式時提前書寫編排好相應的角色，而從2.16版本開始，Dash針對瀏覽器端回撥，新增了set_props()方法，其第一個引數用於定義目標元件id，第二個引數用於定義針對目標元件需要更新的屬性字典。

　　基於這個特性，我們可以在日常編寫回撥邏輯的過程中，進行很多技巧性的靈活操作，譬如，在下面的例子中，每次點選按鈕，都會批次更新下方各個區塊的內容和字型大小：

Dash 2.16版本新特性介紹

　　對應原始碼如下，可以看到其中對應的瀏覽器端回撥函式編排中無需編排相應區塊角色，均在函式體中基於set_props()實現：

app2.py

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

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdButton(
            '點我',
            id='trigger-demo',
            type='primary'
        ),
        fac.AntdRow(
            [
                fac.AntdCol(
                    fac.AntdCenter(
                        id=f'demo-block{i+1}'
                    ),
                    span=4,
                    style={
                        'padding': 5
                    }
                )
                for i in range(30)
            ]
        )
    ],
    style={
        'padding': 50
    }
)

app.clientside_callback(
    '''(nClicks) => {
        // 內部自由批次更新其他目標屬性
        for ( let i = 1; i <= 30; i++ ) {
            // 呼叫set_props()
            window.dash_clientside.set_props(
                `demo-block${i}`,
                {
                    children: `nClicks: ${nClicks || 0}`,
                    style: {
                        height: 100,
                        background: '#262626',
                        color: 'white',
                        borderRadius: 4,
                        fontSize: Math.min(14 + nClicks, 24)
                    }
                }
            )
        }

        return window.dash_clientside.no_update;
    }''',
    Output('trigger-demo', 'id'),
    Input('trigger-demo', 'nClicks')
)

if __name__ == '__main__':
    app.run(debug=False)

　　最騷的是，set_props()的使用不限於瀏覽器端回撥內部，譬如我們直接在瀏覽器控制檯中就可以呼叫進行更新：

Dash 2.16版本新特性介紹

　　這意味著從此之後，Dash可以不依賴具體的回撥函式，與其他任意的javascript生態相通😎，譬如我們可以在原生Echarts的圖表事件監聽函式中直接操控Dash中的相關元件，這將極大程度上擴充Dash的靈活程度~

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

相關文章