前言

OpenTiny?開(kāi)源之夏項(xiàng)目終于迎來(lái)了圓滿的結(jié)局。借此機(jī)會(huì)，我們采訪了 TinyReact 的共建者 Mr 棟同學(xué)。
Mr?棟同學(xué)是一位熱衷于前端技術(shù)的開(kāi)發(fā)者，對(duì)前端開(kāi)發(fā)充滿了激情和熱愛(ài)。同時(shí)他也是一位即將畢業(yè)的大四在校生。在?OpenTiny?開(kāi)源項(xiàng)目中，他積極參與，為社區(qū)貢獻(xiàn)了自己的力量。
接下來(lái)，讓我們一起走進(jìn)Mr?棟同學(xué)的世界，了解他的編程之旅以及在 OpenTiny 開(kāi)源之夏項(xiàng)目中的收獲和成長(zhǎng)。

專(zhuān)訪詳情

OpenTiny：?很高興認(rèn)識(shí)你，歡迎你加入咱們?OpenTiny?開(kāi)源社區(qū)，可以先簡(jiǎn)單介紹下你自己?jiǎn)幔?br>Mr 棟：?大家好，我是Mr?棟，我在?OpenTiny?開(kāi)源社區(qū)主要做的項(xiàng)目是基于 renderless 實(shí)現(xiàn) TinyReact 版本。目前是一位即將畢業(yè)的大四學(xué)生，主要是從大二開(kāi)始了解并參與開(kāi)源項(xiàng)目，之前2022年的時(shí)候有參與過(guò)百度的一個(gè)開(kāi)源項(xiàng)目，主要是做漏斗圖能力的一個(gè)增強(qiáng)。所以2023年，我也通過(guò)參與一些開(kāi)源項(xiàng)目的共建，讓我的簡(jiǎn)歷更加豐富。

OpenTiny：?你是從什么時(shí)候開(kāi)始接觸開(kāi)源社區(qū)的，你眼中的開(kāi)源是什么樣的？
Mr?棟：?我主要是大二的時(shí)候接觸到開(kāi)源社區(qū)的，之前也是由同學(xué)推薦，然后有了解到開(kāi)源之夏的宣講。然后我覺(jué)得開(kāi)源的話，首先就是它是一個(gè)比較開(kāi)放的，由一個(gè)一個(gè)社區(qū)組成，然后就是在開(kāi)源社區(qū)中有很多優(yōu)秀的就是志同道合的開(kāi)發(fā)者，其次就是這個(gè)項(xiàng)目的話它是面向互聯(lián)網(wǎng)的，任何一個(gè)開(kāi)發(fā)者都可以參與進(jìn)來(lái)，就只要你對(duì)項(xiàng)目感興趣，就可以投入進(jìn)來(lái)。而且我覺(jué)得一個(gè)好的開(kāi)源項(xiàng)目，可以讓開(kāi)發(fā)者通過(guò)小小的門(mén)檻就可以參與到貢獻(xiàn)中去，學(xué)習(xí)門(mén)檻比較低，特別是文檔這一塊的建設(shè)，這個(gè)可能需要前期花比較大的精力和成本做好文檔建設(shè)這部分內(nèi)容。當(dāng)然我覺(jué)得一個(gè)好的開(kāi)源的話，開(kāi)源的產(chǎn)物或者項(xiàng)目是可以提高大家的生產(chǎn)效率的，就是它可以受歡迎的并被大家去使用，而且大家也可以從這個(gè)開(kāi)源項(xiàng)目中得到一些開(kāi)發(fā)上的啟示，我覺(jué)得這也是開(kāi)源的一個(gè)意義，或者可以通過(guò)開(kāi)源去認(rèn)識(shí)其他的一些優(yōu)秀的開(kāi)發(fā)者同學(xué)。

