Dash 2.16版本新特性介绍

本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/dash-master

大家好我是费老师，几天前Dash发布了其2.16.0版本，随后在修复了一些潜在问题后，于今天发布了可稳定使用的2.16.1版本，执行下面的命令进行最新版本Dash的安装：

pip install dash -U

2.16版本中为我们带来了多项强大的新功能，进一步提升了Dash应用开发的效率和灵活性，下面我们就来一起get其中的重点😉：

1 常规回调新增running参数

新版本中为常规的回调函数新增了running参数，使得我们可以针对若干个Output目标属性，快捷定义其在当前回调函数运行中 及未运行状态下分别的属性值，参数格式如下：

running=[
    [Output('目标id', '目标属性'), 运行时的值, 未运行时的值],
    ...
]

举个简单的例子，针对fac中的开关组件AntdSwitch，假如其每次被用户点击进行状态切换后，都会在对应回调函数中执行具有一定耗时 的计算过程，那么配合running参数，我们就可以快捷实现当回调运行时，开关呈现加载中状态：
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，第二个参数用于定义针对目标组件需要更新的属性字典。

基于这个特性，我们可以在日常编写回调逻辑的过程中，进行很多技巧性的灵活操作，譬如，在下面的例子中，每次点击按钮，都会批量更新下方各个区块的内容和字体大小：

对应源码如下，可以看到其中对应的浏览器端回调函数编排中无需编排相应区块角色，均在函数体中基于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可以不依赖具体的回调函数，与其他任意的javascript生态相通😎，譬如我们可以在原生Echarts的图表事件监听函数中直接操控Dash中的相关组件，这将极大程度上拓展Dash的灵活程度~

---

以上就是本文的全部内容，对Dash应用开发感兴趣的朋友，欢迎添加微信号CNFeffery，备注"dash学习"加入我的技术交流群，一起成长一起进步。