React中封装可复用组件避免重复代码的最佳方法

你当前代码的核心问题是三个条件分支中渲染的<Menu />组件属性完全一致，重复编写不仅增加代码量，后续修改组件属性时需要同步改多处，极易出现漏改导致的bug，另外原代码还存在隐藏问题：第三个判断条件是第二个条件的子集，当account、isMenuActive、!wButton、logedin同时为真时，会在页面渲染出两个完全相同的Menu组件。

最优解决方式：合并显示条件，单次渲染组件 #

所有显示Menu的场景都有一个公共前提：!wButton，在此基础上满足任意一个场景即可显示：

• 未登录状态（!account）
• 已登录且菜单处于激活状态（account && isMenuActive，已经覆盖了logedin为真的场景，不需要重复写判断）

写法1：直接在JSX中合并条件（适合简单判断场景） #

可以直接把重复的组件提取出来，合并所有显示条件，同时简化不必要的事件绑定写法：

{!wButton && (!account || isMenuActive) && (
  <Menu
    color="black"
    size="medium"
    onClick={mobileMenu}
  />
)}

注：不需要传参的事件直接传函数引用即可，onClick={mobileMenu}等价于onClick={() => mobileMenu()}，还能避免匿名函数导致的不必要重渲染。

写法2：提前计算显示状态（适合复杂逻辑场景） #

如果判断逻辑后续会继续扩展，建议在JSX之外提前计算好显示状态，代码可读性更高，后续修改逻辑也更方便：

// 在组件return JSX之前的逻辑区域计算显示状态
const shouldShowMenu = !wButton && (
  !account // 未登录场景
  || (account && isMenuActive) // 已登录且菜单激活场景
);

// JSX区域只保留一次组件渲染
return (
  <div>
    {/* 其他页面组件 */}
    {shouldShowMenu && (
      <Menu
        color="black"
        size="medium"
        onClick={mobileMenu}
      />
    )}
    {/* 其他页面组件 */}
  </div>
)

新手避免同类重复代码的通用原则 #

• 只要发现完全相同的组件/JSX结构被写了多次，第一时间找公共的显示/渲染逻辑，把所有触发渲染的条件合并为一个布尔值，只写一次结构
• 如果重复的JSX有少量属性差异，可以把公共部分抽离为独立小组件，把差异属性作为入参传入
• 不要把过长的判断逻辑直接堆在JSX里，提前计算成有明确语义的变量（比如shouldShowMenu），代码可维护性会高很多
• 写完条件渲染后可以检查下有没有条件包含关系，避免出现重复渲染的bug

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