OpenTiny：?最開(kāi)始是如何了解到并決定參與?OpenTiny?開(kāi)源之夏活動(dòng)的？
Mr?棟：?因?yàn)槲覐拇髮W(xué)剛開(kāi)始，就是選擇的前端技術(shù)這個(gè)領(lǐng)域，然后就一直學(xué)習(xí)下去，也沒(méi)有想過(guò)再去學(xué)習(xí)其他技術(shù)棧，因?yàn)槲矣X(jué)得先把一個(gè)方向做好，基礎(chǔ)打好，比較重要。最開(kāi)始是我舍友給我介紹了有開(kāi)源之夏這個(gè)活動(dòng)，然后我認(rèn)為前端的開(kāi)源分為兩種，一種是給后端比如 ChatGpt 或者后端的 K8s 寫(xiě)一個(gè) UI 界面或者測(cè)試工具，這種類(lèi)似于業(yè)務(wù)性的內(nèi)容，然后我更喜歡偏技術(shù)性的內(nèi)容，然后我在很多項(xiàng)目中看到?OpenTiny?的項(xiàng)目?jī)?nèi)容是比較符合我的預(yù)期，并且 OpenTiny 這個(gè)項(xiàng)目本身就是服務(wù)于前端開(kāi)發(fā)者，它是一整套前端解決方案。

OpenTiny：?那你在共建了?OpenTiny?項(xiàng)目之后，你覺(jué)得 OpenTiny 是什么？
Mr?棟：?就我理解的話，我覺(jué)得 OpenTiny 是一個(gè)視野比較開(kāi)闊的，涵蓋的領(lǐng)域比較多，兼容的技術(shù)棧也比較多，除了有?TinyVue?組件庫(kù)，還有 Angular 技術(shù)棧的 TinyNG 組件庫(kù)，還有腳手架工具，以及中后臺(tái)模板并且還有低代碼引擎，能夠覆蓋前端開(kāi)發(fā)的整個(gè)鏈路。我覺(jué)得這個(gè)是 OpenTiny 比較 open 的地方。

OpenTiny：?那你當(dāng)時(shí)在選擇?OpenTiny?的幾個(gè)項(xiàng)目時(shí)，為什么會(huì)選擇“基于 Renderless 實(shí)現(xiàn) react 版本組件庫(kù)“這個(gè)項(xiàng)目呢？因?yàn)檫@個(gè)項(xiàng)目的難度還是相對(duì)于其他的技術(shù)性難度會(huì)高一些
Mr?棟：?哈哈 這個(gè)說(shuō)實(shí)話可能是有點(diǎn)陰差陽(yáng)錯(cuò)的成分，因?yàn)楫?dāng)時(shí)我對(duì)于這個(gè)題目的認(rèn)知有一些偏差，我開(kāi)始以為是 React 的基礎(chǔ)上仿照 Vue 的 Renderless，可以新起一個(gè)架構(gòu)，當(dāng)時(shí)沒(méi)有理解復(fù)用 Renerless,所以有點(diǎn)低估這個(gè)題目的難度了。不過(guò)通過(guò)這個(gè)項(xiàng)目的搭建，也讓我對(duì) Renderless 無(wú)渲染架構(gòu)有了更深的理解。

OpenTiny：?你可以介紹下你參與 OpenTiny 項(xiàng)目的開(kāi)發(fā)的內(nèi)容及過(guò)程嗎？
Mr?棟：?首先我們主要是完成的一個(gè)工作就是通過(guò) Renderless 無(wú)渲染設(shè)計(jì)架構(gòu)實(shí)現(xiàn) TinyReact 的組件庫(kù)。由于?OpenTiny?的?TinyVue?這個(gè)組件庫(kù)之前是基于 Vue 版本，之前是已經(jīng)做完了跨版本的工作，可以實(shí)現(xiàn)一套代碼同時(shí)支持 Vue2/Vue3，現(xiàn)在它想要去拓展到 React 框架,這就是技術(shù)棧的框架層面的拓展.由于是可以復(fù)用之前?TinyVue?組件庫(kù)的核心邏輯代碼，所以就是需要從 React 到 Vue 的核心邏輯代碼之間做一個(gè)適配層去接入，將組件的各個(gè)層面都單獨(dú)拆分為?個(gè)獨(dú)?的部分，?如?個(gè)組件可能由以下?個(gè)層組成：從入口出發(fā)，分別是 模版層、樣式層、適配層、邏輯層。

