H5和RN的区别

[zhuqingyv]

H5底层Native Code也是原生代码驱动原生视图，上层给JS暴露一些API RN其实也差不多，只不过是把React融进去了

已知的区别： 1、H5运行为window之下 2、RN运行在JS Core中，相当于模拟了window 3、H5可以直接操作DOM 4、RN不能直接操作DOM需要通过React Native驱动或者通过setNativeProps直接操作部分属性

看上去RN更像是一个阉割版本的H5，那么RN的优势从哪些方面体现呢？

[sunnylqm]

RN直接操作原生视图，绕过webview这个沉重的包袱

[sunnylqm]

原生按钮响应的手感，视图切换的过渡动画，滚动列表的流畅度，和原生一样完全跟手

这些从原理上H5永远只能模拟而无法实现

[zhuqingyv]

通过bridge通信更改视图的耗时应该比 H5 直接操作DOM更加耗时吧，React本身耗时 + 通信 + commit 另外原生手感这块，ReactNativeBridge中间做了代理，这真的比浏览器提供的API更加高效么？ 如果说webview这个包袱重的话，我可以不可以理解为ReactNative只是阉割掉了webview的大部分能力，所以更轻更小了，启动更快了。但是如果H5代码在客户端做本地化，这种差异还会很明显么？

[sunnylqm]

webview是自己绘图，没有原生视图 手感这东西你试下不就知道了

[sunnylqm]

H5又哪有直接操作DOM一说，js只是脚本语言，只是为了把人的意图传递给底层的调用（仔细想想，这还不是得过bridge？只不过是浏览器提供的bridge，就不提这个bridge上还有多少额外的开销了）

你当然可以把H5自己做一层适配，翻译到对应的原生视图——不等于说你就重新做个了RN?

[zhuqingyv]

H5又哪有直接操作DOM一说，js只是脚本语言，只是为了把人的意图传递给底层的调用（仔细想想，这还不是得过bridge？只不过是浏览器提供的bridge，就不提这个bridge上还有多少额外的开销了）

你当然可以把H5自己做一层适配，翻译到对应的原生视图——不等于说你就重新做个了RN?

这个我清楚，唯一的区别是RN是通过消息机制通信也就是序列化消息，当然后面版本RN做了内存共享的能力，问题是web本身就是直接通过内存共享的形式实现的，并且没有框架层面的消耗，但是RN是一定要经历框架层面的消耗并且最终提交到Native层的。可能我表达有问题，我的意思是说，如果H5的js代码在客户端本地(SPA + WAP)这个本身和RN的差距有量化么？(并不是要把H5翻译成Native视图)

最后一点疑问，Native视图层底层和Webview绘图底层，不是一样的么？

[zhuqingyv]

H5又哪有直接操作DOM一说，js只是脚本语言，只是为了把人的意图传递给底层的调用（仔细想想，这还不是得过bridge？只不过是浏览器提供的bridge，就不提这个bridge上还有多少额外的开销了）

你当然可以把H5自己做一层适配，翻译到对应的原生视图——不等于说你就重新做个了RN?

Native视图和webview视图的区别可不可以理解为 DOM 和 Canvas的区别？

[sunnylqm]

我个人对这些纸上谈兵没啥兴趣，也没有太多深入理解

[zhuqingyv]

不是纸上谈兵，是了解真相，通读了React Native的全部文档，总体感觉RN是做了一半的产品，所以产生了很大的怀疑，我再研究一下吧，谢谢你的时间

[Onedayago]

RN 相比于 H5，优势在于，UI 的绘制后都是原生组件，当然 React Native 为了做到这点，自己实现了一个 JSBridge，还有布局引擎 yoga 去将 react 的 flex 布局转换为原生布局。

[github-actions[bot]]

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.