Dash 2.16版本新特性介绍

添加微信号 CNFeffery 备注「dash学习」

即刻加入 dash 应用开发技术交流群

❝

本文示例代码已上传至我的 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
)
defswitch_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学习」加入我的技术交流群，一起成长一起进步。

扫描下方二维码加我好友备注 dash学习

即刻加入 dash 应用开发技术交流群