React 子渲染函数中的早期返回：返回 null、[] 还是 React.Fragment？答案

【问题标题】：Early returns in React sub render function: return null, [], or React.Fragment?React 子渲染函数中的早期返回：返回 null、[] 还是 React.Fragment？
【发布时间】：2019-04-30 15:58:03
【问题描述】：

假设我有一个简单的组件，它可能会或可能不会呈现计数器。

React 中表达阻塞代码路径的最佳实践是什么？它应该返回null、[] 还是Fragment？

class App extends Component {
  renderCounter() {
    if (!this.props.shouldRenderCounter) {
      // // which should I return?
      // return; 
      // return null; 
      // return []; 
      // return <React.Fragment />; 
    }
    return <Counter />;
  }

  render() {
    return (
      <div>
        {this.renderCounter()}
      </div>
    );
  }
}

我认为null 是最清楚的，但我可以想象如果返回函数周围的上下文需要一个组件，它会导致问题。 [] 和 Fragment 对我来说都是不错的选择，除了 Fragment 更容易阅读。有什么区别？

【问题讨论】：

我会选择 null，但这似乎主要是基于意见的。

标签： reactjs react-fragment

【解决方案1】：

返回null 是recommended by the React team：

在极少数情况下，您可能希望组件隐藏自己，即使它是由另一个组件呈现的。为此，返回 null 而不是其渲染输出。

【讨论】：

谁能提供它背后的原因？我发现你有一个父母渲染一个孩子，然后孩子决定不渲染自己，这有点违反直觉。
@RTYX 在您需要组件是否呈现逻辑以存在于组件本身内部的情况下，它可能很有用。正如我回答中的引述所说；这是一个“罕见的情况”，通常最好阻止组件渲染而不是返回null。
当然，我理解这个原因，我只是很难想象这种逻辑不能存在于父元素中但它可以存在于子元素中的情况，如果它可以存在于任何一个中他们，我想知道我为什么要把它放在孩子身上。
我认为一个常见的例子可能是一个组件，它在第一次呈现时在对 useEffect 的调用中获取远程数据，但是在获取挂起时它返回 null 因为它还没有准备好显示任何东西。

【解决方案2】：

您不需要为它创建额外的功能。

这样就可以了：

class App extends Component {
  render() {
    return (
      <div>
        {this.props.shouldRenderCounter && <Counter />}
      </div>
    );
  }
}

【讨论】：

我的案例是一个人为的例子。实际代码不能这么简单
是的。这不能回答问题。来这里的原因和 OP 一样。
为这个答案辩护：我认为暗示的一点是您不应该在组件上调用单独的方法来呈现该组件的 part。组件的那个“子部分”可能会作为一个实际的、独立的组件更好地工作，它有自己的render() 方法。因此，在 OP 的示例中，将renderCounter() 中的逻辑提取到它自己的组件中实际上会更干净。然后，决定是否将该组件包含在调用者的 render() 方法中（类似于此答案中的示例）。