react-native 中条件渲染的最佳实践答案

【问题标题】：Best practices for conditional rendering in react-nativereact-native 中条件渲染的最佳实践
【发布时间】：2018-08-06 03:24:01
【问题描述】：

我想要一些关于在 react-native 中有条件地渲染元素或组件时的最佳实践的建议。我的问题是，当条件不成立时，返回 null 还是只运行 if 条件更好？我知道，如果您返回 null，那么生命周期方法仍在运行，但我担心的是，如果我不返回任何内容，是否会产生影响或性能差异？

示例一

renderText(name) {
  if(name === 'Abba') {
    return <Text>{name}</Text>
  }
}

示例二

renderText(name) {
  if(name === 'Abba') {
    return <Text>{name}</Text>
  } else {
    return null
  }
}

【问题讨论】：

对于最顶层的元素，最好返回一些 JSX 或 null，即 return name === 'Abba' ? <Text>{name}</Text> : null。如果它在某些 JSX 内部，则可以使用 && 运算符，即 name === 'Abba' && <Text>{name}</Text>。

【解决方案1】：

我认为像这样的条件渲染可能会更好。

renderText(name) {
  return (
    { name === 'Abby' &&
      <Text>
        {name}
      </Text>
    }
  )
}

【讨论】：