将状态属性分配给 React 中的常量答案

【问题标题】：Assigning a state property to a constant in React将状态属性分配给 React 中的常量
【发布时间】：2019-07-02 23:19:40
【问题描述】：

我目前正在阅读 React JS 教程，并且我不断看到这种情况，其中状态的某些属性在使用之前被分配给一个常量：

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

那里有什么我想念的吗？这个常量赋值看起来像是一种不会让 JSX 过载的商品，但我只是不确定。

【问题讨论】：

标签： javascript reactjs ecmascript-6 constants assign

【解决方案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>
  );
}

这三个示例是相同的，没有真正的功能差异。如果有的话，这是首选。

【讨论】：

谢谢，我还不知道解构语法！
@OddBrew 不客气！它在 JavaScript 中仍然相对较新。我想你会喜欢它，因为你更多地使用 React :)
@ChristopherNgo 真的很喜欢这种解释方式。来这里回答这个问题，但找不到任何我可以添加到您的答案中的内容。干得好。

【解决方案2】：

这只是惯例。如果您这样做太多次，您的代码将很难阅读。如果你把事情分解，也更容易调试。

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

【讨论】：