前言

OpenTiny 开源之夏项目终于迎来了圆满的结局。借此机会,我们采访了 TinyReact 的共建者 Mr 栋同学。
Mr 栋同学是一位热衷于前端技术的开发者,对前端开发充满了激情和热爱。同时他也是一位即将毕业的大四在校生。在 OpenTiny 开源项目中,他积极参与,为社区贡献了自己的力量。
接下来,让我们一起走进Mr 栋同学的世界,了解他的编程之旅以及在 OpenTiny 开源之夏项目中的收获和成长。

互联网科技大会宣传极简风横板海报__2023-11-13+11_24_02.png

专访详情

OpenTiny: 很高兴认识你,欢迎你加入咱们 OpenTiny 开源社区,可以先简单介绍下你自己吗?
Mr 栋: 大家好,我是Mr 栋,我在 OpenTiny 开源社区主要做的项目是基于 renderless 实现 TinyReact 版本。目前是一位即将毕业的大四学生,主要是从大二开始了解并参与开源项目,之前2022年的时候有参与过百度的一个开源项目,主要是做漏斗图能力的一个增强。所以2023年,我也通过参与一些开源项目的共建,让我的简历更加丰富。

OpenTiny: 你是从什么时候开始接触开源社区的,你眼中的开源是什么样的?
Mr 栋 我主要是大二的时候接触到开源社区的,之前也是由同学推荐,然后有了解到开源之夏的宣讲。然后我觉得开源的话,首先就是它是一个比较开放的,由一个一个社区组成,然后就是在开源社区中有很多优秀的就是志同道合的开发者,其次就是这个项目的话它是面向互联网的,任何一个开发者都可以参与进来,就只要你对项目感兴趣,就可以投入进来。而且我觉得一个好的开源项目,可以让开发者通过小小的门槛就可以参与到贡献中去,学习门槛比较低,特别是文档这一块的建设,这个可能需要前期花比较大的精力和成本做好文档建设这部分内容。当然我觉得一个好的开源的话,开源的产物或者项目是可以提高大家的生产效率的,就是它可以受欢迎的并被大家去使用,而且大家也可以从这个开源项目中得到一些开发上的启示,我觉得这也是开源的一个意义,或者可以通过开源去认识其他的一些优秀的开发者同学。

OpenTiny: 最开始是如何了解到并决定参与 OpenTiny 开源之夏活动的?
Mr 栋 因为我从大学刚开始,就是选择的前端技术这个领域,然后就一直学习下去,也没有想过再去学习其他技术栈,因为我觉得先把一个方向做好,基础打好,比较重要。最开始是我舍友给我介绍了有开源之夏这个活动,然后我认为前端的开源分为两种,一种是给后端比如 ChatGpt 或者后端的 K8s 写一个 UI 界面或者测试工具,这种类似于业务性的内容,然后我更喜欢偏技术性的内容,然后我在很多项目中看到 OpenTiny 的项目内容是比较符合我的预期,并且 OpenTiny 这个项目本身就是服务于前端开发者,它是一整套前端解决方案。

OpenTiny: 那你在共建了OpenTiny 项目之后,你觉得OpenTiny 是什么?
Mr 栋 就我理解的话,我觉得 OpenTiny 是一个视野比较开阔的,涵盖的领域比较多,兼容的技术栈也比较多,除了有 TinyVue 组件库,还有 Angular 技术栈的 TinyNG 组件库,还有脚手架工具,以及中后台模板并且还有低代码引擎,能够覆盖前端开发的整个链路。我觉得这个是 OpenTiny 比较 open 的地方。

OpenTiny: 那你当时在选择 OpenTiny 的几个项目时,为什么会选择“基于 Renderless 实现 react 版本组件库“这个项目呢?因为这个项目的难度还是相对于其他的技术性难度会高一些
Mr 栋 哈哈 这个说实话可能是有点阴差阳错的成分,因为当时我对于这个题目的认知有一些偏差,我开始以为是 React 的基础上仿照 Vue 的 Renderless,可以新起一个架构,当时没有理解复用 Renerless,所以有点低估这个题目的难度了。不过通过这个项目的搭建,也让我对 Renderless 无渲染架构有了更深的理解。

