React 16中无状态函数与类组件的性能对比及选型疑问

Great question! Let's cut through the noise and get straight to what matters for React 16 and later versions.

Performance Difference in React 16 #

• Gone are the days where SFCs had a clear performance edge over class components. In early React versions (pre-16), class components carried extra overhead from instance creation, lifecycle methods, and internal React bookkeeping that SFCs avoided. But React 16's Fiber architecture and subsequent optimizations (especially with the introduction of Hooks in 16.8) narrowed this gap to near-invisibility.
• React now handles SFCs with Hooks almost as efficiently as class components. The small remaining differences are negligible for most real-world apps—you'd need to render thousands of components in a tight loop to even notice a blip, which is rarely the case in typical UIs.

Should You Distinguish Between Them Only for Performance? #

Absolutely not. Here's why:

• Code clarity and maintainability should drive your choice, not tiny performance gains. SFCs paired with Hooks offer a more concise, modular way to write components—you can split logic into reusable custom Hooks, avoid the boilerplate of class syntax, and keep related code grouped together.
• Use cases matter more than performance labels:
  • If you need a simple, stateless component that just renders UI based on props, SFCs are still a clean choice.
  • If you need advanced lifecycle behavior (though Hooks can cover most of this now) or direct access to a component instance (via ref), class components might still be useful, but these scenarios are becoming rarer.
• Premature optimization is a trap. Worrying about SFC vs class component performance upfront is almost always a waste of time. Focus on writing clean, readable code first. If you later encounter performance issues, use React DevTools' Profiler to identify bottlenecks—chances are, the problem isn't whether you used a function or class component.

A Quick Example #

Instead of picking SFCs for performance, choose them for simplicity:

// Clean SFC with Hooks (React 16.8+)
function UserProfile({ user }) {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchUserDetails(user.id).then(() => setIsLoading(false));
  }, [user.id]);

  if (isLoading) return <Spinner />;
  return <div>{user.name}</div>;
}

This is just as performant as an equivalent class component, but far less verbose and easier to follow.

内容的提问来源于stack exchange，提问作者pungggi