这篇文章最初发布于2023年2月23日@我的博客页面
我是受到最近科技公司裁员影响的开发人员之一。所以，我开始用 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>;
}
正如您所观察到的，我们将 user 属性从 App 组件传递到
子组件WelcomeUser 和UserRole。中间组件 Dashboard 和 DashboardNav 只是转发 props，并没有真正使用它。
这是 React 中的一个经典 prop 钻孔 问题。
有趣的是，面试官要求通过 React Context API 来解决问题
或使用 Redux。
使用 context 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 并使用 Provider 包装仪表板，以便
我们可以将我们想要的 props 传递给深度嵌套的子组件。这个解决方案
有效。
所以，如果我们要走经典的 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中。
阅读了有关反应组合的内容后，我通过制作解决了问题
使用 Children 道具，看起来像这样
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。我们还获得其他好处，例如
作为
这种模式并不新鲜，并且已经在 React 社区中讨论过。一个这样好的演练是在 React 中使用组合来避免“Prop Drilling”
但是，我收到面试官的反馈，是这样的
受访者没有正确理解问题，无法提供预期的解决方案。
我猜原因要么是面试官没有意识到这种模式，要么是我选择以一种没有被要求的方式解决问题。
话虽如此，我现在有动力写更多关于 React 中有趣的模式，希望它能吸引更广泛的受众。
分享这篇文章让我知道您的想法。
参考文献
以上是上下文、Redux 还是组合？的详细内容。更多信息请关注PHP中文网其他相关文章！
