下一代 React Native 会是什么样的?— Recos

简介: React Native性能差,那我们就去重新造一个轮子,思路有了,就差实现了,努努力,干一票大的。

我们团队很早就接入了 React Native,其动态化下发面对我们这个三天两头改界面的团队是挺契合的。虽然 Flutter 大火,但我们现在并没有去尝试,一个是动态化对于我们太重要了, 另外一个是我们跨平台选择了“业务逻辑使用KMM, 音视频用 C++,界面用RN”的路子,可以满足团队的需求,还有一个原因是,现在即使是跨平台技术了,业务太多,客户端的人也太少了,已经被困在业务里走不动了,心有点累。


但是 RN 被诟病的主要还是性能太差,一堆不知原因的 Native Crash。我们不能因为它存在问题,那就换另一套技术,而是要去优化它,解决它的问题,这也是我们技术走向深度的一个路子。


随着时代的发展,Native UI 已经有了新的产物, Android 这边诞生了 Compose, iOS 诞生了 SwiftUI, 都是采用声明式的语法,可以说 React 开创了 UI 的新时代, Native 已经有新的产物,那么 React Native 是否也应该与时俱进?不过 React Native 官方团队的开发节奏有点慢啊,一年前提出了 JSI 去解决通信问题,然后就一直卡在 TurboModule 里走不出来了。 所以去年我就有一个想法,我只去用 React, 重新用 Compose 实现一个 React Native,完全采用 JSI 与 TurboModule 的形式, 因为没有历史包袱,也只去支持 Hermes 引擎,而且只去支持我们用到组件,理论上会简单很多, 业余时间,我也的确去这么做了,也初步做出了 Demo, 事件流程、基础组件、Flex 布局等都实现出来,看似有点搞头,但是在长列表上,我的想法是 js 渲染出所有的 virtual dom, 然后到了 Compose 端, 将它们作为数据传递给 LazyColumn 进行渲染, 可实现发现,js 去创建成千上万个 virtual dom 时依旧很耗时, 这个路子走不通,想了一些其它的路子,但是需要去魔改下 React,不想这么做,最终好像又要回到 React Native 社区提供的 RecyclerListView 的形式, 有点不爽。


不过想着想着,又有了新的思路, React 是声明式的语法, SwiftUICompose 也是生命式的语法,那么我们可不可以把它从 React 的写法翻译到 ComposeSwiftUI 上呢。 基于静态代码翻译,肯定可行, 但是我们想要的是动态下发,那该怎么搞呢?在与同事的讨论中,我想到了一个方案: 一个语言,在编译前端的呈现是什么呢? 是 AST 结构,那么我们是不是可以序列化这个 AST,然后在 Compse 环境去解释执行这个 AST 呢? 那我们就来试一下。


JS 的 AST 需要我们自己去解析文件生成吗? 不,前端有强大的 babel,所以我们能轻松拿到 js 的 ast 结构, 我们可以适当的简化下,渠道多余的信息,减小生成文件的大小, 因为流程就变成这样子了:

c529a1164e2b5347b88602e6df741cf.png

想法有了,那就去做做看,新建个项目, 命名为: Recos


Github 地址:github.com/cgspine/Rec…


目前 Compose 的 Demo 已经写出来了,开篇就是一个长列表, 可以无任何依赖的执行下面代码:

function Item1(item, onItemClick){
    const onClick = useCallback(() => {
        onItemClick(item)
    })
    return <Text style={{ color:'#fff' }} onClick={ onClick }>偶数:{item.name}, {item.count}</Text>
}
function Item2(item, onItemClick){
    const onClick = useCallback(() => {
        onItemClick(item)
    })
    return <Text style={{ color:'#fff' }} onClick={ onClick }>奇数:{item.name}, {item.count}</Text>
}
function HelloWorld(current){
    const [data, setData] = useState([])
    useEffect(() => {
        let ret = []
        for(let i = 0; i < 1000; i++){
            ret.push({
                name: 'item' + i,
                index: i,
                count: 0
            })
        }
        setData(ret)
    }, [current])
    let render = function (i) {
        let item = data[i]
        if(item.index % 2 == 0){
            return Item1(item, (it) => {
                it.count = it.count + 1
                setData(data)
            })
        }else{
            return Item2(item, (it) => {
                it.count = it.count + 2
                setData(data)
            })
        }
    }
    return <RecyclerView count = { data.length } render = { render }>Hello World!</RecyclerView>
}

React 里的 useState, useCallback, useEffect 我都去实现了下,感觉努努力,就可以用到生产环境了。


如果去实现下 React Native 的所有接口, 那就可以与之相兼容了。


目前看来,这个就完全两个方面的能力:

1.编译原理的前端知识,我们要去写 js 解析器了, 现在我写的这些代码,只是能工作,效率什么都需要逐步优化,还有很多语法解析没支持到。

2.考察 js 的基本功,什么作用域、闭包、变量提升,对象、原型链, 都需要从根本去搞懂它。


一些想法的产生、落地都需要很多基本功的落地,而不是只会调用某些框架就能搞定的,继续努力吧, 有兴趣的并且认可这个思路的同学,可以参与到这个项目来,努努力,让我们再次重铸JS昔日辉煌,干掉 ReactNative,干掉 Flutter。

目录
相关文章
|
7月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
103 2
|
7月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
7月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
252 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
5月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
7月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1945 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
6月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
138 1
|
6月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
6月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
115 2
|
7月前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
6月前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
81 0