如何展示React组件

Question

以下内容是否可以像下面这样显示：jsx？

//编写一个返回`jsx`的js函数
function child(label, value){
  return (
    <h3>
     {label}: {value}
    </h3>
  )
}

export default function Parent(){
  const [state, setState] = useState({label:"", value:""})
  const {label, value} = state;
  
  return (
    // 然后调用函数显示`jsx`
    <>{test(label, value)}</>
  )
}

或者是否更好的做法是编写React函数组件：

function Child({state}){
  return (
    <h3>
     {state.label}: {state.value}
    </h3>
  )
}

export default function Parent(){
  const [state, setState] = useState({label:"", value:""})
  
  return (
    <Child state={state} />
  )
}

Answer 1

第二种方法看起来更简单和可读。记住，你让代码更可读，项目变得越大，它就越容易管理。此外，这种方法是构建React组件的最常见做法。

Answer 2

最佳实践是将其渲染为一个React组件。

原因是，虽然仅使用函数对于非常简单的组件仍然可行，但您可能希望在将来对其进行更改并添加更多“类似React”的功能，如hooks。在那时，它可能会出现问题，而React通常不会告诉您这是导致应用程序出错的原因。如果发生这种情况，要找到错误可能会很头疼，特别是如果函数位于另一个文件中。

在这篇文章中可以找到一个示例，说明在使用错误边界时它可能会出错。

根据这个Stack Overflow回答，以函数调用的方式可能在性能方面更快，但在我看来，在这种情况下根本不使用函数是更安全的选择。

所以，如果您认为自己足够小心，没有人会阻止您。但请确保不要自己给自己找麻烦。祝好运！