Comment afficher les composants React

Question

Le contenu suivant peut-il être affiché comme ceci : 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)}</>
  )
}

Ou vaut-il mieux écrire des composants fonctionnels 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

La deuxième méthode semble plus simple et lisible. N'oubliez pas que plus vous rendez le code lisible, plus le projet devient volumineux et plus il est facile à gérer. De plus, cette approche est la pratique la plus courante pour créer des composants React.

Answer 2

La meilleure pratique consiste à le restituer en tant que composant React.

La raison est que même si l'utilisation de fonctions fonctionnera toujours pour des composants très simples, vous souhaiterez peut-être la modifier à l'avenir et ajouter davantage de fonctionnalités "de type React" comme les hooks. À ce stade, cela peut mal tourner, et React ne vous dira généralement pas que c'est la cause du dysfonctionnement de votre application. Si cela se produit, trouver l’erreur peut être un casse-tête, surtout si la fonction se trouve dans un autre fichier.

Un exemple de la façon dont cela peut mal se passer lors de l'utilisation des limites d'erreur peut être trouvé dans cet article.

Selon cette réponse Stack Overflow, la méthode d'appel de fonction peut être plus rapide en termes de performances, mais à mon avis, ne pas utiliser du tout la fonction est l'option la plus sûre dans ce cas.

Donc, si vous pensez être suffisamment prudent, personne ne vous arrêtera. Mais veillez à ne pas vous attirer des ennuis. bonne chance!