Ранние возвращения в функцию рендера React: return null, [] или React.Fragment?

Question

Допустим, у меня есть простой компонент, который может отображать или не отображать счетчик.

Какова лучшая практика в React для выражения пути заблокированного кода? Должен ли он вернуться null, []или Fragment?

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

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

Я думаю null это самое ясное, но я могу представить, что это вызывает проблемы, если контекст вокруг возвращаемой функции ожидает компонент. [] а также Fragment оба варианта кажутся мне хорошими вариантами, за исключением того, что Fragment немного легче читать. Какая разница?

Answer 1

Возвращение nullв соответствии с рекомендациями React команды:

В редких случаях может потребоваться, чтобы компонент скрывался, даже если он был визуализирован другим компонентом. Для этого верните null вместо вывода рендеринга.

Answer 2

Вам не нужно создавать для него дополнительную функцию.

Это сделает работу:

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

Answer 3

React предоставляет нам фрагменты, чтобы избежать ошибок проверки HTML, например, если вы должны были вернуть список td строки в родительский компонент "таблица". Обернуть их чем-то еще React.Fragment может вызвать ошибки HTML. Итак, ваш лучший способ это:

render() {
  return (
    <React.Fragment>
      <td>Data</td>
      <td>Data</td>
    </React.Fragment>
  )
}

Или с новым синтаксисом:

render() {
  return (
    <>
      <td>Data</td>
      <td>Data</td>
    </>
  )
}

А в твоем случае возвращение null хороший путь

Возврат значения null из метода рендеринга компонента не влияет на запуск методов жизненного цикла компонента. Например, componentDidUpdate будет по-прежнему вызываться