太原模板建站,wordpress移除注册登录界面图标,wordpress插件dx seo下载,wordpress 2个菜单做中英文前言
OpenTiny 开源之夏项目终于迎来了圆满的结局。借此机会#xff0c;我们采访了 TinyReact 的共建者 Mr 栋同学。 Mr 栋同学是一位热衷于前端技术的开发者#xff0c;对前端开发充满了激情和热爱。同时他也是一位即将毕业的大四在校生。在 OpenTiny 开源项目中#xff0…前言
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 只有导⼊了组件逻辑⽬录的 indexindex ⾥主要是组件逻辑处理的相关函数而 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
欢迎进入代码仓库 StarTinyEngine、TinyVue、TinyNG、TinyCLI~
如果你也想要共建可以进入代码仓库找到 good first issue标签一起参与开源贡献~
