常见的 React 代码异味

在 React 开发中，代码异味（Code Smells） 是指代码中潜在问题的信号，虽然它们不会直接导致程序崩溃，但暗示代码结构或逻辑可能存在缺陷。识别并解决这些代码异味是提升代码质量、可维护性和性能的关键。

1. 组件臃肿

问题：单个组件承担了太多职责，例如获取数据、渲染和处理事件。

function ProductPage() {
  const [data, setData] = useState([]);
  useEffect(() => fetchData(), []);
  const handleAddToCart = () => { ... };
  return (
    

      {data.map(item => )}
      Add to Cart
    
  );
}

解决方案：将其拆分为更小、更专注的组件。

function ProductPage() {
  return (
    

      
      
    
  );
}

function ProductList() {
  const [data, setData] = useState([]);
  useEffect(() => fetchData(), []);
  return data.map(item => );
}

function CartButton() {
  const handleAddToCart = () => { ... };
  return Add to Cart;
}

2. 属性钻取（Props Drilling）

问题：通过多层组件传递属性。

解决方案 1：使用组合。

解决方案 2：使用上下文（Context）。

const ProductContext = React.createContext();

function App() {
  const [product, setProduct] = useState({ id: 1, name: 'Example Product' }); // 示例状态
  return (
    
      
    
  );
}

function ProductList() {
  const product = useContext(ProductContext);
  return ;
}

3. 嵌套三元运算符地狱

问题：使用嵌套的三元运算符进行复杂的条件渲染。

import React from 'react';

const App = ({ user }) => {
  return (
    <>
      {user.isLoggedIn ? (
        user.isAdmin ? (
          
Welcome Admin, {user.name}!
        ) : (
          
Welcome User, {user.name}!
        )
      ) : (
        
Please log in to continue.
      )}
    
  );
};

export default App;

解决方案 1：使用 if-else 语句

import React from 'react';

const App = ({ user }) => {
  if (!user.isLoggedIn) {
    return 
Please log in to continue.
;
  }

  if (user.isAdmin) {
    return 
Welcome Admin, {user.name}!
;
  }

  return 
Welcome User, {user.name}!
;
};

export default App;

解决方案 2：使用 switch 语句

import React from 'react';

const App = ({ user }) => {
  const renderMessage = () => {
    switch (true) {
      case user.isLoggedIn && user.isAdmin:
        return 
Welcome Admin, {user.name}!
;
      case user.isLoggedIn:
        return 
Welcome User, {user.name}!
;
      default:
        return 
Please log in to continue.
;
    }
  };

  return <>{renderMessage()};
};

export default App;

4. 重复逻辑

问题：在多个组件中重复相同的逻辑代码。

function calculateTotalPrice(items) {
  return items.reduce((total, item) => total + item.price, 0);
}

function getTotalPriceForCart(cartItems) {
  return cartItems.reduce((total, item) => total + item.price, 0);
}

解决方案：将重复的逻辑抽取到一个独立的函数或自定义钩子中。

function useTotalPrice(items) {
  return useMemo(() => {
    return items.reduce((total, item) => total + item.price, 0);
  }, [items]);
}

5. 过多的状态

问题：直接管理派生状态，导致状态之间的关系变得复杂且难以维护。

const [isLoggedIn, setIsLoggedIn] = useState(user !== null);

解决方案：使用派生状态。

const isLoggedIn = !!user; // Converts 'user' to boolean

6. 过度使用 useEffect

问题：在组件中过度使用 useEffect，导致逻辑分散且难以维护。

useEffect(() => {
  fetchData().then(setData);
}, []);

useEffect(() => {
  if (data) {
    processData(data);
  }
}, [data]);

解决方案：将相关的逻辑合并到一个 useEffect 中，或者将逻辑抽取到自定义钩子中。

useEffect(() => {
  fetchData().then((data) => {
    setData(data);
    processData(data);
  });
}, []);

7. 缺乏组件复用

问题：相似的组件逻辑在多个地方重复实现，导致代码冗余和维护困难。

解决方案：将可复用的逻辑抽取到自定义组件或钩子中。

function useFetchData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then((response) => response.json()).then(setData);
  }, [url]);
  return data;
}

总结

代码异味	问题描述	解决方案
臃肿的组件	组件承担过多职责，难以维护。	拆分为更小、更专注的子组件。
属性钻取	在多个组件层级之间传递大量属性。	使用组合或上下文（Context）共享数据。
嵌套三元运算符	复杂的条件判断导致代码可读性差。	使用辅助函数或 switch 语句替代嵌套三元运算符。
重复逻辑	在多个组件或函数中重复相同的逻辑代码。	将重复逻辑抽取到独立函数或自定义钩子中。
过多的状态	直接管理派生状态，导致状态关系复杂。	使用派生状态，直接从原始状态计算派生值。
过度使用 useEffect	逻辑分散且难以维护。	合并相关逻辑或抽取到自定义钩子中。
缺乏组件复用	相似的组件逻辑在多个地方重复实现。	将可复用逻辑抽取到自定义组件或钩子中。

通过识别并解决这些代码异味，可以显著提升 React 应用的可读性、可维护性和性能。