那我們要實(shí)現(xiàn) TinyReact 版本的組件庫(kù)，就是嘗試按照以下思路來(lái)進(jìn)行。
首先，我們可以分析?件的依賴關(guān)系。

觀察可以發(fā)現(xiàn)，renderless 只有導(dǎo)?了組件邏輯?錄的 index，index ?主要是組件邏輯處理的相關(guān)函數(shù)，而 renderless 函數(shù)在模版?是這樣調(diào)?的：

也就是說(shuō)，useSetup 幫助模版調(diào)?了 renderless 函數(shù)，renderless 函數(shù)中的所有依賴，都應(yīng)該由 useSetup 來(lái)提供。useSetup 也就是 react-common 中，也就是 react 適配層中最主要的函數(shù)。
vue 的 renderless 只會(huì)執(zhí)??次，react 組件的渲染函數(shù)每次狀態(tài)刷新都會(huì)執(zhí)?。因此，可以給 react 設(shè)計(jì)?個(gè)刷新區(qū)和掛載區(qū)。

可以在掛載區(qū)執(zhí)行 renderless 函數(shù)，刷新區(qū)去注冊(cè)回調(diào)。再來(lái)看看如何在 react 中實(shí)現(xiàn)深層數(shù)據(jù)響應(yīng)式：

這是?個(gè)框架無(wú)關(guān)的響應(yīng)式函數(shù)，可以對(duì)?個(gè)對(duì)象進(jìn)?監(jiān)聽(tīng)，返回代理對(duì)象，最主要的是深層響應(yīng)式的遞歸代理，在 get、set 的時(shí)候都會(huì)觸發(fā)回調(diào)，在這個(gè)深層響應(yīng)式函數(shù)的基礎(chǔ)上去綁定 react 刷新函數(shù)，就會(huì)在 react 側(cè)實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式。
我們分析完成之后就可以在此基礎(chǔ)上進(jìn)行開(kāi)發(fā)了，然后就明確了項(xiàng)目的需求，確定當(dāng)前版本最基礎(chǔ)最先需要實(shí)現(xiàn)的模塊，再進(jìn)行拆解任務(wù)，實(shí)現(xiàn)組件的功能，并與導(dǎo)師進(jìn)行探討，最后完成了整體的開(kāi)發(fā)。

OpenTiny：?在開(kāi)發(fā)過(guò)程中有遇到什么困難或者挑戰(zhàn)嗎？你是如何克服的呢？導(dǎo)師和社區(qū)成員有為你提供幫助嗎？
Mr?棟：?在完成這個(gè)項(xiàng)目時(shí)，確實(shí)有遇到一些問(wèn)題，就是 Vue 和 React 兩個(gè)框架之間，從設(shè)計(jì)層面就是有一些差異的，從使用者的角度來(lái)看，也是兩種不同風(fēng)格的框架，所以為了減少后續(xù)復(fù)用的開(kāi)發(fā)成本就需要抹平一些使用上的差異，比如組件更新，每次更新都會(huì)去重新渲染組件，以及函數(shù)組件內(nèi)部的邏輯。
首先我是通過(guò)不斷嘗試寫(xiě)一些 demo，通過(guò)各種各樣的 demo 去嘗試接入并運(yùn)行，先去設(shè)想一個(gè)可行性的方法，然后去實(shí)踐它，并且向?qū)熢儐?wèn)這個(gè)方法是否有缺陷，在這個(gè)過(guò)程中，老師也是指出了我的一些缺陷，比如我在刷新 React 鉤子時(shí)，得通過(guò)設(shè)置數(shù)據(jù)類(lèi)型的一個(gè)狀態(tài)，而不是布爾類(lèi)型的一個(gè)狀態(tài)。如果是布爾類(lèi)型刷新基數(shù)次時(shí)，組件就不會(huì)觸發(fā)刷新，這些都是在開(kāi)發(fā)過(guò)程中的一些細(xì)節(jié)點(diǎn)。