OpenTiny: 你可以介绍下你参与 OpenTiny 项目的开发的内容及过程吗?
Mr 栋 首先我们主要是完成的一个工作就是通过 Renderless 无渲染设计架构实现 TinyReact 的组件库。由于 OpenTiny TinyVue 这个组件库之前是基于 Vue 版本,之前是已经做完了跨版本的工作,可以实现一套代码同时支持 Vue2/Vue3,现在它想要去拓展到 React 框架,这就是技术栈的框架层面的拓展.由于是可以复用之前 TinyVue 组件库的核心逻辑代码,所以就是需要从 React 到 Vue 的核心逻辑代码之间做一个适配层去接入,将组件的各个层面都单独拆分为⼀个独⽴的部分,⽐如⼀个组件可能由以下⼏个层组成:从入口出发,分别是 模版层、样式层、适配层、逻辑层。

那我们要实现 TinyReact 版本的组件库,就是尝试按照以下思路来进行。
首先,我们可以分析⽂件的依赖关系。

import {
    IButtonState,
    ISharedRenderlessParamHooks,
    IButtonProps,
    IButtonApi,
    IButtonRenderlessParamUtils
} from '@/types'
import { handleClick, clearTimer } from './index'
export const api = ['state', 'handleClick']
export const renderless = (
    props: IButtonProps,
    { computed, onBeforeUnmount, reactive, watch, inject }: ISharedRenderlessParam
    { emit, parent }: IButtonRenderlessParamUtils
) => { ... }

观察可以发现,renderless 只有导⼊了组件逻辑⽬录的 index,index ⾥主要是组件逻辑处理的相关函数,而 renderless 函数在模版⾥是这样调⽤的:

const {
    state,
    handleHeaderClick
} = useSetup({
    props: defaultProps,
    renderless,
    api,
    constants: _constants,
    vm,
    parent
})

也就是说,useSetup 帮助模版调⽤了 renderless 函数,renderless 函数中的所有依赖,都应该由 useSetup 来提供。useSetup 也就是 react-common 中,也就是 react 适配层中最主要的函数。
vue 的 renderless 只会执⾏⼀次,react 组件的渲染函数每次状态刷新都会执⾏。因此,可以给 react 设计⼀个刷新区和挂载区。

function App() {
    const ref = useRef();
    if (!ref.current) {
        // ⾸次执⾏区
        ref.current = 'created';

    }
    useEffect(() => {
        // 刷新区
    })

    useEffect(() => {
        // 挂载区
    }, [])
}

可以在挂载区执行 renderless 函数,刷新区去注册回调。再来看看如何在 react 中实现深层数据响应式:

const reactiveMap = new WeakMap()
const reactive = (
    staticObject,
    handler = {},
    path = [],
    rootStaticObject = staticObject
) => {
    reactiveMap.has(staticObject) || reactiveMap.set(staticObject, new Proxy(stati
get(
        target,
        property,
        receiver
    ) {
        const targetVal = target[property]
if(targetVal && targetVal['v-hooks-type'] === computed) {
        return targetVal.value
    }

const _path = [...path, property]
    const res = typeof targetVal === 'object'
        ? reactive(targetVal, handler, _path, rootStaticObject)
        : targetVal

    // 监听访问
    handler.get && handler.get({
        result: res,
        root: rootStaticObject,
        path: _path,
        target,
        property,
        receiver
    })

    return res
},
    set(
        target,
        property,
        value,
        receiver
    ) {
        const targetVal = target[property]
        if (targetVal && targetVal['v-hooks-type'] === computed) {
            targetVal.value = value
            return true
        }

        const _path = [...path, property]

        // 监听修改
        handler.set && handler.set({
            target,
            property,
            receiver,
            root: rootStaticObject,
            path: _path,
            newVal: value,
            oldVal: target[property]
        })

        target[property] = value
        return true
    }
}))

