react相关

react受控组件和非受控组件

总结：判断是否受react中state控制的，就是有没有设置Value

1. 非受控组件:没有设置value或者value不是state
2. 受控组件：

a. 设置了value/checked的表单组件，其vaule/checked必须是react组件的state，并且有onChange事件来修改state

b. 组件自己不更新值，而是把值传递给父组件，让父组件决定是否更改。

react路由传参

方式	优点	缺点	适用场景
动态路由参数	参数在地址栏中可见，直观明了；适用于 SEO	不适合传递复杂类型的数据	需要在 URL 中明确标识的参数
Query 参数	可传递多个参数，灵活；更适合传递可选信息	需要手动解析，参数暴露在地址栏中	非关键性辅助参数
state 传参	支持传递复杂数据类型，参数不暴露在地址栏中	页面刷新后数据丢失	需要保护参数隐私或传递复杂对象

  // 动态路由参数
  <Link to="/product/42">访问商品 ID 为 42 的页面</Link>
  <Route path="/product/:id" element={<Product />} />
  const { id } = useParams();
  // Query 参数
  <Link to="/product?id=42">访问商品 ID 为 42 的页面</Link>
  <Route path="/product" element={<Product />} />
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id'); 
  // state传递参数
  <Link to="/product" state={{ id: 42 }}>访问商品 ID 为 42 的页面</Link>
  <Route path="/product" element={<Product />} />
  const location = useLocation();
  const { id } = location.state || {};

react-router和react-router-dom有什么区别？

功能/特性	react-router	react-router-dom
功能定位	提供路由逻辑，但不关心运行环境	为浏览器环境提供完整的路由解决方案
是否依赖浏览器环境	否，适用于所有场景（Web、React Native、嵌入式等）	是，专注于浏览器和 Web 开发
核心工具	路由逻辑、Hook、工具函数	包含 react-router 的功能，并封装 Web 专用工具
常用组件	Route、Routes 等	BrowserRouter、HashRouter、Link 等
适用场景	用于通用跨环境场景	用于 Web 项目
路由历史管理	提供基础支持，可由适配器管理	提供 BrowserRouter 和 HashRouter 等支持

路由懒加载

实现方式 React 中的路由懒加载通常结合 React 的 React.lazy 和 Suspense 方法，以及 react-router-dom 路由库进行实现。

1. 使用 React.lazy 实现动态引入组件 React.lazy 是 React 中用于懒加载组件的工具，它可以将组件分割为独立的代码块，动态加载时才执行。

2. 使用 Suspense 组件实现加载提示 因为懒加载是异步的，当组件仍在加载时，可以通过 React 的 Suspense 组件定义一个加载状态（如 “Loading...” 样式）。

3. 配合 react-router-dom 实现路由懒加载 在路由配置中，可以将每个路由的组件设置为懒加载的。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// 使用 React.lazy 动态加载组件
const Home = lazy(() => import('./pages/Home')); // 首页组件
const About = lazy(() => import('./pages/About')); // 关于我们组件
const Contact = lazy(() => import('./pages/Contact')); // 联系我们组件

function App() {
  return (
    <BrowserRouter>
      {/* Suspense 提供加载状态 */}
      <Suspense fallback={<div>加载中...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;