Присвоение свойства состояния константе в React

Question

В настоящее время я прохожу учебник по React JS и продолжаю видеть такие вещи, где какое-то свойство состояния присваивается константе перед использованием:

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      L’utilisateur <b>{isLoggedIn ? 'est actuellement' : 'n’est pas'}</b> connecté.
    </div>
  );
}

Есть ли что-то, что япропускаю там?Это постоянное назначение выглядит как товар, не перегружающий JSX, но я просто не уверен.

Answer 1

Люди делают это, чтобы сделать свой код чище и менее повторяющимся.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      L’utilisateur <b>{isLoggedIn ? 'est actuellement' : 'n’est pas'}</b> 
connecté.
    </div>
  );
}

Это легче читать, чем:

render() {
  return (
    <div>
      L’utilisateur <b>{this.state.isLoggedIn ? 'est actuellement' : 'n’est pas'}</b> 
connecté.
    </div>
  );
}

И заметно СУШИТ, когда вам приходится использовать isLoggedIn несколько раз.

    render() {
      const isLoggedIn = this.state.isLoggedIn;
      return (
        <div>
          L’utilisateur <b>{isLoggedIn ? 'est actuellement' : 'n’est pas'}</b> 
          Hello <b>{isLoggedIn ? 'darkness my old friend' : 'just kidding' }</b> 
        </div>
      );
    }

Кроме того, вы также увидите много объектов, разрушающих объект, что создает еще меньше кода:

render() {
  const {isLoggedIn} = this.state;
  return (
    <div>
      L’utilisateur <b>{isLoggedIn ? 'est actuellement' : 'n’est pas'}</b> 
connecté.
    </div>
  );
}

Эти три примера идентичны и не имеют реальных функциональных различий. Это предпочтение, если что-нибудь.

Answer 2

Это просто соглашение.Если вы делаете это слишком много раз, ваш код будет довольно трудно читать.Также легче отлаживать, если что-то сломать.

render() {
  return (
    <div>
       L'utilisateur <b>{this.state.loggedIn ? "est actuellement" : "n'est pas"}</b> connecté.
    </div>
  )
}