javascript - 组件应该检查​​他们的 Prop 吗？

Question

假设我们有一个呈现 Notes 组件的父组件，该 Notes 组件呈现一些注释，并且数据仅包含 notes ，有时可以为 null(= 没有注释)，有时可以是字符串。数据本身来 self 们无法控制的外部 API。

选项A

// Parent
<Screen>
    {!!notes && (<Notes>{notes}</Notes>} // <--- RELEVANT LINE
</Screen>


// Notes.js
function Notes({notes}) {
  return (
    // Render the notes somehow 
  )
}

---

选项B

// Parent
<Screen>
  <Notes>{notes}</Notes>
</Screen>


// Notes.js
function Notes({notes}) {
  if(!notes) {  //                          <--- RELEVANT LINE
    return null;
  }

  return (
    // Render the notes somehow 
  )
}

基本上，将数据检查放在哪里比较好？为什么？

Answer 1

我会说是的，您应该检查组件中使用的 Prop 。让我们以您的 notes 为例。我不知道 notes 由什么数据组成，但可以说它是一个 Array[Objects]。您的数据可能如下所示 (JSON)。

"notes": [
  {
    "day": "Monday",
    "time": "12:00pm",
    "note" "Some detail about your note for Monday"
  },
  {
    "day": "Tuesday",
    "time": "12:00pm",
    "note" "Some detail about your note for Tuesday"
  },
   {
    "day": "Wednesday",
    "time": "12:00pm",
    "note" "Some detail about your note for Wednesday"
  },
]

你的父组件可能看起来像这样:

class Parent extends component {
  displayNotes = () => {
    const { notes } = this.props;

    return (
      <StyledNoteWrapper>
        {notes.map(({
          day,
          time,
          note,
        }, index) => (
          <Note
            key={index + note}
            day={day}
            time={time}
          />
          ),
        )}
      </StyledNoteWrapper>
    );
  };

  render() {
    const { notes } = this.props;

    if (notes.length) return null;

    return (
      <div>
        {this.displayNotes()}
      </div>
    );
  }
}

如果没有 if 语句来检查 notes 长度是否为 0，当在 bool 上下文中遇到时，这被认为是 false。这篇文章 mozilla用其他例子描述了这一点。然后您的组件将转到方法 displayNotes ，该方法将在 undefined 上运行 map 函数，这将导致您的组件崩溃，这显然很糟糕。所以在我看来，在合适的情况下，在 render() 中进行像这样的简单检查非常简单。

我能想到的另一个示例，您想要对其进行简单检查的是上述示例的延续。在上面的场景中，您有一个有效的日期和时间，但有一张空白的便条。这可能在您的 child 组件中。

<StyledNoteWrapper>
  {day &&
    <StyledDay
      prop1={prop1}
      prop2={prop2}
    >
      {day}
    </StyledDay>
  }
  {time &&
    <StyledTime
      prop1={prop1}
      prop2={prop2}
    >
      {time}
    </StyledTime>
  }
  {note &&
    <StyledNote
      prop1={prop1}
      prop2={prop2}
    >
      {note}
    </StyledNote>
  }
</StyledNoteWrapper>

StyledNoteWrapper、StyledTime 和 StyledNote 都是样式化的 div。就像我上面说的，note 是未定义的，你不希望你的 StyledNote 被渲染，因为这意味着不需要的/不必要的 DOM 结构，这会导致性能问题(非常小，但在大范围内可能会产生很大的不同，而且你为什么要渲染一个空的 div？)。这种使用 && 的简单检查将意味着未呈现样式化时间的 div 容器。

所以回顾一下你的最后一个问题

where is it better to put the checks for the data and why?

更具体地说，选项 A 或 选项 B。我认为这不是两者的简单选择。就像我上面提到的，我会首先在父组件中执行检查(如我的第一个 parent 组件中所述)然后我还会在你的 child 组件中执行检查(如所述在我的第二个 child 组件中)。

同样，我不确定您的 notes Prop 中有什么样的数据，但希望上面的示例可以为您指明正确的方向，就我个人而言，我总是尽可能地进行检查我最不想看到的是我的应用程序在生产过程中崩溃(或完全崩溃)。