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

这只是约定。如果您这样做太多次，您的代码将很难阅读。如果您分手了，调试起来也更容易。

bool increasingTriplet(vector<int>& a) {

    int i,n=a.size(),first=INT_MAX,second=INT_MAX;
    if(n<3)
        return false;

    for(i=0;i<n;i++)
    {
        if(a[i]<=first)
            first = a[i];
        else if(a[i]<=second)
            second = a[i];
        else
            return true;
    }
    return false;
}

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

2 个答案: