时间戳

首页 > 解决方案 > react-native 中条件渲染的最佳实践

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

问题描述

在有条件地在 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
  }
}

标签： reactjsreact-native

解决方案

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

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

推荐阅读