副作用管理不善

這是不良效果管理的經(jīng)典示例?？雌饋?lái)很眼熟嗎？

// 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>
  );
};

常見(jiàn)錯(cuò)誤和修復(fù)

1) 混亂的數(shù)據(jù)獲取

糟糕的數(shù)據(jù)處理產(chǎn)生的錯(cuò)誤比它解決的錯(cuò)誤還要多。這是一種更簡(jiǎ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）忘記清理

總是清理干凈自己：

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) 忽略競(jìng)爭(zhēng)條件

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

// 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 之前請(qǐng)三思：有時(shí)候，你可能根本不需要它。
• 保持專注：一種效果應(yīng)該承擔(dān)一種責(zé)任。
• 始終清理：訂閱、間隔和事件監(jiān)聽(tīng)器需要關(guān)注。
• 使用正確的工具：像 React Query 這樣的庫(kù)可以簡(jiǎn)化數(shù)據(jù)獲取和緩存。
• 不要用 eslint-disable 作弊：修復(fù)依賴問(wèn)題而不是隱藏它們。

性能盲點(diǎn)

讓我們來(lái)談?wù)勀切┩低得男阅軉?wèn)題。他們是那種在雷達(dá)下飛行的人，因?yàn)橐磺锌雌饋?lái)都很好——直到事實(shí)并非如此。讓我們揭開(kāi)這些無(wú)聲的罪魁禍?zhǔn)?，看看如何解決它們。

問(wèn)題

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

// 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)問(wèn)題嗎？讓我們把它們分解一下。

修復(fù)

1) 記住昂貴的計(jì)算

不要在每次渲染時(shí)重新計(jì)算所有內(nèi)容，而是使用 useMemo 來(lái)緩存結(jié)果：

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

這避免了在每次渲染時(shí)重新計(jì)算數(shù)據(jù)并重新創(chuàng)建事件處理程序。它還可以防止帶有備忘錄的子組件不必要的重新渲染。

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

糟糕的狀態(tài)管理也會(huì)降低性能。這是處理搜索結(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>
  );
};

去抖動(dòng)確保我們不會(huì)在每次擊鍵時(shí)獲取數(shù)據(jù)，從而減少不必要的 API 調(diào)用和重新渲染。

快速性能提示

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

結(jié)論

構(gòu)建組件并不是什么復(fù)雜的事情，但說(shuō)實(shí)話，我們很容易養(yǎng)成壞習(xí)慣。我犯過(guò)這些錯(cuò)誤中的每一個(gè)（有時(shí)仍然會(huì)犯）。沒(méi)關(guān)系。重要的是盡早發(fā)現(xiàn)它們、修復(fù)它們并避免粗糙的代碼庫(kù)。

更好組件的快速清單

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

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

? 狀態(tài)和效果：集中效果，正確清理它們，并讓現(xiàn)代工具處理復(fù)雜的數(shù)據(jù)獲取。

? 性能：不要為了優(yōu)化而優(yōu)化——首先要衡量。在需要時(shí)巧妙地使用 memo、useMemo 和 useCallback 等工具。

? 從簡(jiǎn)單開(kāi)始：解決你現(xiàn)在遇到的問(wèn)題，而不是將來(lái)可能遇到的問(wèn)題。

最好的組件不是華而不實(shí)或過(guò)于聰明 - 它們是您的團(tuán)隊(duì)可以在六個(gè)月內(nèi)閱讀和維護(hù)的組件。

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