typescript React ความสับสน FC <Props>

ฉันกำลังเรียนรู้ typescript และบิตบางส่วนทำให้ฉันสับสน หนึ่งบิตอยู่ด้านล่าง:

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>{props.name}</p>
    </div>
  )
}


const PrintName2 = (props:Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>{props.name}</p>
    </div>
  )
}

สำหรับองค์ประกอบการทำงานทั้งสองด้านบนฉันเห็นว่า TypeScript สร้างรหัส JS เดียวกัน PrintName2ส่วนประกอบดูเหมือนคล่องตัวมากขึ้นกับผมเท่าที่อ่านง่าย ฉันสงสัยว่าความแตกต่างระหว่างคำจำกัดความทั้งสองคืออะไรและใคร ๆ ก็ใช้ส่วนประกอบปฏิกิริยาประเภทที่สอง

ขอบคุณทุกคำตอบ ถูกต้อง แต่ฉันกำลังมองหาเวอร์ชันที่ละเอียดกว่านี้ ฉันได้ทำการวิจัยเพิ่มเติมและพบสิ่งนี้ใน cheatsheet react-typescipt บน github:https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#reacttypescript-cheatsheets

ส่วนประกอบของฟังก์ชัน
สามารถเขียนเป็นฟังก์ชันปกติที่ใช้อาร์กิวเมนต์ props และส่งคืนองค์ประกอบ JSX

type AppProps = { message: string }; /* could also use interface */
const App = ({ message }: AppProps) => <div>{message}</div>;

เกี่ยวกับReact.FC/ React.FunctionComponent? คุณยังสามารถเขียนส่วนประกอบด้วย React.FunctionComponent (หรือ React.FC):

const App: React.FC<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

ความแตกต่างบางประการจากเวอร์ชัน "ฟังก์ชันปกติ":

มีการตรวจสอบการพิมพ์และการเติมข้อความอัตโนมัติสำหรับคุณสมบัติแบบคงที่เช่น displayName, propTypes และ defaultProps - อย่างไรก็ตามขณะนี้มีปัญหาที่ทราบโดยใช้ defaultProps กับ React.FunctionComponent ดูปัญหานี้สำหรับรายละเอียด - เลื่อนลงไปที่ส่วน defaultProps เพื่อพิมพ์คำแนะนำที่นั่น

มันให้คำจำกัดความโดยนัยของเด็ก (ดูด้านล่าง) - อย่างไรก็ตามมีปัญหาบางอย่างเกี่ยวกับประเภทเด็กโดยนัย (เช่น DefinelyTyped # 33006) และอาจถือว่ามีลักษณะที่ดีกว่าที่จะระบุอย่างชัดเจนเกี่ยวกับส่วนประกอบที่บริโภคเด็ก

const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title
}) => <div title={title}>{children}</div>;

ในอนาคตระบบอาจทำเครื่องหมายอุปกรณ์ประกอบฉากเป็นแบบอ่านอย่างเดียวโดยอัตโนมัติแม้ว่าจะเป็นจุดที่สงสัยหากวัตถุอุปกรณ์ประกอบฉากถูกทำลายในรายการพารามิเตอร์

React.FunctionComponent มีความชัดเจนเกี่ยวกับชนิดการส่งคืนในขณะที่เวอร์ชันของฟังก์ชันปกติเป็นนัย (หรืออื่น ๆ ที่ต้องการคำอธิบายประกอบเพิ่มเติม)

ในกรณีส่วนใหญ่จะสร้างความแตกต่างเพียงเล็กน้อยที่ใช้ไวยากรณ์ แต่ไวยากรณ์ของ React.FC นั้นมีความละเอียดมากกว่าเล็กน้อยโดยไม่ได้ให้ประโยชน์ที่ชัดเจนดังนั้นจึงให้ความสำคัญกับไวยากรณ์ "ฟังก์ชันปกติ"

React.FCไม่ได้เป็นวิธีที่นิยมในการพิมพ์ตอบสนององค์ประกอบที่มีความเชื่อมโยง

ฉันใช้ประเภทนี้เป็นการส่วนตัว:

const Component1 = ({ prop1, prop2 }): JSX.Element => { /*...*/ }

รายการReact.FCข้อเสียสั้น ๆ:

1. ให้คำจำกัดความโดยนัยของเด็ก แม้ว่าส่วนประกอบของคุณไม่จำเป็นต้องมีลูก แต่ก็อาจทำให้เกิดข้อผิดพลาดได้
2. ไม่รองรับยาชื่อสามัญ
3. ทำงานไม่ถูกต้องกับ defaultProps

เวอร์ชันแรกจะเพิ่มไม่กี่ประเภทให้คุณ - มาจาก React.FC

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

สิ่งนี้มีประโยชน์ด้วยเหตุผลบางประการ แต่ที่ชัดเจนก็คือหากส่วนประกอบของคุณมีลูก จากนั้นคุณไม่จำเป็นต้องเพิ่มเสากั้นเด็กด้วยตนเอง

เนื่องจากคุณกำลังใช้ตอบสนองและ typescript คุณควรใช้รูปแบบครั้งแรกในขณะที่มันจะให้แน่ใจว่าองค์ประกอบของคุณจะถูกพิมพ์อย่างเคร่งครัดมากขึ้นเพราะมันหมายถึงว่าจะได้รับการตอบสนองจากประเภทชิ้นส่วนฟังก์ชั่นและจะใช้เวลาในการประกอบฉากประเภทPrintNameProps

const PrintName: React.FC<Props>

คุณสามารถอ่านคำนิยามของอินเตอร์เฟซที่เต็มรูปแบบสำหรับส่วนประกอบของฟังก์ชั่นในการตอบสนอง typescript typings พื้นที่เก็บข้อมูล

ตัวอย่างที่สองที่คุณระบุไม่ได้ระบุรูปแบบการพิมพ์ใด ๆ ยกเว้นว่าเป็นฟังก์ชันที่รับชุดของพารามิเตอร์ประเภทPropsและสามารถส่งคืนทุกอย่างโดยทั่วไปได้

ดังนั้นการเขียน

const PrintName2 = (props:Props)

คล้ายกับ

const PrintName2: JSX.Element = (props:Props) 

เนื่องจาก TypeScript ไม่สามารถสรุปได้โดยอัตโนมัติว่าเป็น Functional Component