这篇文章最初发布于2023年2月23日@我的博客页面
我是受到最近科技公司裁员影响的开发人员之一。所以，我开始用 react 面试前端职位。
在其中一家公司，我在反应中遇到了一个经典的道具钻孔问题，
并被要求解决它。为了简单起见，给出的问题就像
这个：
export default function app() { const [user, setuser] = react.usestate(null); const handlelogin = () => setuser(userdetails); return ( company logo {user ? ( ) : ( )} );}function dashboard({ user }) { return ( );}function dashboardnav({ user }) { return ( );}function welcomeuser({ user }) { return welcome {user.name};}function userrole({ user }) { return role {user.role};}
登录后复制
正如您所观察到的，我们将 user 属性从 app 组件传递到
子组件welcomeuser 和userrole。中间组件 dashboard 和 dashboardnav 只是转发 props，并没有真正使用它。
这是 react 中的一个经典 prop 钻孔 问题。
有趣的是，面试官要求通过 react context api 来解决问题
或使用 redux。
通过 react 上下文解决
使用 context api 来解决这个问题，代码如下。
const usercontext = react.createcontext(undefined);export default function app() { const [user, setuser] = react.usestate(null); const handlelogin = () => setuser(userdetails); return ( company logo: context {user ? ( ) : ( )} );}function dashboard() { return ( );}function dashboardnav() { return ( );}function welcomeuser() { const user = react.usecontext(usercontext); return welcome {user.name};}function userrole() { const user = react.usecontext(usercontext); return role {user.role};}
登录后复制
我们正在创建 usercontext 并使用 provider 包装仪表板，以便
我们可以将我们想要的 props 传递给深度嵌套的子组件。这个解决方案
有效。
通过 redux 解决
所以，如果我们要走经典的 redux 路线，我们需要创建一个类似的
使用单个全局存储来构造和包装所有内容，其中包含用户
目的。
解决方案代码将包含大量样板文件，因为我们使用 redux 来
解决一个简单的问题。
我只是给出了下面代码的要点，但如果你真的想探索完整的
代码，在这里：用 redux 解决。
export default function app() { return ( );}function reduxapp({ user, setuser }) { const handlelogin = () => setuser(userdetails); return ( company logo: redux {user ? : } );}function dashboard() { return ( );}function dashboardnav() { return ( );}function welcomeuser({ user }) { return welcome {user.name};}const mapstatetopropswelcomeuser = (state) => ({ user: state });const connectedwelcomeuser = connect(mapstatetopropswelcomeuser)(welcomeuser);function userrole({ user }) { return role {user.role};}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 ( Company Logo {user ? ( ) : ( )} );}function Dashboard({ children }) { return {children};}function DashboardNav({ children }) { return {children};}function WelcomeUser({ user }) { return Welcome {user.name};}function UserRole({ user }) { return Role {user.role};}
登录后复制
如果你仔细想想，这是解决这个问题的简单方法，无需介绍
任何复杂性，如createcontext或react-redux。我们还获得其他好处，例如
作为
将来，如果我们在 dashboard 中引入任何状态并对其进行操作，我们的 dashboardnav 永远不会重新渲染。通过提供道具仅提供给所需的组件，我们拥有良好的可见性 用户的所有消费者，无需在组件（文件）之间导航 寻找他们。
这种模式并不新鲜，并且已经在 react 社区中讨论过了。一个这样好的演练是在 react 中使用组合来避免“prop drilling”
结论
但是，我收到面试官的反馈，是这样的
受访者没有正确理解问题，无法提供预期的解决方案。
我猜原因要么是面试官没有意识到这种模式，要么是我选择以一种没有被要求的方式解决问题。
话虽如此，我现在有动力写更多关于 react 中有趣的模式，希望它能吸引更广泛的受众。
分享这篇文章让我知道您的想法。
参考文献
codesandbox 解决方案使用上下文之前 – react 文档在 react 中使用组合来避免“prop drilling”博客答案：react 渲染行为（大部分）完整指南博客回答：为什么 react context 不是“状态管理”工具（以及为什么它不取代 redux）
以上就是上下文、Redux 还是组合？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2645654.html
