React-Native-Web 与 ReactJS

React-Native-Web vs ReactJS

刚好看到 React-Native-Web(RNW) ,我的想法是 什么?为什么我们需要另一个 React for Web 版本?我们已经有了 ReactJS(RJS).

所以我去了它的网站,看到文档说它允许你通过使用 React DOM、高质量等来使用 Native 组件

我还不太清楚使用RNW的区别和好处。

有人能给我一些具体的例子和性能数据等启发吗?

我知道 Twitter 和其他一些应用程序正在使用它,但仅仅告诉我“Twitter 正在使用它”就足够了,但还不够清楚,无法说明差异。

说实话,使用react-native-web的理由有点美感,举个例子:

React Native is a pure UI language. It defines some base components that define UI primitives, and those are thought to be independent of the platform that runs them. All the components we can create in React Native is based on primitives like View, Text, or Image, which are basic elements that make sense to any visual interface, no matter where it is run.

On the other hand, React’s primitives are just DOM nodes — HTML tags like div, p, or a, which are not pure UI. They weren’t created to define a visual language; rather, they’re meant to structure and make sense of the hypertext. React’s primitives have meaning beyond the interface, and that meaning doesn’t make much sense outside of browsers.

取自here。我开发了 ReactJs 和 RN 应用程序和网站,我能看到的唯一真正好处是统一的编码语言。自从我开始使用 RN,然后将 ReactJS 添加到我的简历中,我发现在 ReactJs 中找到与 RN 组件等效的东西很痛苦,哦,我应该使用 p 和 span 而不是 Text?,哦,它是 'input type="text"' 而不是 'TextInput' 等等。我想你明白我的意思了。对于进入 RN 世界的 React 开发人员来说可能也是如此。但它也有它的缺点,不幸的是使用 react-native-web 需要一些麻烦,你必须为此准备你的项目。

thanks for your explanation. Could you please be more specific and provide more details or examples for the "some hassles"? thanks!

例如React-Native(和它的一些库)是基于Promise框架的,它不是普通的JS,或者Object.assign 添加了 ES6,为了使用它们,您必须修改 webpack.config.js 和 .bael-rc 文件,在这些文件中添加多行。如果您正在使用其他辅助工具,如 Flow 或 Jest 等,它们也必须进行配置。它肯定会在开始时减慢你的速度,但如果你花时间进行设置,它会在很长一段时间内得到回报 运行。

如果您需要将 react-native 应用程序移植到网络上,请使用 RNW。 如果您只需要创建一个 web-app,请使用与 ui 库的反应,例如material-ui(我最喜欢的 ui 图书馆)。

问题

react-navigation、pickler、contacts accessor components 等一些组件不受 react-native-web 的完全支持,在构建 web 输出时你会得到 module/component not resolved 错误!要处理这个问题,最好的方法是将代码(组件)分成 4 个部分(文件夹):

   project-folder/
       android/
       ios/
       web/
       common/

您将在公共文件夹中编写所有平台支持的组件,并在其自己的文件夹中编写一些特定于平台的组件。

作为开发人员,在我看来,您将在渲染中使用大量条件和代码,并且代码库将足够大令人困惑

另一个问题是网络应用程序的响应能力,很多年前,我们试图让桌面制作的网站在移动屏幕上以响应方式呈现。这些天来,我们正在努力让移动网站在桌面屏幕上响应,而不是在桌面屏幕上有很多 space-between

其他方法

  1. 您可以使用 react-native 为 ios 和 android 开发应用程序,并使用 HTML、JS 或 reactjs 开发网站。

  2. 您可以开发可由 android 和 ios 浏览器安装的 PWA 网站,并且可以存储数据供离线使用。