1. 理解从jQuery到React的范式转变
jquery通过直接操作dom来改变页面状态，这是一种命令式编程范式。开发者明确告诉浏览器“做什么”以及“如何做”。而react则倡导声明式编程，开发者只需描述“想要什么”样的ui状态，react会负责高效地更新dom以匹配这个状态。因此，将jquery代码转换为react时，核心在于将直接的dom操作转换为基于组件状态和生命周期的管理。
2. 实现点击事件的React化：菜单切换
原始的jQuery代码通过toggleClass直接修改元素的类名来控制菜单的显示和汉堡图标的动画。在React中，我们应使用组件状态来控制这些类名。
2.1 jQuery 原理回顾
以下是原始jQuery中处理导航菜单点击的代码片段：
$('.navTrigger').click(function () {
$(this).toggleClass('active'); // 切换汉堡图标的'active'类
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list"); // 切换主菜单的'show_list'类
$("#mainListDiv").fadeIn(); // 菜单淡入效果
});2.2 React 实现思路
- 状态管理： 使用useState钩子来跟踪导航触发器（汉堡图标）是否处于“激活”状态。
- DOM引用 (Refs)： 对于某些需要直接操作DOM的场景，例如Codepen中fadeIn的效果（尽管通常通过CSS过渡实现），或者当CSS过渡复杂到难以纯粹通过状态控制时，可以使用useRef获取DOM元素的引用。在我们的案例中，mainListDiv的类切换可以通过状态直接控制，但为了遵循提供的解决方案，我们也可以使用useRef。
- 事件处理： 将点击事件绑定到React组件的事件处理函数上，并在函数内部根据逻辑更新状态或操作Ref。
- 条件类名绑定： 根据组件状态值，动态地为相关元素添加或移除CSS类。
2.3 代码示例
我们将使用函数式组件和React Hooks (useState, useRef) 来实现。
import React, { useState, useRef } from 'react';
import './Navbar.css'; // 确保导入了与Codepen一致的CSS文件
function Navbar() {
// 状态：控制导航触发器（汉堡图标）的激活状态
const [isActive, setIsActive] = useState(false);
// Ref：获取主列表Div的DOM引用，用于直接操作其类名
const mainListDivRef = useRef(null);
// 点击事件处理函数
const onClickNavTrigger = () => {
// 切换汉堡图标的激活状态
setIsActive(prevIsActive => !prevIsActive);
// 使用Ref直接操作mainListDiv的类名，以实现show_list的切换
if (mainListDivRef.current) {
mainListDivRef.current.classList.toggle("show_list");
// 对于jQuery的fadeIn效果，通常通过CSS过渡或动画配合show_list类来实现。
// 例如，在CSS中定义：
// .main_list { opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in, visibility 0.3s; }
// .show_list { opacity: 1; visibility: visible; }
}
};
return (
);
}
export default Navbar;2.4 注意事项
- 状态优先： 尽可能通过组件状态来控制UI的显示和行为，而不是直接操作DOM。useRef应作为一种辅助手段，用于处理那些难以通过React状态直接表达的DOM交互（例如集成第三方库、管理焦点、媒体播放等）。
- CSS过渡： jQuery的fadeIn等动画效果在React中通常通过CSS过渡或动画（配合状态控制的类名）来实现，这能提供更好的性能和更平滑的用户体验。
- className vs class： 在JSX中，HTML的class属性需要写成className。
3. 实现滚动事件的React化：导航栏固定效果
jQuery通过监听window的scroll事件，判断滚动位置来动态添加或移除导航栏的affix类。在React中，我们使用useEffect钩子来管理这类副作用。
3.1 jQuery 原理回顾
以下是原始jQuery中处理滚动事件的代码片段：
$(window).scroll(function() {
if ($(document).scrollTop() > 50) { // 判断滚动距离是否超过50px
$('.nav').addClass('affix'); // 添加'affix'类
console.log("OK");
} else {
$('.nav').removeClass('affix'); // 移除'affix'类
}
});3.2 React 实现思路
- 副作用管理： 使用useEffect钩子来在组件挂载时添加全局事件监听器（如scroll事件），并在组件卸载时移除它，以防止内存泄漏。
- 状态管理： 使用useState来跟踪导航栏是否应该处于“固定”（affix）状态。
- 事件处理： 定义一个处理滚动事件的函数，在该函数中根据滚动位置更新状态。
- 条件类名： 根据“固定”状态，动态地为导航栏元素添加或移除affix类。
3.3 代码示例
我们将上述点击事件的逻辑与滚动事件的逻辑整合到一个组件中。
import React, { useState, useRef, useEffect } from 'react';
import './Navbar.css'; // 确保导入了与Codepen一致的CSS文件
function Navbar() {
// 状态：控制导航触发器（汉堡图标）的激活状态
const [isActive, setIsActive] = useState(false);
// Ref：获取主列表Div的DOM引用
const mainListDivRef = useRef(null);
// 状态：控制导航栏是否处于固定（affix）状态
const [isNavAffixed, setIsNavAffixed] = useState(false);
// 点击事件处理函数
const onClickNavTrigger = () => {
setIsActive(prevIsActive => !prevIsActive);
if (mainListDivRef.current) {
mainListDivRef.current.classList.toggle("show_list");
}
};
// 滚动事件处理函数
const handleScroll = () => {
if (window.scrollY > 50) { // 判断滚动距离是否超过50px
setIsNavAffixed(true);
} else {
setIsNavAffixed 
