在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时，它是DRYer。

    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>
  )
}