为何将calculateWinner()设为辅助函数而非React组件？

Question #

I'm working through the official React tutorial, which introduces a helper function calculateWinner() for the Tic-tac-toe (Noughts & Crosses) game. This function checks winning combinations from the component's state and returns the winner ('X'/'O') or null:

// Board component code
const winner = calculateWinner(this.state.squares);

// Helper function code
function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

Why is calculateWinner() designed as a helper function instead of a React component?

Answer #

Great question! Let’s break down why this makes way more sense as a helper function rather than a component:

• It has no UI rendering responsibility
  React components exist first and foremost to return JSX (i.e., render UI elements). calculateWinner() takes an array, runs a logical check, and returns a simple value—zero of its job involves drawing something on the screen. Turning it into a component would force us to fit it into React’s lifecycle system for no reason at all.

• It’s pure, reusable logic
  This is a textbook pure function: given the same squares input, it always returns the same output with no side effects. If later we wanted to reuse this winner-checking logic elsewhere (like a game stats panel), we can just import and call it directly. If it were a component, we’d have to jump through hoops like passing props or using context to access that core logic—when all we need is a straightforward calculation.

• It keeps components focused
  The Board component’s main job is to manage game state, render the square grid, and handle user clicks. Extracting the winner-checking logic into a helper keeps Board clean and aligned with the single responsibility principle—each piece of code does one thing well.

• It avoids unnecessary component overhead
  React components come with inherent overhead: lifecycle methods, potential state management, and mount/unmount processes. Since calculateWinner() doesn’t need any of these, making it a component would add unneeded complexity and performance bloat for zero benefit.

At the end of the day, helper functions are for logic that doesn’t touch UI, while components are for building and managing UI. This separation keeps your code organized, maintainable, and easier to debug!

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