React 最佳实践：在哪里不渲染组件？

Question

我在审查时遇到了一些代码，并且对最佳实践有疑问。场景如下：

我有一个带有 url 道具的 Hyperlink 组件。如果由于某种原因 url 是假的，Hyperlink 呈现 null.

简化示例：

const Hyperlink = ({ url }) => {
  return !url ? null : <SomethingElse url={url} />;
};

这个逻辑属于Hyperlink组件，还是应该由父组件负责决定是否渲染某些东西？

示例：

const MyParentComponent = ({ url }) => {
  return !url ? null : <Hyperlink url={url} />
};

这让 Hyperlink 变得愚蠢，缺点是必须在某些地方添加逻辑 url 是可选的。

Answer 1

通常这些类型的检查应该使用 Typescript 完成。回答你的问题应该取决于你的项目场景。

如果您觉得 url Hyperlink 组件将接收的可能为 null 或 undefined ，您可以在 Hyperlink 组件中进行检查。

但是，如果您认为仅在 MyParentComponent 中会出现 url 为 null 的情况，您可以考虑有条件地渲染组件。

Answer 2

如果条件渲染是：

condition ? something : null

我更喜欢使用：

condition && something

因为条件渲染应该用于以下情况：

condition ? something : somethingElse

回到你的问题，如果组件在 return 之前有一些繁重的计算，这是常识，你正在浪费资源执行它们，因为它不会 return 如果条件为假, 所以最好使用:

condition && <Component/>

但在大多数情况下，尤其是如果你有像那种没有逻辑的无状态组件，你不会体验到这两种方法之间的特别差异，基本上通过在组件内部进行条件渲染，你只是在浪费React.createElement().

我个人使用

condition && <Component/>

在这种情况下，如果可能的话，因为我发现组件可能不呈现任何内容在语义上是非常不正确的。如果你调用你的组件超链接，我希望它是 return 的东西，可能是 link。有些情况下你被迫 return 什么都没有，这没关系，但我尽量避免它。

Answer 3

我想说，作为一般规则，有“避免意外”，或“减少每分钟的 WTF”，或“显式优于隐式”。获得 null 而不是 <Link /> 是一种“惊喜”。

我认为这可能有点类似于“指针 vs 引用”，指针可以有空值，而引用不能。引用更安全，因为您无需担心空值。考虑将该 <Link /> 组件传递给某个回调或参数。比如这里的SomeComponent可能会震惊得到null:

const content = <Link>;
<SomeComponent contents={content}>

但原则上我认为这两种方法都可以。

React Best Practices: Where to not render a component?