React性能对比：导入store的currentUser与props传递，哪种更高效？

这是个非常实际的问题，尤其是在处理权限这类全局状态时，性能和可维护性往往需要权衡，咱们先聚焦你关心的性能维度来拆解：

1. 子组件直接从Store导入currentUser的性能表现 #

• 优势：主流状态管理库（比如MobX、Redux Toolkit）都做了精准的订阅优化——只有当currentUser中子组件实际依赖的字段（比如isAdmin）发生变化时，子组件才会触发重渲染。如果父组件本身没有依赖currentUser的变化（或者变化的字段不影响父组件），父组件不会跟着重渲染，避免了“父组件重渲染导致所有子组件强制更新”的连锁开销。
• 潜在注意点：如果你的Store订阅机制设计得不够高效（比如每次调用currentUser()都会触发全量更新），可能会有冗余渲染，但这种情况在成熟的状态管理方案里很少见。

2. 父组件传递currentUser/isAdmin作为Props的性能表现 #

• 劣势：默认情况下，只要父组件发生重渲染（不管是不是因为isAdmin变化），所有接收该Props的子组件都会跟着重渲染——哪怕子组件根本没用到这个Props，或者Props的值完全没变化。如果你的父组件有其他频繁变化的状态（比如表单输入、列表分页），这种“无意义重渲染”的开销会随着子组件数量增加而放大。
• 补救方案：如果一定要用Props传递，记得给子组件加上React.memo（函数组件）或者shouldComponentUpdate（类组件），让子组件只在Props实际变化时才重渲染。但这会增加额外的代码复杂度，而且对比直接取Store的方案，还是多了父组件重渲染时的Props比对开销。

总结建议 #

从性能优先级来看：

• 优先选择子组件直接从Store获取currentUser，尤其是当子组件数量较多、父组件本身有频繁重渲染的场景时，能最大化减少不必要的组件更新。为了避免代码重复，可以封装一个复用的自定义Hook，比如：

  // hooks/useCurrentUser.js
  import { currentUser } from "../../stores/RootStore";
  
  export function useCurrentUser() {
    return currentUser();
  }
  

  然后所有子组件都可以通过const { isAdmin } = useCurrentUser()来复用逻辑，既保持性能，又统一了状态获取方式。
• 如果你的子组件数量极少，且父组件几乎不会因为其他状态重渲染，那两种方案的性能差异可以忽略，这时候可以根据可维护性选择——比如传递Props更直观，父组件能统一控制权限状态的传递。

代码示例对比 #

方案1：子组件直接取Store

// ChildComponent.jsx
import React from "react";
import { useCurrentUser } from "../hooks/useCurrentUser";

export default function ChildComponent() {
  const { isAdmin } = useCurrentUser();
  return <div>{isAdmin ? "专属管理员内容" : "普通用户内容"}</div>;
}

方案2：父组件传Props（需配合React.memo优化）

// ParentComponent.jsx
import React from "react";
import ChildComponent from "./ChildComponent";
import { currentUser } from "../../stores/RootStore";

export default class ParentComponent extends React.Component {
  render() {
    const { isAdmin } = currentUser();
    return (
      <div>
        {isAdmin && <h1>Admin Panel</h1>}
        <ChildComponent isAdmin={isAdmin} />
        <AnotherChildComponent isAdmin={isAdmin} />
      </div>
    );
  }
}

// ChildComponent.jsx
import React from "react";

// 用React.memo包裹，避免父组件重渲染时无意义更新
export default React.memo(function ChildComponent({ isAdmin }) {
  return <div>{isAdmin ? "专属管理员内容" : "普通用户内容"}</div>;
});

内容的提问来源于stack exchange，提问作者seunadex