コンテキスト、Redux、それとも合成?-jsチュートリアル-php.cn

コンテキスト、Redux、それとも合成?

Mary-Kate Olsen

リリース： 2024-12-19 11:28:09

オリジナル

600 人が閲覧しました

この投稿は元々、2023 年 2 月 23 日に私のブログページで公開されたものです

私は、テクノロジー企業による最近の人員削減の影響を受けた開発者の一人です。そこで、react でフロントエンドのポジションの面接を受け始めました。

ある会社で、私は React における古典的なプロップドリルの問題を与えられました。
そしてそれを解決するように求められました。物事を簡単にするために、与えられた問題は次のようなものでした
これ:

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>;
}

ログイン後にコピー

ご覧のとおり、ユーザープロパティを App コンポーネントから
に渡しています。子コンポーネント WelcomeUser および UserRole。中間コンポーネントである Dashboard と DashboardNav は、props を転送するだけであり、実際には使用しません。

Context, Redux or Composition?

これは、React における古典的な プロップドリル の問題です。

興味深いことに、インタビュアーは React Context API のいずれかを使用して問題を解決するよう求めました
または Redux を使用します。

React コンテキストによる解決

コンテキスト API を使用してこの問題を解決すると、以下のコードのようになります。

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>;
}

ログイン後にコピー

UserContext を作成し、プロバイダーでダッシュボードをラップしています。
必要なプロパティを深くネストされた子コンポーネントに渡すことができます。この解決策
動作します。

Context, Redux or Composition?

Reduxによる解決

したがって、古典的な Redux ルートを進む場合は、同様の
を作成する必要があります。を構造化し、ユーザー
を含む単一のグローバルストアですべてをラップします。物体。

には redux を使用しているため、ソリューションコードには大量の定型文が含まれることになります。簡単な問題を解決します。

以下にコードの要点を示しましたが、実際に完全に調べたい場合は、
コード、どうぞ: 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);

ログイン後にコピー

グローバル状態へのアクセスが必要なコンポーネントを接続しました
redux に保存されます。

どうやって解決したか

反応構成について読んだので、次のようにして問題を解決しました
子プロップの使用は次のようになります

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>;
}

ログイン後にコピー

考えてみれば、これは導入せずにこの問題を解決する簡単な方法です
createContextやreact-reduxなどの複雑さ。その他にも次のような特典があります

として