前言

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

专访详情

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标签，一起参与开源贡献~