javascript - Este o idee bună să folosești React.Context pentru a injecta componente UI?

Plănuiesc să construiesc o bibliotecă de componente React. Componentele React sunt componente UI, dar ar trebui să implementeze doar o logică specifică. Vreau ca utilizatorul să poată defini un set de atomi (componente React de bază) care sunt folosiți pentru a compune componentele efective. Scopul meu principal este să fac biblioteca independentă de o bibliotecă specifică de componente UI, cum ar fi MaterialUI, ChakraUI etc.

Ideea mea era să folosesc un React.Context pentru a injecta componentele astfel:

// Button Atom
const Button: FC = ({ children }) => (<button>{children}</button>)

const atoms = { button: Button }
const AtomContext = createContext(atoms);

// "higher" component
const HigherComponent: FC = () => {
  const atoms = useContext(AtomContext)
  // Logic ...

  return (
    <atoms.button>click me</atoms.button>
  )
}

export default function App() {
  return (
    <AtomContext.Provider value={atoms}>
      <HigherComponent />
    </AtomContext.Provider>
  );
}

Aceasta rezolvă problema mea. Dar nu sunt sigur dacă este o idee bună. Există modalități mai bune de a injecta dependențele UI? Care ar putea fi problemele cu abordarea mea?

Răspuns #1

Aceasta este o întrebare care poate avea mai multe răspunsuri în funcție de experiența personală.

Dar în general ideea de a trece componenta prin context este o oarecare utilizare greșită a acelui concept.

De asemenea, nu aduce prea multe beneficii să creezi o bibliotecă independentă care poate fi importată prin package.json sau să faci un folder cu componente și să le imporți.

Dacă trebuie să transmiți anumite lucruri specifice componentelor tale, poți avea un provider personalizat așa cum ai făcut acolo, dar în ceea ce privește componentele în sine, nu are sens să folosești contextul.

Dacă scopul tău final este să reduci lista de importuri a componentei cu hook-ul de context personalizat și să le obții doar în acest fel, cred că este un compromis prost în general.

Răspunsul #2

Tocmai am citit acest articol despre utilizarea contextului React pentru injecția dependențelor. Opinia autorilor este că utilizarea contextului React pentru a injecta dependențe non-React în componente este o practică bună. Totuși, nu sunt sigur dacă acest lucru se aplică și pentru injectarea unui set specific de componente React. Deoarece componentele React nu sunt altceva decât funcții, cred că ar trebui să fie în regulă să folosești contextul React și pentru asta.