为什么有人React代码能用5年不过时?高级工程师都在用的10个设计模式

// hooks/useOnlineStatus.js
import { useState, useEffect } from"react";

exportfunction useOnlineStatus() {
const [online, setOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleStatusChange = () => setOnline(navigator.onLine);
    
    window.addEventListener("online", handleStatusChange);
    window.addEventListener("offline", handleStatusChange);
    
    return() => {
      window.removeEventListener("online", handleStatusChange);
      window.removeEventListener("offline", handleStatusChange);
    };
  }, []);

return online;
}

function DocumentEditor() {
  const isOnline = useOnlineStatus();
  
  return (
    <div>
      {!isOnline && <Banner>网络已断开,修改将保存到本地</Banner>}
      <Editor />
    </div>
  );
}

// 不必要的全局状态
const searchStore = create((set) => ({
query: '',
setQuery: (q) =>set({ query: q })
}));

function SearchBox() {
const { query, setQuery } = useSearchStore();
return<input value={query} onChange={e => setQuery(e.target.value)} />;
}

function SearchBox() {
  const [query, setQuery] = useState("");
  
  return (
    <input 
      value={query}
      onChange={e => setQuery(e.target.value)}
      placeholder="搜索商品..."
    />
  );
}

function Tabs({ children }) {
const [activeIndex, setActiveIndex] = useState(0);

return (
    <div className="tabs-container">
      {React.Children.map(children, (child, index) => 
        React.cloneElement(child, { 
          isActive: index === activeIndex,
          onClick: () => setActiveIndex(index)
        })
      )}
    </div>
  );
}

function TabList({ children }) {
return<div className="tab-list">{children}</div>;
}

function Tab({ isActive, onClick, children }) {
return (
    <button 
      className={isActive ? "tab-active" : "tab"}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// 组装API
Tabs.List = TabList;
Tabs.Tab = Tab;

<Tabs>
  <Tabs.List>
    <Tabs.Tab>基本信息</Tabs.Tab>
    <Tabs.Tab>商品详情</Tabs.Tab>
    <Tabs.Tab>售后保障</Tabs.Tab>
  </Tabs.List>
</Tabs>

function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(data => {
      setUser(data);
      setLoading(false);
    });
  }, [userId]);

if (loading) return<Spinner />;
return<h1>{user.name}</h1>;
}

// 在组件外部就发起请求
const userResource = fetchUser(userId);

function UserProfile() {
  const user = userResource.read(); // 数据未就绪会自动suspend
  return <h1>{user.name}</h1>;
}

// 父组件
<Suspense fallback={<Spinner />}>
  <UserProfile />
</Suspense>

function SafeProductCard({ productId }) {
  return (
    <ErrorBoundary fallback={<ProductCardSkeleton />}>
      <Suspense fallback={<ProductCardSkeleton />}>
        <ProductCard id={productId} />
      </Suspense>
    </ErrorBoundary>
  );
}

// app/products/page.js (服务端组件,默认)
exportdefaultasyncfunction ProductsPage() {
// 直接在服务端查数据库,不走API
const products = await db.products.findMany();

return<ProductList products={products} />;
}

// components/ProductList.js (客户端组件)
"use client"; // 必须声明

import { useState } from"react";

function ProductList({ products }) {
const [sortBy, setSortBy] = useState("price");

// 需要交互的部分放客户端
return (
    <div>
      <select onChange={e => setSortBy(e.target.value)}>
        <option value="price">价格排序</option>
        <option value="sales">销量排序</option>
      </select>
      {products.sort(sortBy).map(p => <ProductCard key={p.id} {...p} />)}
    </div>
  );
}

function ComplexForm() {
  const [formData, setFormData] = useState({ /* 20个字段 */ });
  
  // 每次输入都触发整个表单re-render,卡爆
  return (
    <>
      <input 
        value={formData.name} 
        onChange={e => setFormData({...formData, name: e.target.value})}
      />
      {/* ...还有19个input */}
    </>
  );
}

function ComplexForm() {
const formRef = useRef();
const [realTimeValidField, setRealTimeValidField] = useState("");

const handleSubmit = () => {
    const formData = new FormData(formRef.current);
    // 提交时才获取所有值
  };

return (
    <form ref={formRef}>
      {/* 需要实时验证的用受控 */}
      <input 
        name="phone"
        value={realTimeValidField}
        onChange={e => setRealTimeValidField(e.target.value)}
      />
      {/* 其他用非受控 */}
      <input name="address" defaultValue="" />
      <button onClick={handleSubmit}>提交</button>
    </form>
  );
}

// store/userStore.js
const UserContext = createContext();

exportfunction UserProvider({ children }) {
const [user, setUser] = useState({ 
    name: "张三", 
    avatar: "/avatar.jpg",
    vipLevel: 5
  });

return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// 带selector的hook
exportfunction useUser(selector) {
const { user } = useContext(UserContext);
return selector ? selector(user) : user;
}

function UserName() {
  // 只订阅name,avatar变化不会导致re-render
  const name = useUser(state => state.name);
  return <span>{name}</span>;
}

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

function MyDropdown() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger className="your-custom-button">
        打开菜单
      </DropdownMenu.Trigger>
      
      <DropdownMenu.Content className="your-custom-menu">
        <DropdownMenu.Item className="menu-item">个人中心</DropdownMenu.Item>
        <DropdownMenu.Item className="menu-item">退出登录</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

function useAICompletion(prompt) {
const [response, setResponse] = useState("");
const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!prompt) return;
    
    setLoading(true);
    fetch("/api/zhipu-ai", {
      method: "POST",
      body: JSON.stringify({ prompt })
    })
    .then(res => res.json())
    .then(data => {
      setResponse(data.output);
      setLoading(false);
    });
  }, [prompt]);

return { response, loading };
}