ทำความเข้าใจคอมโพเนนต์ลำดับสูง (HOC)

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

HOC คืออะไร

// HOC signature
function withEnhancement(WrappedComponent) {
  return function Enhanced(props) {
    // add behaviour here
    return <WrappedComponent {...props} extraProp="value" />;
  };
}

HOC สำหรับป้องกันการยืนยันตัวตน

function withAuth(Component) {
  return function AuthGuard(props) {
    const isLoggedIn = useAuth();
    if (!isLoggedIn) return <Navigate to="/login" />;
    return <Component {...props} />;
  };
}

const ProtectedPage = withAuth(DashboardPage);

HOC สำหรับบันทึกการทำงาน

function withLogger(Component) {
  return function Logged(props) {
    console.log('[render]', Component.displayName, props);
    return <Component {...props} />;
  };
}

ส่งต่อพร็อพ

return function HOC(props) {
  return <WrappedComponent {...props} injectedProp={value} />;
};

กำหนด displayName

function withAuth(Component) {
  function AuthGuard(props) { /* ... */ }
  AuthGuard.displayName = 'withAuth(' + (Component.displayName || Component.name) + ')';
  return AuthGuard;
}

ส่งต่อรีฟ

function withStyle(Component) {
  return React.forwardRef(function (props, ref) {
    return <Component ref={ref} {...props} className="styled" />;
  });
}

HOC เทียบกับพร็อพสำหรับการเรนเดอร์และฮุก

นรกของตัวห่อหุ้ม

HOC ที่พบในไลบรารีต่าง ๆ

ตรวจสอบความเข้าใจ

สรุปทบทวน

บทถัดไป