为什么ReactJS将代码与HTML混合的方式是更好的设计？

Question

一直以来，我们一直在分离 HTML、CSS 和 JavaScript，以保持关注点分离并提高可重用性和可维护性。为什么我们现在要回去将它们与 ReactJS 混合在一起？

Answer 1

不确定这是否是一个更好的设计，但是在React文档的

Introducing JSX

部分中，提出了同样的问题：

Why JSX?

React 背后的开发人员更喜欢在组件中包含 JSX 的原因是 React 假设渲染逻辑与事件处理、状态更改等密切相关，因此不要通过将 JSX 和逻辑放在单独的文件中来分离这两者， React 将关注点分开，并将相同的关注点保留在一个称为组件的单元内。

React 不是通过将标记和逻辑放在单独的文件中来人为地分离技术，而是将关注点与包含两者的松散耦合单元（称为“组件”）分开。 https://reactjs.org/docs/introducing-jsx.html

文档建议 Pete Hun 发表关于重新思考最佳实践的演讲，这可能会给讨论带来一些启发：https://www.youtube.com/watch?v=x7cQ3mrcKaY

Answer 2

可悲的是，当涉及到模板（当今应用程序的构建块）的可重用性时，将所有这些分开需要大量维护。

这里简单介绍一下为什么它是更好的设计：

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，它是 JavaScript 的语法扩展。我们 建议将其与 React 一起使用来描述 UI 的外观 喜欢。 JSX 可能会让您想起模板语言，但它附带 JavaScript 的全部威力。

JSX 产生 React“元素”。我们将探索将它们渲染到 DOM 在下一节中。

深入细节

Answer 3

你没有使用React后端，所以它几乎只是文件中的HTML和CSS（它是类似于HTML的JSX），涉及更多的东西，比如使用

map

来显示数据，但你可以分离更多的东西并使用 Redux 更好地组织您的应用程序，因为您在 3 个不同的地方使用 actions/reducers/forms。

通过这种方式建立一个项目很容易，但是建立一个项目已经花费了一点时间。如果我们也想将 HTML 和 ReactJS 分开，那么创建一个基础应用程序将花费更多时间，而且没有必要。

创建更多额外层并不总是好的，因为应用程序会变得不必要地更加复杂。