Bagaimana untuk memaparkan komponen React

Question

Bolehkah kandungan berikut dipaparkan seperti ini: 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)}</>
  )
}

Atau adakah lebih baik menulis komponen berfungsi 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

Kaedah kedua kelihatan lebih mudah dan boleh dibaca. Ingat, semakin mudah dibaca anda membuat kod, semakin besar projek itu, semakin mudah untuk diurus. Tambahan pula, pendekatan ini adalah amalan yang paling biasa untuk membina komponen React.

Answer 2

Amalan terbaik ialah menjadikannya sebagai komponen React.

Alasannya ialah walaupun hanya menggunakan fungsi masih berfungsi untuk komponen yang sangat mudah, anda mungkin mahu menukarnya pada masa hadapan dan menambah lebih banyak fungsi "Seperti Reaksi" seperti cangkuk. Pada ketika itu, ia boleh menjadi salah dan React biasanya tidak akan memberitahu anda bahawa itulah yang menyebabkan permohonan anda menjadi salah. Jika ini berlaku, ia boleh menjadi pening untuk mencari ralat, terutamanya jika fungsi itu berada dalam fail lain.

Contoh bagaimana ia boleh menjadi salah apabila menggunakan sempadan ralat boleh didapati dalam artikel ini.

Menurut jawapan Stack Overflow ini, cara panggilan fungsi mungkin lebih pantas dari segi prestasi, tetapi pada pendapat saya, tidak menggunakan fungsi itu sama sekali adalah pilihan yang lebih selamat dalam kes ini.

Jadi jika anda rasa anda cukup berhati-hati, tiada siapa akan menghalang anda. Tetapi pastikan anda tidak mendapat masalah. Semoga berjaya!