编写 React 代码指南¶

这些是编写 React DevTools 代码的非强制性规则。请尽量遵守这些规则以保持一致性，如果您不同意，请提交 Bug 以更改这些文档，我们可以进行讨论。

**请同时阅读**有关 React 和 Redux 代码的编码规范。这里的指南更侧重于通用模式，而不是具体的代码风格。

为什么不使用 JSX？¶

您可能已经注意到我们没有使用 JSX。答案很简单：我们不构建 JS 代码，而是直接为我们的 JS 引擎 SpiderMonkey 编写代码。它已经支持大部分 ES6，但不支持 JSX（JSX 不是标准）。

如果我们将来采用构建步骤，这种情况可能会改变。即使如此，作者也不认为 JSX 的优势足以抵消其带来的所有语法负担。它有时会更清晰，但频繁地在 JSX 和 JS 之间切换可能会增加代码噪音。

这并没有您想象的那么糟糕！如果您习惯了 JSX，可能需要一些调整，但您不会太想念它。

尽量在一个文件中只放置一个组件。这有助于避免出现包含大量组件的大文件，但从技术上讲，这也是我们如何使用工厂包装组件所必需的。请参阅下一条规则。

它还可以简化编写测试，因为您可能不会导出某些组件，因此测试无法访问它们。

如果您确实需要，可以在同一个文件中包含一些小的辅助组件，但请注意，它们不会被直接测试，并且您必须使用 React.createElement 或立即将它们包装在工厂中才能使用它们。

模块是组件交互的方式。理想情况下，每个组件都位于单独的文件中，并根据需要引入其他组件。这允许测试访问所有组件，并使用模块边界来包装组件。

例如，我们不使用 JSX，因此我们需要为组件创建工厂才能将它们用作函数。一种简单的方法是在导入时进行：

const Thing1 = React.createFactory(require('./thing1'));
const Thing2 = React.createFactory(require('./thing2'));

这会增加一些代码噪音，但随后您可以使用 Thing1({ ... }) 而不是 React.createElement(Thing1, { ... })。绝对值得这样做。

此外，请确保直接导出组件类：

const Thing1 = React.createClass({ ... });
module.exports = Thing1;

不要导出 { Thing1 } 或类似的内容。这对于工厂包装以及热重载都是必需的。