首页 > 文章 > 前端

上下文、Redux 还是组合？

来源：dev.to

时间：2024-12-20 20:21:59 118浏览收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《上下文、Redux 还是组合？》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

这篇文章最初发布于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，并没有真正使用它。

上下文、Redux 还是组合？

这是 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 来
解决一个简单的问题。

我只是给出了下面代码的要点，但如果你真的想探索完整的
代码，在这里：用 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。我们还获得其他好处，例如
作为