副作用管理不善

這是一個不良效果管理的經(jīng)典例子?？雌饋砗苎凼靻幔?

// Focused components for better clarity
const Navigation = ({ children }) => {
  return <nav>{children}</nav>;
};

// Pass data only where required
const App = () => {
  const user = useUser();
  return (
    <Layout>
      <Navigation>
        <UserMenu user={user} />
      </Navigation>
    </Layout>
  );
};

常見錯誤和修復(fù)

1) 混亂的資料取得

糟糕的資料處理產(chǎn)生的錯誤比它解決的錯誤還要多。這是一種更簡潔的方法：

// Behold, the over-engineered button
const Button = ({ 
  children,
  variant = 'primary',
  size = 'medium',
  isFullWidth = false,
  isDisabled = false,
  isLoading = false,
  leftIcon,
  rightIcon,
  onClick,
  customClassName,
  style,
  loadingText = 'Loading...',
  tooltipText,
  animationType,
  // ... 10 more props
}) => {
  // 50 lines of prop processing logic
  return (
    <button 
      className={generateComplexClassNames()}
     >



<h3>
  
  
  Why This Hurts
</h3>

<ul>
<li>Your “simple” button now requires an instruction manual.</li>
<li>Most of those 15+ props will never be used.</li>
<li>Making updates becomes risky because you have to account for endless combinations.</li>
<li>Writing tests becomes painful, with a hundred possible scenarios to consider.</li>
</ul>

<h3>
  
  
  Better Approach:
</h3>

<p>Instead of building for every imaginable scenario, start small and let your components grow as needed.<br>
</p>

<pre class="brush:php;toolbar:false">// Start simple
const Button = ({ children, onClick, variant = 'primary' }) => {
  return (
    <button 
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// Create specific buttons when you actually need them
const LoadingButton = ({ isLoading, children, ...props }) => {
  return (
    <Button {...props}>
      {isLoading ? 'Loading...' : children}
    </Button>
  );
}

2) 忘記清理

總是清理乾淨(jìng)自己：

const UserProfile = ({ userId }) => {  
  const [user, setUser] = useState(null);  
  const [posts, setPosts] = useState([]);  

  // Dependency array woes
  useEffect(() => {  
    fetchUserData(userId);  
    fetchUserPosts(userId);  
    // No cleanup? Yikes.
  }, []); // eslint-disable-line react-hooks/exhaustive-deps  

  // Multiple effects, all tangled
  useEffect(() => {  
    const subscription = subscribeToUserStatus(userId);  
  }, [userId]);  

  // Cleanup? What cleanup?
  useEffect(() => {  
    const interval = setInterval(checkNotifications, 5000);  
  }, []);  
};

3) 忽略競爭條件

使用此技術(shù)避免重疊請求：

// Improved version
const UserProfile = ({ userId }) => {  
  const { data: user, isLoading } = useQuery(  
    ['user', userId],  
    () => fetchUserData(userId)  
  );  

  // Keep concerns separate
  const { data: posts } = useQuery(  
    ['posts', userId],  
    () => fetchUserPosts(userId),  
    { enabled: !!user }  
  );  
};

快速提示

• 使用 useEffect 之前請三思：有時候，你可能根本不需要它。
• 保持專注：一種效果應(yīng)該承擔(dān)一種責(zé)任。
• 始終清理：訂閱、間隔和事件監(jiān)聽器需要注意。
• 使用正確的工具：像 React Query 這樣的函式庫可以簡化資料取得和快取。
• 不要用 eslint-disable 作弊：修復(fù)依賴問題而不是隱藏它們。

性能盲點

讓我們來談?wù)勀切┩低得男軉栴}。他們是那種在雷達(dá)下飛行的人，因為一切看起來都很好——直到事實並非如此。讓我們揭開這些無聲的罪魁禍?zhǔn)?，看看如何解決它們。

問題

這是一個存在一些微妙性能缺陷的組件：

// Please, no more of this
const UserDashboard = () => {
  const [userData, setUserData] = useState(null);
  const [orders, setOrders] = useState([]);
  const [notifications, setNotifications] = useState([]);
  const [settings, setSettings] = useState({});
  const [isEditing, setIsEditing] = useState(false);
  const [activeTab, setActiveTab] = useState('profile');

  // 15 separate useEffects
  // 10 different event handlers
  // Multiple conditional renders
  // 300+ lines of chaos
};

你能發(fā)現(xiàn)問題嗎？讓我們把它們分解一下。

修補

1) 記住昂貴的計算

不要在每次渲染時重新計算所有內(nèi)容，而是使用 useMemo 來快取結(jié)果：

// A cleaner, smarter approach
const UserDashboard = () => {
  return (
    <div>
      <UserProfile />
      <OrderHistory />
      <NotificationCenter />
      <UserSettings />
    </div>
  );
};

這避免了在每次渲染時重新計算資料並重新建立事件處理程序。它還可以防止帶有備忘錄的子元件不必要的重新渲染。

2) 高效率的狀態(tài)更新

糟糕的狀態(tài)管理也會降低效能。這是處理搜尋結(jié)果等更新的更好方法：

// This is exhausting
const App = () => {
  const [user, setUser] = useState({});
  return (
    <Layout user={user}>
      <Sidebar user={user}>
        <Navigation user={user}>
          <UserMenu user={user} />
        </Navigation>
      </Sidebar>
    </Layout>
  );
};

去抖動確保我們不會在每次按鍵時獲取數(shù)據(jù)，從而減少不必要的 API 呼叫和重新渲染。

快速效能提示

• 不要過度使用記憶：僅在值得的時候進行最佳化。
• 避免內(nèi)嵌函數(shù)：穩(wěn)定的引用可以提高效能。
• 保持 props 可預(yù)測：淺且穩(wěn)定的 props 有助於組件保持高效。
• 分解大型清單：像react-window這樣的工具可以優(yōu)雅地處理大資料集。
• 將狀態(tài)移得更近：僅在實際需要的地方管理狀態(tài)。
• 使用 DevTools 進行分析：最佳化前始終進行測量。

結(jié)論

建構(gòu)元件並不是什麼複雜的事情，但說實話，我們很容易養(yǎng)成壞習(xí)慣。我犯過這些錯誤中的每一個（有時仍然會犯）。沒關(guān)係。重要的是儘早發(fā)現(xiàn)它們、修復(fù)它們並避免粗糙的程式碼庫。

更好組件的快速清單

? 單一職責(zé)：如果您無法用一句話概括組件的工作，那麼就該將其分解。

? 道具管理：層層傳遞道具？考慮使用上下文或利用組合來代替。

? 狀態(tài)與效果：集中效果，正確清理它們，並讓現(xiàn)代工具處理複雜的資料擷取。

? 效能：不要為了最佳化而最佳化－首先要衡量。在需要時巧妙地使用 memo、useMemo 和 useCallback 等工具。

? 從簡單開始：解決你現(xiàn)在遇到的問題，而不是將來可能遇到的問題。

最好的組件不是華而不實或過於聰明 - 它們是您的團隊可以在六個月內(nèi)閱讀和維護的組件。

記?。?/strong>這些不是硬性規(guī)則，只是指導(dǎo)方針。有時你會打破它們，那很好。我們的目標(biāo)不是完美，而是建立一些組件，讓您在以後重新審視自己的職業(yè)選擇時不會產(chǎn)生疑問。