return reactiveMap.get(staticObject)
}

这是⼀个框架无关的响应式函数,可以对⼀个对象进⾏监听,返回代理对象,最主要的是深层响应式的递归代理,在 get、set 的时候都会触发回调,在这个深层响应式函数的基础上去绑定 react 刷新函数,就会在 react 侧实现数据响应式。
我们分析完成之后就可以在此基础上进行开发了,然后就明确了项目的需求,确定当前版本最基础最先需要实现的模块,再进行拆解任务,实现组件的功能,并与导师进行探讨,最后完成了整体的开发。

OpenTiny: 在开发过程中有遇到什么困难或者挑战吗?你是如何克服的呢?导师和社区成员有为你提供帮助吗?
Mr 栋 在完成这个项目时,确实有遇到一些问题,就是 Vue 和 React 两个框架之间,从设计层面就是有一些差异的,从使用者的角度来看,也是两种不同风格的框架,所以为了减少后续复用的开发成本就需要抹平一些使用上的差异,比如组件更新,每次更新都会去重新渲染组件,以及函数组件内部的逻辑。
首先我是通过不断尝试写一些 demo,通过各种各样的 demo 去尝试接入并运行,先去设想一个可行性的方法,然后去实践它,并且向导师询问这个方法是否有缺陷,在这个过程中,老师也是指出了我的一些缺陷,比如我在刷新 React 钩子时,得通过设置数据类型的一个状态,而不是布尔类型的一个状态。如果是布尔类型刷新基数次时,组件就不会触发刷新,这些都是在开发过程中的一些细节点。

OpenTiny: 你认为在开发 OpenTiny 项目的过程中,最有意思的地方是什么?
Mr 栋 我认为比较有意思的点在于在 Vue 的响应式的概念,因为两个都是非常优秀的前端框架,而我们可以通过一些优缺点的对比了解哪个框架更适合哪些情况,哪种业务场景。

OpenTiny: 你参与了 OpenTiny 项目共建之后,你觉得你有什么收获呢?
Mr 栋 参加完咱们这个项目之后,我觉得最大的收获就是对前端的框架有了更深的了解,还有就是对整个组件库的开发链接有了更进一步的了解,从构建、打包、发布整套流程,从而也知道了市面上的组件库是如何运作的。

OpenTiny: 根据你的经验,你觉得怎样才能更好的融入开源社区呢?
Mr 栋 融入开源社区,我觉得首先需要对自己有一个定位,可以完成哪些工作,胜任哪些工作,哪些方面还需要提升,对哪个方面更感兴趣。比如说有些开发者可能对打包构建这方面更感兴趣,就可以完美的去打包构建一个组件库的一整个产物。其次的话,如果想要更好的参与贡献也需要有耐心,首先过一遍在开发过程中用到的开发文档或者贡献文档,然后按照社区的规范去做一些事情。然后社区这边想要更多开发者参与进来,对于每个模块的开发细节,需要做好明确的思路和分工。需要明确从上游到下游的整个的开发链路,以便于开发者可以更好的参与到组件库建设的每个环节中去。

关于 OpenTiny

图片

OpenTiny 是一套企业级 Web 前端开发解决方案,提供跨端、跨框架的UI组件库,适配 PC 端 / 移动端等多端,支持 Vue2 / Vue3 / Angular 多技术栈,拥有灵活扩展的低代码引擎,包含主题配置系统 / 中后台模板 / CLI 命令行等丰富的效率提升工具,可帮助开发者高效开发 Web 应用。


欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~更多视频内容也可关注B站、抖音、小红书、视频号

OpenTiny 也在持续招募贡献者,欢迎一起共建

OpenTiny 官网https://opentiny.design/

OpenTiny 代码仓库https://github.com/opentiny/

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

TinyEngine 源码https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