将状态属性分配给 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>
  )
}

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

Assigning a state property to a constant in React

javascript

constants

assign

ecmascript-6

reactjs

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

Assigning a state property to a constant in React

javascript

constants

assign

ecmascript-6

reactjs

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