แนวทางปฏิบัติที่ดีสำหรับ Key และ Ref

ยินดีต้อนรับ

เหตุใดคีย์จึงสำคัญ

คีย์ที่คงที่และไม่ซ้ำกัน

users.map(user => (
  <UserCard key={user.id} user={user} />
))

เหตุใดการใช้ดัชนีเป็นคีย์จึงมีปัญหา

// Risky when list can reorder or filter
items.map((item, i) => <Row key={i} {...item} />)

กรณีที่ยอมรับการใช้ดัชนีเป็นคีย์

การสร้าง ID ที่คงที่

const newItem = { id: crypto.randomUUID(), text: 'Buy milk' };

พื้นฐานของ useRef

const inputRef = useRef(null);
<input ref={inputRef} />
// Access DOM node: inputRef.current.focus();

การอ้างอิงแบบเรียกกลับ

function Input() {
  return (
    <input
      ref={node => {
        if (node) node.focus();
      }}
    />
  );
}

forwardRef สำหรับการอ้างอิงคอมโพเนนต์

const FancyInput = React.forwardRef((props, ref) => (
  <input ref={ref} className="fancy" {...props} />
));

// Parent
const inputRef = useRef(null);
<FancyInput ref={inputRef} />

useImperativeHandle

const Child = forwardRef((_, ref) => {
  const innerRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => innerRef.current.focus(),
  }));
  return <input ref={innerRef} />;
});

ตรวจสอบอย่างรวดเร็ว

สรุป

ถัดไป