试图理解 React 的范式

Trying to understand the paradigm of React

我正在为我的 Uni 写一篇关于 React 的文章,并试图了解它的全部内容。

网站上的 Thinking in React, they point out that the UI should be broken up in small Components. One way of doing this is to use the technique of single responsibility principle 部分。

这种范式也是 HTML (JSX)、CSS(内联样式)和 JavaScript 应该放在一个文件中的原因吗?

在某种程度上,将 HTML (JSX)、CSS 和 JS 包含在同一个文件中更多的是 separation of concerns 而不是单一职责。 React 组件关注的是将一小部分信息呈现到屏幕上,而 HTML (JSX)、CSS 和 JS 都需要这样做,因此它们是该关注点的一部分。

其他思想流派会将这些元素视为不同的关注点,因此这在很大程度上是您如何解释模式的问题,而不是具有明确正确答案的问题。

Pete Hunt 在 2013 年的 JSConf EU 上专门谈到了 React 的关注点分离,you can see a video of that here and read the slide deck from that presentation here . In addition to separation of concerns, that presentation also discusses how putting all the elements of a component in the same file can be said to increase cohesion and encourage loose coupling

在同一文件中包含 HTML (JSX)、CSS 和 JS 的实际结果是,您只需查看一个文件即可完全了解组件的行为。这使得更容易完全理解组件和帮助 reusability,尤其是 third-parties。

Facebook 的 Christopher Chedeau 谈到了为什么他们建议在 NationJS 2014 上将 CSS 放入您的 React 组件中。This is a video that talk and this is the slide deck.