前端UI組件【免費下載鏈接】reactpyIts React, but in Python項目地址https://gitcode.com/gh_mirrors/re/reactpy點擊查看免費下載ReactPy 是一款用 Python 寫 React的 UI 框架它允許開發(fā)者完全在 Python 一側(cè)定義視圖結(jié)構(gòu)及其背后的數(shù)據(jù)與邏輯。本文以 Creating Interfaces 指南 為主線從零講解如何用reactpy.html在 Python 中構(gòu)建 HTML 布局、如何用component裝飾器定義可復(fù)用組件以及如何基于集合數(shù)據(jù)動態(tài)渲染并借助key正確組織元素——讀完即可動手寫出第一個可運行的 ReactPy 界面。背景為什么要在 Python 中構(gòu)建界面在典型的 Python Web 應(yīng)用中定義視圖與承載數(shù)據(jù)與邏輯這兩項職責(zé)通常被拆分在客戶端與服務(wù)器兩側(cè)后端輸出模板或 API前端負(fù)責(zé)渲染與交互。ReactPy 將這兩件事集中到同一個地方——直接在 Python 里用函數(shù)調(diào)用構(gòu)造 HTML 界面。這一設(shè)計的基礎(chǔ)就是允許開發(fā)者用 Python 語法而非模板字符串或 JSX描述 HTML 結(jié)構(gòu)。以文檔開篇的待辦清單為例標(biāo)準(zhǔn) HTML 寫作如下h1My Todo List/h1 ul liBuild a cool new app/li liShare it with the world!/li /ul在 ReactPy 中同樣的布局用reactpy.html模塊內(nèi)的函數(shù)復(fù)現(xiàn)from reactpy import html html.h1(My Todo List) html.ul( html.li(Build a cool new app), html.li(Share it with the world!), )可以看出reactpy.html中的每個函數(shù)都與對應(yīng)的 HTML 標(biāo)簽同名h1/對應(yīng)html.h1ul對應(yīng)html.ulli對應(yīng)html.li。函數(shù)嵌套的調(diào)用結(jié)構(gòu)天然映射了標(biāo)簽的父子層級。注意只調(diào)用這些函數(shù)還不夠。上面的代碼沒有把返回值保存下來因此無法被渲染。要把整塊布局變成一個可用的 UI需要用一個html.div包裹并賦值給變量layout html.div( html.h1(My Todo List), html.ul( html.li(Build a cool new app), html.li(Share it with the world!), ), )給元素添加 HTML 屬性AttributesHTML 不只是文本元素往往還需要屬性。以img圖片元素為例標(biāo)準(zhǔn) HTML 會這樣指定圖片來源、樣式、替代文本等img srchttps://picsum.photos/id/237/500/300 classimg-fluid stylewidth: 50%; margin-left: 25%; altBillie Holiday tabindex0 /ReactPy 中這些屬性通過一個字典傳給元素函數(shù)html.img( { src: https://picsum.photos/id/237/500/300, class_name: img-fluid, style: {width: 50%, margin_left: 25%}, alt: Billie Holiday, } )兩者之間有三點關(guān)鍵差異這也是 HTML 與 ReactPy 章節(jié) 強調(diào)的核心規(guī)則命名風(fēng)格ReactPy 中的所有屬性名使用snake_case而不是 HTML 的連字符分隔寫法。例如tabindex寫作tab_indexmargin-left寫作margin_left。樣式用字典style屬性不再使用字符串而是用一個字典描述 CSS 屬性如{width: 50%, margin_left: 25%}。這樣避免了在字符串中轉(zhuǎn)義引號和其他特殊字符的麻煩。class 改名HTML 的class屬性在 ReactPy 中改為class_name以避免與 Python 的class關(guān)鍵字沖突。完整的受支持屬性列表及與 HTML 的差異參見 HTML 屬性參考。關(guān)于 ReactPy 內(nèi)部如何用數(shù)據(jù)結(jié)構(gòu)表示 HTML可進一步閱讀 表示 HTML。組件把 UI 元素組合成可復(fù)用積木隨著文檔結(jié)構(gòu)變大變復(fù)雜直接操作這些細粒度 UI 元素會變得難以維護。ReactPy 允許把這些元素分組為組件components組件可以在整個應(yīng)用中反復(fù)使用。定義組件component裝飾器組件本質(zhì)上就是返回 HTML 的普通 Python 函數(shù)。唯一的特殊之處在于定義組件需要給函數(shù)加上component裝飾器。被裝飾的函數(shù)被稱為渲染函數(shù)render function按慣例使用CamelCase命名與類命名一致。以文檔中的Photo組件為例from reactpy import component, html, run component def Photo(): return html.img( { src: https://picsum.photos/id/237/500/300, style: {width: 50%}, alt: Puppy, } ) run(Photo)完整示例見 simple_photo.py。末尾的run(Photo)會在本地啟動服務(wù)器并渲染該組件相關(guān)運行方式詳見 運行 ReactPy。警告如果忘記給Photo的渲染函數(shù)加上component裝飾器服務(wù)器仍能正常啟動但一旦訪問頁面就會是空白服務(wù)端日志會報錯TypeError: Expected a ComponentType, not dict.組件嵌套與復(fù)用組件定義一次后可以被任意嵌套進其他組件。下面定義一個父級Gallery組件它返回多個Photo組件——這正是組件的威力所在一次定義處處復(fù)用見 nested_photos.pyfrom reactpy import component, html, run component def Photo(): return html.img( { src: https://picsum.photos/id/274/500/300, style: {width: 30%}, alt: Ray Charles, } ) component def Gallery(): return html.section( html.h1(Famous Musicians), Photo(), Photo(), Photo(), ) run(Gallery)返回單一根元素組件必須返回一個單一根元素。這個根元素可以有自己的子元素但你不能從一個組件里直接返回一個元素列表并指望它被正確渲染。如果需要返回多個元素必須用類似html.div的東西把它們包起來見 wrap_in_div.pycomponent def MyTodoList(): return html.div( html.h1(My Todo List), html.img({src: https://picsum.photos/id/0/500/300}), html.ul(html.li(The first thing I need to do is...)), )如果不想為了包裹而額外引入一個div可以使用片段fragment——即html._函數(shù)見 wrap_in_fragment.py。片段可以分組元素但不會在 UI 中留下任何痕跡。component def MyTodoList(): return html._( html.h1(My Todo List), html.img({src: https://picsum.photos/id/0/500/200}), html.ul(html.li(The first thing I need to do is...)), )例如下面的 ReactPy 代碼from reactpy import html html.ul( html._( html.li(Group 1 Item 1), html.li(Group 1 Item 2), html.li(Group 1 Item 3), ), html._( html.li(Group 2 Item 1), html.li(Group 2 Item 2), html.li(Group 2 Item 3), ) )渲染后得到的 HTML 中不會出現(xiàn)任何額外的包裹節(jié)點ul liGroup 1 Item 1/li liGroup 1 Item 2/li liGroup 1 Item 3/li liGroup 2 Item 1/li liGroup 2 Item 2/li liGroup 2 Item 3/li /ul組件參數(shù)化組件既然是普通函數(shù)自然可以接收參數(shù)讓父組件把信息傳給子組件。與標(biāo)準(zhǔn) HTML 元素用字典傳參不同組件像普通函數(shù)一樣接受位置參數(shù)和關(guān)鍵字參數(shù)。見 parametrized_photos.pyfrom reactpy import component, html, run component def Photo(alt_text, image_id): return html.img( { src: fhttps://picsum.photos/id/{image_id}/500/200, style: {width: 50%}, alt: alt_text, } ) component def Gallery(): return html.section( html.h1(Photo Gallery), Photo(Landscape, image_id830), Photo(City, image_id274), Photo(Puppy, image_id237), ) run(Gallery)條件渲染用if與內(nèi)聯(lián)表達式切換 UI組件經(jīng)常需要依據(jù)不同條件展示不同內(nèi)容?？紤]一個待辦清單其中只有部分條目已完成?；A(chǔ)實現(xiàn)如下見 todo_list.pyItem組件并沒有根據(jù)done改變外觀component def Item(name, done): return html.li(name) component def TodoList(): return html.section( html.h1(My Todo List), html.ul( Item(Find a cool problem to solve, doneTrue), Item(Build an app to solve it, doneTrue), Item(Share that app with the world!, doneFalse), ), )假如想給doneTrue的條目加上 ? 標(biāo)記一種方式是用if語句條目完成時返回一種li未完成時返回另一種見 bad_conditional_todo_list.pycomponent def Item(name, done): if done: return html.li(name, ?) else: return html.li(name)這個寫法能達成目的但html.li(name, ?)與html.li(name)高度相似分支重復(fù)。更簡潔、更易維護的做法是使用內(nèi)聯(lián)if表達式三元表達式見 good_conditional_todo_list.pycomponent def Item(name, done): return html.li(name, ? if done else )渲染數(shù)據(jù)從集合生成 UI 元素實際開發(fā)中經(jīng)常需要根據(jù)一批數(shù)據(jù)構(gòu)造大量相似的元素。文檔以可按優(yōu)先級排序與過濾的待辦清單為例展開。目標(biāo)視圖形如ul liMake breakfast (important)/li liFeed the dog (important)/li liDo laundry/li liGo on a run (important)/li liClean the house/li liGo to the grocery store/li liDo some coding/li liRead a book (important)/li /ul從列表渲染元素最直接的做法是把每個li的文本放進一個 Python 列表tasks [ Make breakfast (important), Feed the dog (important), Do laundry, Go on a run (important), Clean the house, Go to the grocery store, Do some coding, Read a book (important), ]然后用列表推導(dǎo)式把這個列表渲染成一串li元素再整體傳入父級ulfrom reactpy import html list_item_elements [html.li(text) for text in tasks] list_element html.ul(list_item_elements)最后把結(jié)果放進組件返回見 todo_from_list.pyfrom reactpy import component, html, run component def DataList(items): list_item_elements [html.li(text) for text in items] return html.ul(list_item_elements) component def TodoList(): tasks [ Make breakfast (important), Feed the dog (important), Do laundry, Go on a run (important), Clean the house, Go to the grocery store, Do some coding, Read a book (important), ] return html.section( html.h1(My Todo List), DataList(tasks), ) run(TodoList)過濾與排序元素僅用文本字符串列表無法表達優(yōu)先級這一排序/過濾維度因此需要把數(shù)據(jù)結(jié)構(gòu)升級為字典列表tasks [ {text: Make breakfast, priority: 0}, {text: Feed the dog, priority: 0}, {text: Do laundry, priority: 2}, {text: Go on a run, priority: 1}, {text: Clean the house, priority: 2}, {text: Go to the grocery store, priority: 2}, {text: Do some coding, priority: 1}, {text: Read a book, priority: 1}, ]接著可以用 Python 內(nèi)置的filter思路此處用列表推導(dǎo)式和sorted實現(xiàn)過濾與排序只顯示priority不大于某個filter_by_priority的條目并按priority排序filter_by_priority 1 sort_by_priority True filtered_tasks tasks if filter_by_priority is not None: filtered_tasks [t for t in filtered_tasks if t[priority] filter_by_priority] if sort_by_priority: filtered_tasks list(sorted(filtered_tasks, keylambda t: t[priority]))filter_by_priority1、sort_by_priorityTrue時過濾排序后的結(jié)果應(yīng)為[ {text: Make breakfast, priority: 0}, {text: Feed the dog, priority: 0}, {text: Go on a run, priority: 1}, {text: Do some coding, priority: 1}, {text: Read a book, priority: 1}, ]把這些邏輯并入DataList組件見 sorted_and_filtered_todo_list.pycomponent def DataList(items, filter_by_priorityNone, sort_by_priorityFalse): if filter_by_priority is not None: items [i for i in items if i[priority] filter_by_priority] if sort_by_priority: items sorted(items, keylambda i: i[priority]) list_item_elements [html.li(i[text]) for i in items] return html.ul(list_item_elements)警告上面的代碼會產(chǎn)生大量警告日志原因是列表中的元素缺少key請閱讀下一節(jié)了解原因與解決辦法。用 Key 組織列表項以調(diào)試模式運行上面的示例參見 以 Debug 模式運行 ReactPy時服務(wù)端會輸出類似如下的報錯Key not specified for child in list {tagName: li, children: ...}這表明列表中的每個待辦條目沒有指定唯一的key。要消除警告需要進一步擴展數(shù)據(jù)結(jié)構(gòu)為每個條目添加唯一 IDtasks [ {id: 0, text: Make breakfast, priority: 0}, {id: 1, text: Feed the dog, priority: 0}, {id: 2, text: Do laundry, priority: 2}, {id: 3, text: Go on a run, priority: 1}, {id: 4, text: Clean the house, priority: 2}, {id: 5, text: Go to the grocery store, priority: 2}, {id: 6, text: Do some coding, priority: 1}, {id: 7, text: Read a book, priority: 1}, ]然后在構(gòu)造li元素時聲明key屬性list_item_elements [html.li({key: t[id]}, t[text]) for t in tasks]這個key告訴 ReactPy列表中的哪個li對應(yīng)tasks數(shù)據(jù)中的哪一項。當(dāng)列表的順序或條目數(shù)量可能變化時例如切換filter_by_priority或sort_by_prioritykey就至關(guān)重要。完整改造后的組件見 todo_list_with_keys.pycomponent def DataList(items, filter_by_priorityNone, sort_by_priorityFalse): if filter_by_priority is not None: items [i for i in items if i[priority] filter_by_priority] if sort_by_priority: items sorted(items, keylambda i: i[priority]) list_item_elements [html.li({key: i[id]}, i[text]) for i in items] return html.ul(list_item_elements)組件同樣需要 Key到目前為止討論的都是標(biāo)準(zhǔn) HTML 元素的key但該原則同樣適用于組件。所有被component裝飾的函數(shù)都會自動獲得一個key參數(shù)其作用與標(biāo)準(zhǔn) HTML 元素完全一致from reactpy import component component def ListItem(text): return html.li(text) tasks [ {id: 0, text: Make breakfast}, {id: 1, text: Feed the dog}, {id: 2, text: Do laundry}, {id: 3, text: Go on a run}, {id: 4, text: Clean the house}, {id: 5, text: Go to the grocery store}, {id: 6, text: Do some coding}, {id: 7, text: Read a book}, ] list_element [ListItem(t[text], keyt[id]) for t in tasks]警告key參數(shù)是保留參數(shù)。如果定義的組件渲染函數(shù)本身帶有名為key的參數(shù)會直接報錯Traceback (most recent call last): ... TypeError: Component render function ... uses reserved parameter keyKey 的使用規(guī)則為避免渲染數(shù)據(jù)時出現(xiàn)意外行為必須遵守以下幾條規(guī)則確保每條數(shù)據(jù)始終與正確的 UI 元素對應(yīng)1. 非兄弟元素可以使用相同的 key如果兩個元素在 UI 中擁有不同的父級它們可以使用相同的 keydata_1 [ {id: 1, text: Something}, {id: 2, text: Something else}, ] data_2 [ {id: 1, text: Another thing}, {id: 2, text: Yet another thing}, ] html.section( html.ul([html.li(data[text], keydata[id]) for data in data_1]), html.ul([html.li(data[text], keydata[id]) for data in data_2]), )2. 兄弟元素之間的 key 必須唯一data [ {id: 1, text: Something}, {id: 2, text: Something else}, {id: 1, text: Another thing}, # BAD: has a duplicated id {id: 2, text: Yet another thing}, # BAD: has a duplicated id ] html.section( html.ul([html.li(data[text], keydata[id]) for data in data]), )3. key 必須與數(shù)據(jù)綁定固定不要為了消除警告而給 key 生成隨機值否則會導(dǎo)致意外行為from random import random data [ {id: random(), text: Something}, {id: random(), text: Something else}, {id: random(), text: Another thing}, {id: random(), text: Yet another thing}, ] html.section( html.ul([html.li(data[text], keydata[id]) for data in data]), )如何挑選 key 的值前面的示例數(shù)據(jù)量小手動添加id即可。但實際開發(fā)中往往要面對已存在的數(shù)據(jù)此時該如何選 key數(shù)據(jù)來自數(shù)據(jù)庫直接使用數(shù)據(jù)庫生成的鍵和 ID它們天然唯一。例如關(guān)系數(shù)據(jù)庫記錄的主鍵。數(shù)據(jù)在本地生成并持久化如筆記應(yīng)用中的筆記創(chuàng)建條目時使用自增計數(shù)器或標(biāo)準(zhǔn)庫的uuid模塊。想深入了解 key 的必要性可閱讀 為什么 ReactPy 需要 key。小結(jié)與下一步至此你已經(jīng)掌握了 ReactPy 構(gòu)建界面的三大支柱HTML with ReactPy用reactpy.html中與 HTML 標(biāo)簽同名的函數(shù)在 Python 中構(gòu)造布局通過字典設(shè)置屬性snake_case命名、style用字典、class改為class_nameYour First Components用component裝飾普通函數(shù)定義可復(fù)用組件組件可嵌套、可參數(shù)化、必須返回單一根元素必要時用html._片段包裹并可用if/內(nèi)聯(lián)表達式做條件渲染Rendering Data用列表推導(dǎo)式從數(shù)據(jù)集合渲染元素通過filter/sorted邏輯過濾排序并用key將數(shù)據(jù)與 UI 元素穩(wěn)定綁定兄弟元素間唯一、與數(shù)據(jù)固定對應(yīng)。完成這些基礎(chǔ)之后就可以進入下一步——添加交互Adding Interactivity讓靜態(tài)界面響應(yīng)事件、管理狀態(tài)。三個子章節(jié)的完整路線圖見 Creating Interfaces 總覽對應(yīng)參考實現(xiàn)位于 reference/_examples 下的各類可運行示例如 click_count.py 與 todo.py。贊分享前端UI組件【免費下載鏈接】reactpyIts React, but in Python項目地址https://gitcode.com/gh_mirrors/re/reactpy點擊查看免費下載相關(guān)推薦faster-whisper 如何上手一條命令裝好 4 倍速的語音轉(zhuǎn)文字引擎faster whisper 如何上手一條命令裝好 4 倍速的語音轉(zhuǎn)文字引擎 faster whisper 是 OpenAI 語音識別模型 Whisper 的人工智能語音音頻本地部署ReactPy中的服務(wù)端組件開發(fā)創(chuàng)建服務(wù)器渲染組件ReactPy中的服務(wù)端組件開發(fā)創(chuàng)建服務(wù)器渲染組件 你是否在尋找一種方式能夠用Python編寫高效的Web界面同時享受React的組件化開發(fā)體驗Reac前端UI組件ReactPy用Python構(gòu)建用戶界面的利器ReactPy用Python構(gòu)建用戶界面的利器 ReactPy 是一個開源項目旨在使用 Python 語言來構(gòu)建用戶界面無需依賴 JavaScript。該前端UI組件上一篇Zappa與AWS Translate多語言翻譯無服務(wù)器應(yīng)用開發(fā)下一篇JTS 距離計算高級技巧從平面距離到 Hausdorff 相似度度量創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考