如果我开始使用 React/flux，我应该从头开始重新创建我的所有页面（html 和 css）吗？

Posted 2023-02-22

【中文标题】如果我开始使用 React/flux，我应该从头开始重新创建我的所有页面（html 和 css）吗？

【英文标题】：Should I recreate all my page from scratch (html and css) if I begin using React/flux?

【发布时间】：2015-05-04 10:33:37

【问题描述】：

我已经构建了我的应用程序的几个页面。因为我需要一个 javascript 框架和亚秒级动态页面，所以我想我会尝试 React/Flux。

尽管阅读了很多内容，但我不完全了解您是否可以保留我现有的代码库 (html/js) 并仅在需要与数据库交互的网页的某些块上使用 React (jsx, modules)/动态实现？

我们举个例子： 我的页面有很多东西：我调整了很多引导程序（使用 css），实际上在幕后使用 javascript/DOM ex 用于下拉菜单和其他东西），respond.js 用于在 ie8 上启用媒体查询（我猜是使用DOM），以及许多第三方工具，例如 intercom.io，甚至是我屏幕底部的谷歌分析 js 跟踪窗口。 您可以在此处查看页面的外观。

我的需要：我只需要块 (D) 上的动态调整和实时功能，其他所有的，标题 (B)，对讲机 (C)，其余的可以保持原样，这样可以节省一些如果我可以将它们保留在当前的 html 代码中，我会花很多时间。

所以这是我的问题：

(1) 我必须在 react 上转换页面上的所有内容还是只放入 jsx/react 块 (D) 并保持其余部分不变？

与 (1) 我想利用 React 带来的主要优势（虚拟 DOM 和差异），即使整个页面不在 React 上，我仍然可以使用它吗？

1234563比如下拉菜单、灯箱、intercom.io 脚本、谷歌分析脚本那么难吗？我的意思是或者我可以保留 css 并使用它来更改 html http://facebook.github.io/react/html-jsx.html 吗？这真的很容易，但我担心这里有一个问题......:)

【参考方案1】：

就应用的视图层而言，一切都可以使用 React 完成 （是的，react 可以满足您的所有需求）

我建议的第一件事是前往 react 网站获取文档，使用 Google 和 YouTube 做一些教程，然后开始使用 react 但不完全。 （使用 JSX）。

因为您现在了解 React 的工作原理以及如何使用道具和状态，您最终可能会一次合并应用程序的片段。

要考虑的最重要的事情是上下文。 React 只是 Javascript，因此您可以绑定、调用和应用现有应用程序中的任何对象。

var blockA = React.createClass~
    blockB = React.createClass~
    blockC = React.createClass~
    blockD = React.createClass~

React 只是组件，每个块都是一个组件。

但我不能再强调了，了解react的基本原理，一点都不难。

编辑...

是的，使用 JSX，我最初认为它很愚蠢，但它非常棒！

使用 DOM 操作，要么全有，要么全无。 React 使用它的 DOM 副本来更快地操作实际的 DOM。对于不接触 DOM 的部分代码，它不会在 React 中产生巨大的差异，但 React 通过将状态更改传递给其组件的子组件，具有漂亮的工作流程。真的这取决于你，但如果你使用 React 做所有的 DOM 事情。您尝试做的 70+% 可能是 DOM 操作。

我的总体建议是，不要过多考虑它会有多“难”。想想你能多快学习基础知识。很容易掌握。

【讨论】：

问题是我在当前页面 html/css3 上花了很多时间..所以我知道我可以在 React 上做到这一切，但我不想（如果可以的话）:)我想知道即使我只在块 D 上使用 react/jsx/addons 是否会获得反应速度/实时的优势（并且不用管我的标题、我的 intercom.io 聊天窗口等等。 ..)

当然，我会花时间去理解和学习教程以真正获得 React

是的，您将获得速度优势，但仅限于 blockD。任何其他使用 $('elem') 或 document.getElementById('elem') 或类似的东西都不会更快。您可以一次尝试一个块，然后从那里进步。

好的，谢谢，这就是我一直在等待的答案：至少我没有被阻止必须从第一天开始重新创建所有内容。我可以移动块 D，这是最需要“差异”的块"和我认为的虚拟 dom，因为它动态调整并与用户模型交互。

谷歌分析：最好将该代码留在嵌入的 html 脚本标签中。只需将respond.js 包含为正常和对讲即可。 react 不是 javascript 的重新实现。它更多的是关于用户界面，因此任何与视觉上与用户界面无关的代码都可以保留。

【参考方案2】：

我是 React 的新手，但根据我收集到的信息，您可以随意添加 React 代码。您不必重新编写整个应用程序。这包括能够在任何需要的地方使用您概述的功能。