OpenTiny：?你認(rèn)為在開(kāi)發(fā)?OpenTiny?項(xiàng)目的過(guò)程中，最有意思的地方是什么？
Mr?棟：?我認(rèn)為比較有意思的點(diǎn)在于在 Vue 的響應(yīng)式的概念，因?yàn)閮蓚€(gè)都是非常優(yōu)秀的前端框架，而我們可以通過(guò)一些優(yōu)缺點(diǎn)的對(duì)比了解哪個(gè)框架更適合哪些情況，哪種業(yè)務(wù)場(chǎng)景。

OpenTiny：?你參與了?OpenTiny?項(xiàng)目共建之后，你覺(jué)得你有什么收獲呢？
Mr?棟：?參加完咱們這個(gè)項(xiàng)目之后，我覺(jué)得最大的收獲就是對(duì)前端的框架有了更深的了解，還有就是對(duì)整個(gè)組件庫(kù)的開(kāi)發(fā)鏈接有了更進(jìn)一步的了解，從構(gòu)建、打包、發(fā)布整套流程，從而也知道了市面上的組件庫(kù)是如何運(yùn)作的。

OpenTiny：?根據(jù)你的經(jīng)驗(yàn)，你覺(jué)得怎樣才能更好的融入開(kāi)源社區(qū)呢？
Mr?棟：?融入開(kāi)源社區(qū)，我覺(jué)得首先需要對(duì)自己有一個(gè)定位，可以完成哪些工作，勝任哪些工作，哪些方面還需要提升，對(duì)哪個(gè)方面更感興趣。比如說(shuō)有些開(kāi)發(fā)者可能對(duì)打包構(gòu)建這方面更感興趣，就可以完美的去打包構(gòu)建一個(gè)組件庫(kù)的一整個(gè)產(chǎn)物。其次的話，如果想要更好的參與貢獻(xiàn)也需要有耐心，首先過(guò)一遍在開(kāi)發(fā)過(guò)程中用到的開(kāi)發(fā)文檔或者貢獻(xiàn)文檔，然后按照社區(qū)的規(guī)范去做一些事情。然后社區(qū)這邊想要更多開(kāi)發(fā)者參與進(jìn)來(lái)，對(duì)于每個(gè)模塊的開(kāi)發(fā)細(xì)節(jié)，需要做好明確的思路和分工。需要明確從上游到下游的整個(gè)的開(kāi)發(fā)鏈路，以便于開(kāi)發(fā)者可以更好的參與到組件庫(kù)建設(shè)的每個(gè)環(huán)節(jié)中去。

關(guān)于 OpenTiny

OpenTiny?是一套企業(yè)級(jí) Web 前端開(kāi)發(fā)解決方案，提供跨端、跨框架的UI組件庫(kù)，適配 PC 端 / 移動(dòng)端等多端，支持 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有靈活擴(kuò)展的低代碼引擎，包含主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等豐富的效率提升工具，可幫助開(kāi)發(fā)者高效開(kāi)發(fā) Web 應(yīng)用。

歡迎加入?OpenTiny 開(kāi)源社區(qū)。添加微信小助手：opentiny-official 一起參與交流前端技術(shù)～更多視頻內(nèi)容也可關(guān)注B站、抖音、小紅書(shū)、視頻號(hào)

OpenTiny?也在持續(xù)招募貢獻(xiàn)者，歡迎一起共建

OpenTiny 官網(wǎng)：https://opentiny.design/

OpenTiny 代碼倉(cāng)庫(kù)：https://github.com/opentiny/

TinyVue 源碼：https://github.com/opentiny/tiny-vue

TinyEngine 源碼：?https://github.com/opentiny/tiny-engine

歡迎進(jìn)入代碼倉(cāng)庫(kù) Star??TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以進(jìn)入代碼倉(cāng)庫(kù)，找到?good first issue標(biāo)簽，一起參與開(kāi)源貢獻(xiàn)~