【翻】“return null” vs “return false” in React

leo

2023-05-13

React, Translate

为了提高英语水平和保持技术成长，开始按计划翻译一些短篇和博客，有问题欢迎讨论👻
原文：“return null” vs “return false” in React
原作者：Çağlayan Yanıkoğlu

正文

大家好，在本周的#SundayTechMusings，我将尝试解释在React中”return null”和”return false”之间的区别。

这实际上与性能有关，在写之前，你可以看看我的文章Performance Optimization Techniques

我知道很多人认为”return null”和”return false”是一样的，实际上是非常相似的，但是也有一些区别，这和React的工作方式有关。

在使用React开发时，通常会使用条件渲染根据不同的条件显示不同的组件。在一些条件下，你可能想明确指出一个组件不应该渲染任何东西。这就是null和false的来历，虽然这两个值都会阻止一个组件的渲染，但是它们之间有着重要的区别。

当一个组件返回null，它会告诉React不要在DOM中为该组件渲染任何东西。当你想要根据某种状态有条件地渲染一个组件时，但不希望在不符合该状态时显示任何东西时，返回null就很有用，比如说：

const Greeting = (props) => {
  if (!props.name) {
    return null;
  }

  return <h1>Hello, {props.name}!</h1>;
};

在上面的例子中，如果没有提供 name prop，组件会返回null，这样就不会渲染<h1>元素。如果提供了 name prop，该组件就会渲染带有实际内容的<h1>元素，这实际上是每个人的经典做法。

当一个组件返回false时，它告诉会React不要再DOM中为该组件渲染任何东西，就像null一样。然而，有一个重要的区别：返回false也会阻止该组件在未来的更新。这是因为React将false解释为“卸载”组件的信号，这意味着从DOM中完全删除它。

下面是一个返回false的组件的例子：

const Button = (props) => {
  if (!props.onClick) {
    return false;
  }

  return <button onClick={props.onClick}>Click me</button>;
};

在这个例子中，如果没有提供 onClick prop，组件就会返回false，从而阻止 <button>元素渲染。如果提供了 onClick prop，组件会用指定的点击处理来渲染 <button> 元素

值得注意的是，返回false可能会有意想不到的后果，比如在应该更新的时候阻止组件的更新。出于这个原因，当你想在不影响未来更新的情况下阻止渲染，使用null通常更安全

从一个组件的渲染方法中返回false，只有在该组件没有任何副作用时才有用，比如更新状态或者触发API请求。如果一个组件有副作用并返回false时，这些副作用仍然会发生，可能会导致意外的行为。

如果你在React库中检查上面这段代码时，你会看到一个”null”检查，为了更好的理解React的工作，你可以看看这段代码。

总而言之，返回null和返回false都会阻止一个组件在DOM中渲染任何东西，但它们之间有重要的区别。null是一个简单的方法来有条件的渲染一个组件，并且不影响未来的更新，而false则是向React发出卸载组件的信号，并可能导致意想不到的后果。为你特定的用例选择正确的选项是很重要的