Kontext, Redux oder Komposition?

Dieser Beitrag wurde ursprünglich am 23. Februar 2023 auf meiner Blog-Seite veröffentlicht

Ich gehörte zu den Entwicklern, die von den jüngsten Entlassungen bei Technologieunternehmen betroffen waren. Also fing ich an, Interviews für Frontend-Positionen bei React zu geben.

In einem der Unternehmen wurde ich mit einem klassischen Problem beim Bohren von Propellern konfrontiert,
und wurde gebeten, es zu lösen. Der Einfachheit halber lautete die Aufgabe wie folgt:
dies:

export default function App() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo
      <div>
        {user ? (
          <Dashboard user={user} />
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard({ user }) {
  return (
    <div>
      <DashboardNav user={user} />
    </div>
  );
}

function DashboardNav({ user }) {
  return (
    <div>
      <WelcomeUser user={user} />
      <UserRole user={user} />
    </div>
  );
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

Wie Sie sehen können, übergeben wir die Benutzerstütze von der App-Komponente an die
untergeordnete Komponenten WelcomeUser und UserRole. Die Zwischenkomponenten Dashboard und DashboardNav leiten lediglich die Requisiten weiter und nutzen sie nicht wirklich.

Dies ist ein klassisches Propellerbohren-Problem in React.

Interessanterweise bat der Interviewer darum, das Problem entweder mit der React Context API zu lösen
oder durch Verwendung von Redux.

Lösen durch Reaktionskontext

Die Verwendung der Kontext-API zur Lösung dieses Problems würde wie der folgende Code aussehen.

const UserContext = React.createContext(undefined);

export default function App() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo: Context
      <div>
        {user ? (
          <UserContext.Provider value={user}>
            <Dashboard />
          </UserContext.Provider>
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <DashboardNav />
    </div>
  );
}

function DashboardNav() {
  return (
    <div>
      <WelcomeUser />
      <UserRole />
    </div>
  );
}

function WelcomeUser() {
  const user = React.useContext(UserContext);
  return <div>Welcome {user.name}</div>;
}

function UserRole() {
  const user = React.useContext(UserContext);
  return <div>Role {user.role}</div>;
}

Wir erstellen UserContext und umschließen das Dashboard mit Provider, damit
Wir können die gewünschten Requisiten an eine tief verschachtelte untergeordnete Komponente übergeben. Diese Lösung
funktioniert.

Lösung durch Redux

Wenn wir also den klassischen Redux-Weg gehen, müssen wir ein ähnliches
erstellen Strukturieren und verpacken Sie alles mit einem einzigen globalen Speicher, der den Benutzer
enthält Objekt.

Der Lösungscode würde eine Menge Boilerplate enthalten, da wir Redux für
verwenden ein einfaches Problem lösen.

Ich habe unten nur den Kern des Codes dargelegt, aber wenn Sie wirklich alles erkunden möchten
Code, los geht's: Lösen mit Redux.

export default function App() {
  return (
    <Provider store={store}>
      <ReduxConnectedApp />
    </Provider>
  );
}

function ReduxApp({ user, setUser }) {
  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo: Redux
      <div>
        {user ? <Dashboard /> : <button onClick={handleLogin}>Login</button>}
      </div>
    </div>
  );
}


function Dashboard() {
  return (
    <div>
      <DashboardNav />
    </div>
  );
}

function DashboardNav() {
  return (
    <div>
      <ConnectedWelcomeUser />
      <ConnectedUserRole />
    </div>
  );
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

const mapStateToPropsWelcomeUser = (state) => ({ user: state });
const ConnectedWelcomeUser = connect(mapStateToPropsWelcomeUser)(WelcomeUser);

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

const mapStateToPropsUserRole = (state) => ({ user: state });
const ConnectedUserRole = connect(mapStateToPropsUserRole)(UserRole);

Wir haben die Komponenten verbunden, die Zugriff auf den globalen Status benötigen
in Redux gespeichert.

Wie ich es gelöst habe

Nachdem ich über die Reaktionszusammensetzung gelesen hatte, löste ich das Problem, indem ich
herstellte Verwendung von Kinder-Requisiten, die so aussahen

export default function AppSolution() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo
      <div>
        {user ? (
          <Dashboard>
            <DashboardNav>
              <WelcomeUser user={user} />
              <UserRole user={user} />
            </DashboardNav>
          </Dashboard>
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard({ children }) {
  return <div>{children}</div>;
}

function DashboardNav({ children }) {
  return <div>{children}</div>;
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

Wenn Sie darüber nachdenken, ist dies der einfache Weg, dieses Problem zu lösen, ohne es einzuführen
jede Komplexität wie createContext oder React-Redux. Wir erhalten auch andere Vorteile wie
als

• Wenn wir in Zukunft einen Status in das Dashboard einführen und ihn manipulieren, wird unser DashboardNav wird nie neu gerendert.
• Indem wir die Stützen nur zu den benötigten Komponenten liefern, haben wir eine gute Sicht aller Verbraucher des Benutzers, ohne zwischen Komponenten (Dateien) navigieren zu müssen Suchen Sie nach ihnen.

Dieses Muster ist nicht neu und wurde in der React-Community bereits besprochen. Eine solche gute Komplettlösung ist die Verwendung von Composition in React zur Vermeidung von „Prop Drilling“

Abschluss

Allerdings habe ich das Feedback vom Interviewer bekommen und es läuft so ab

Der Befragte hat das Problem nicht richtig verstanden und war nicht in der Lage, die erwartete Lösung anzubieten.

Ich schätze, der Grund liegt darin, dass entweder der Interviewer sich dieses Musters nicht bewusst war oder ich mich entschieden habe, das Problem auf eine Art und Weise zu lösen, nach der nicht gefragt wurde.

Dennoch bin ich jetzt motiviert, mehr über interessante Muster in React zu schreiben, in der Hoffnung, dass es ein breiteres Publikum erreicht.

Lassen Sie mich wissen, was Sie denken, indem Sie diesen Artikel teilen.

Referenzen

• Codesandbox-Lösung
• Bevor Sie den Kontext verwenden – React Docs
• Komposition in Reaktion nutzen, um „Prop Drilling“ zu vermeiden
• Antworten im Blog: Eine (meistens) vollständige Anleitung zum React-Rendering-Verhalten
• Antworten im Blog: Warum React Context kein „State Management“-Tool ist (und warum es Redux nicht ersetzt)

Das obige ist der detaillierte Inhalt vonKontext, Redux oder Komposition?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!