关注点分离与React Hooks

React是毋庸置疑的最受欢迎的前端JavaScript框架/用户界面库之一。但这并不意味着它是最好的，或者每个人都喜欢它。

React的一些技术原因让人们不喜欢它，令人惊讶的是，其中一个最大的特点也是其中之一——JSX。它是标准JavaScript的扩展，允许您在React组件中使用类似HTML的语法。

React中如此易于识别、明显有助于提高代码可读性和编写代码的简易性的一部分如何变成缺点？这归结于关注点分离。

Separation of concerns

在我们深入讨论之前，我想解释一下“关注点分离”到底是什么，以免遗漏任何微妙之处。

分离关注点意味着在不同的概念/内容之间保持清晰的界限。在编程中，JSX 是忽略这个规则的一个明显例子。现在我们不再把描述组件结构的“模板”和它的逻辑放在不同的 HTML 文件和 JS 文件中，而是将它们（如果你使用 CSS-in-JS，可能还有更多）混合在一起，形成了一些人认为是完美的和谐，而另一些人则认为是无序的混乱。

Personal preference

好的，那么将“视图”和“逻辑”混合在一起会破坏关注点分离。但这真的很糟糕吗？这是不是意味着你总是要将组件的视图和逻辑分开？

不，不是的。首先，缺乏关注点分离并不一定是一件坏事。这是一个开发人员或团队的个人偏好和其他指南的问题。您不必将逻辑和视图分开。但是，如果您这样做，仍然不意味着每个部分都需要一个单独的文件。完美的例子是Vue单文件组件（SFC），或者只是在其中包含