React 中的渲染函数答案

【问题标题】：Render functions in ReactReact 中的渲染函数
【发布时间】：2022-01-11 07:00:46
【问题描述】：

使用这种功能是好还是坏。它对渲染速度和优化有何影响？

const ReactComponent: React.FC = (props) => {
const {isOpen} = props;

const renderIsOpen = () => {
  if (!isOpen) {
    return null;
  }

  return <div>Im open!</div>
}

return (
    <div>
      hello
      {renderIsOpen()}
    </div>
  )
}

我讨厌这个功能，但我的同事经常使用它。

【问题讨论】：

这些功能非常简洁，经常派上用场。关键是不要不必要地使用它们。除非以非常愚蠢的方式使用，否则我认为它不会对性能产生任何影响。在不需要时使用它们只是一种不好的做法。
我不认为这是一个坏习惯，我有时会使用它们。虽然我认为当你觉得需要使用渲染函数时（我的意思是在现实生活中，而不是这个简单的例子），这通常表明你至少应该考虑将该代码移到其单独的子组件中。跨度>

标签： javascript reactjs frontend

【解决方案1】：

虽然它有效，但在很多情况下这似乎有点矫枉过正。也可以像这样获得：

const ReactComponent: React.FC = ({isOpen}) => {
return (
    <div>
      hello
      {isOpen && <div>Im open!</div>}
    </div>
  )
}

这对于一些代码清晰度可能会很方便，但如果您显示的 div 太复杂，您无论如何都可以将它放在一个单独的组件中。

【讨论】：