试图理解React的范式

Question

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

在网站的Thinking in React部分，他们指出应该在小型组件中分解用户界面。这样做的一种方法是使用single responsibility principle的技术。

这个范例也是HTML（JSX），CSS（内联样式）和JavaScript应该放在一个文件中的原因吗？

Answer 1

在包含HTML（JSX）的方式中，同一文件中的CSS和JS比单一责任更多地是separation of concerns。 React组件的关注点是向屏幕呈现一小部分信息，并且HTML（JSX），CSS和JS都需要这样做，因此它们也是这个问题的一部分。

其他思想流派会将这些因素视为不同的问题，因此这是一个很难解释模式的问题，而不是具有明确正确答案的问题。

Pete Hunt在2013年JSConf EU，you can see a video of that here和read the slide deck from that presentation here特别谈到了对React的关注问题。除了关注点分离之外，该演示文稿还讨论了如何将组件的所有元素放在同一个文件中可以说会增加cohesion并鼓励loose coupling。

在同一个文件中包含HTML（JSX），CSS和JS的实际结果是，您只需要查看一个文件即可完全理解组件的行为。这样可以更轻松地完全理解组件并帮助reusability，尤其是第三方。

Facebook的Christopher Chedeau谈到了为什么他们建议在2014年NationJS上使用你的React组件加入CSS。This is a video that talk和this is the slide deck。