พร็อพส์สำหรับเรนเดอร์และรูปแบบ HOC

รูปแบบการนำกลับมาใช้ซ้ำแบบคลาสสิกสองรูปแบบ

พร็อพส์สำหรับเรนเดอร์ — แนวคิด

function Mouse({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return render(pos);
}

// Usage:
<Mouse render={({ x, y }) => <p>{x}, {y}</p>} />

children ในฐานะฟังก์ชัน

function Mouse({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  /* ... */
  return children(pos);
}

<Mouse>
  {({ x, y }) => <p>{x}, {y}</p>}
</Mouse>

คอมโพเนนต์ลำดับสูง — แนวคิด

function withMouse(Component) {
  return function WithMouse(props) {
    const [pos, setPos] = useState({ x: 0, y: 0 });
    useEffect(() => {
      const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
      window.addEventListener('mousemove', handler);
      return () => window.removeEventListener('mousemove', handler);
    }, []);
    return <Component {...props} mouse={pos} />;
  };
}

// Usage:
const Position = ({ mouse }) => <p>{mouse.x}, {mouse.y}</p>;
const EnhancedPosition = withMouse(Position);
<EnhancedPosition />

คอมโพเนนต์ลำดับสูงประกอบกันด้วยการครอบ

// Multiple HOCs:
const Enhanced = withRouter(connect(mapState)(withTranslation()(MyComponent)));
// Equivalent in modern React:
// const Enhanced = MyComponent (reads from hooks: useRouter, useSelector, useTranslation)

พร็อพส์สำหรับเรนเดอร์กับคอมโพเนนต์ลำดับสูง

เหตุใดฮุกจึงเข้ามาแทนที่ทั้งสองรูปแบบ

// Custom hook equivalent of useMouse:
function useMouse() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return pos;
}

// Usage:
const { x, y } = useMouse();

เมื่อใดที่พร็อพส์สำหรับเรนเดอร์ยังเหมาะกว่า

function VirtualList({ items, itemHeight, renderItem }) {
  const [scrollTop, setScrollTop] = useState(0);
  const start = Math.floor(scrollTop / itemHeight);
  const visible = items.slice(start, start + 20);
  return visible.map((item, i) => renderItem(item, start + i));
}

<VirtualList items={data} itemHeight={40} renderItem={(item, i) => (
  <Row key={i} data={item} />
)} />

แนวทางปฏิบัติที่ดีสำหรับคอมโพเนนต์ลำดับสูง (เมื่อจำเป็น)

การส่งต่อการอ้างอิงในคอมโพเนนต์ลำดับสูง

function withLogger(Component) {
  const Wrapped = React.forwardRef((props, ref) => {
    console.log('rendering', Component.name);
    return <Component {...props} ref={ref} />;
  });
  Wrapped.displayName = `withLogger(${Component.name})`;
  return Wrapped;
}

การจดจำรูปแบบจากโค้ดเดิม

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

ทบทวน: พร็อพส์สำหรับเรนเดอร์และคอมโพเนนต์ลำดับสูง