ReactJS 条件渲染组件最佳实践及现有实现合理性咨询

写法合规性说明 #

你当前的写法属于合法的JSX语法，React不会抛出错误，但不属于函数式组件的主流最佳实践，存在可维护性差、性能优化空间不足的问题。

优化方案 #

1. 抽离独立逻辑为可复用小组件 #

将你的dynamicLogin函数改造为独立的通用组件，还可通过React.memo避免不必要的重渲染，性能远优于组件内部定义的渲染函数。改造后的代码如下：

import React from 'react'

// 登录/登出按钮通用组件，memo包裹实现props不变时跳过重渲染
const AuthButton = React.memo(({ ctx }) => {
  return (
    <button
      className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800"
      onClick={ctx.isLoggedIn ? ctx.onLogout : ctx.onLogin}
    >
      {ctx.isLoggedIn ? 'Logout' : 'Login'}
    </button>
  )
})

同理你代码中的dynamicWarenkorb也可以按照相同逻辑抽离为独立组件，代码冗余度会大幅降低。

2. 简化条件渲染写法 #

你当前使用的三元运算符返回空字符串的写法可以替换为更常用的短路求值写法，可读性更高：

// 优化前
{ctx.visible ? <Warenkorb></Warenkorb> : ""}
// 优化后
{ctx.visible && <Warenkorb />}

3. 重构原组件的渲染逻辑 #

移除组件内部定义的所有渲染函数，直接引入抽离好的组件，最终渲染代码如下：

return (
  <div>
    {ctx.visible && <Warenkorb />}
    <nav className="flex justify-between px-4 bg-red-400 text-white text-xl fixed top-0 left-0 w-full">
      <div>
        <h3 className="p-4 inline">
          {ctx.isLoggedIn ? "Eingeloggt!" : "Not Logged In"}
        </h3>
        {/* 直接引入抽离的按钮组件 */}
        <AuthButton ctx={ctx} />
      </div>
      {/* 直接引入抽离的购物车组件 */}
      <WarenkorbComponent ctx={ctx} />
      {/* 其余原有代码 */}
    </nav>
  </div>
)

性能提升说明 #

组件内部定义的渲染函数会在每次父组件重渲染时被重新创建、全量执行内部逻辑，没有缓存机制。抽离为React.memo包裹的组件后，只要传入的ctx相关属性没有发生变化，组件就会直接复用上次的渲染结果，跳过重渲染流程，能有效减少不必要的性能开销。

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