React组件中动态CSS类切换与性能优化实践

import React, { useState } from "react";
import "./header.css"; // 导入CSS文件

function Header() {
  // 定义一个状态变量来控制菜单的开合，初始为false（关闭）
  const [hamState, setHamState] = useState(false);

  // 处理点击事件的函数，用于切换hamState的状态
  function abrirMenu() {
    console.log("click");
    setHamState((prevState) => !prevState); // 切换状态
  }

  // 根据hamState的值动态生成CSS类名
  // 如果hamState为true，则添加"open"类，否则为空字符串
  let openMenu = hamState ? "open" : "";

  return (
    <div>
      <header>
        <div className="menu">
          {/* 将动态生成的类名与静态类名"navbar"合并 */}
          <div className={`navbar ${openMenu}`}>
            <ul>
              <li>
                <a href="#recuperacao">É difícil ser programador?</a>
              </li>
              <li>
                <a href="#sobre">Se torne um programador</a>
              </li>
              <li>
                <a href="#depoimentos">Veja o que diz quem já fez</a>
              </li>
            </ul>
          </div>

          {/* 汉堡菜单的点击区域，通过label与隐藏的checkbox关联 */}
          <input type="checkbox" id="hamburguer" />
          <label htmlFor="hamburguer">
            {/* 汉堡图标元素，点击时触发abrirMenu函数 */}
            <div className="hamburguer" onClick={abrirMenu}></div>
          </label>
        </div>
      </header>
    </div>
  );
}

export default Header;

import React, { useState, useMemo } from "react"; // 导入useMemo
import "./header.css";

function Header() {
  const [hamState, setHamState] = useState(false);

  function abrirMenu() {
    console.log("click");
    setHamState((prevState) => !prevState);
  }

  // 使用useMemo缓存openMenu的计算结果
  // 只有当hamState变化时，才会重新计算openMenu的值
  const openMenu = useMemo(() => {
    return hamState ? "open" : "";
  }, [hamState]); // 依赖项数组，当hamState变化时触发重新计算

  return (
    <div>
      <header>
        <div className="menu">
          <div className={`navbar ${openMenu}`}>
            <ul>
              <li>
                <a href="#recuperacao">É difícil ser programador?</a>
              </li>
              <li>
                <a href="#sobre">Se torne um programador</a>
              </li>
              <li>
                <a href="#depoimentos">Veja o que diz quem já fez</a>
              </li>
            </ul>
          </div>

          <input type="checkbox" id="hamburguer" />
          <label htmlFor="hamburguer">
            <div className="hamburguer" onClick={abrirMenu}></div>
          </label>
        </div>
      </header>
    </div>
  );
}

export default Header;

/* 基础导航栏样式 */
.navbar {
  margin: 0 auto;
}
.navbar ul {
  width: 100%;
  padding: 20px 0;
  list-style: none;
}
.navbar li {
  display: inline;
  padding: 0 60px;
}
.navbar li a {
  font-size: 18px;
  text-decoration: none;
  color: rgb(105, 1, 190);
  font-weight: bold;
  transition: 0.5s ease; /* 为链接hover效果添加过渡 */
}

/* 汉堡菜单图标样式 */
input[type="checkbox"] {
  display: none; /* 隐藏原生的checkbox */
}
.hamburguer {
  display: none; /* 默认隐藏，在小屏幕下显示 */
  width: 70px;
  height: 70px;
  position: fixed;
  top: 20px;
  right: 0;
  cursor: pointer;
}
/* 汉堡图标线条样式 */
.hamburguer::after,
.hamburguer::before {
  content: "";
  position: absolute;
  height: 10%;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  transition: 1s ease; /* 为线条变化添加过渡 */
}
.hamburguer::after {
  width: 70%;
  top: 30%;
  left: 15%;
}
.hamburguer::before {
  width: 50%;
  top: 50%;
  left: 35%;
}

/* 响应式布局：小屏幕下的样式 */
@media screen and (max-width: 1080px) {
  .navbar ul {
    position: fixed; /* 固定定位，覆盖整个屏幕 */
    top: 100px;
    right: 0;
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(121, 4, 217); /* 菜单背景色 */
    transition: transform 0.6s ease-in; /* 为菜单滑入滑出添加过渡 */
    transform: translateX(100%); /* 默认状态：菜单完全移出屏幕右侧 */
  }
  /* 当.open类存在时，菜单滑入 */
  .open {
    transform: translateX(0); /* 菜单完全显示 */
  }
  .navbar ul li {
    padding: 15px 0;
  }
  .navbar ul li a {
    color: white;
    transition: 0.3s ease-in;
  }
  .hamburguer {
    display: inline-block; /* 在小屏幕下显示汉堡图标 */
  }

  /* 汉堡图标点击后的动画效果 */
  #hamburguer:checked ~ label .hamburguer::after {
    transform: rotate(225deg);
    top: 45%;
    background-color: white;
  }
  #hamburguer:checked ~ label .hamburguer::before {
    transform: rotate(-225deg);
    left: 15%;
    width: 70%;
    top: 45%;
    background-color: white;
  }
}