Javascript 让calculateWinner（）成为辅助函数而不是组件的基本原理是什么？

我遵循官方的React教程，它描述了一个辅助函数，用于检查Noughts&CrossGame Tic tac toe的成功组合

它通过检查components状态中是否存在获胜组合来执行此操作，并返回获胜的X/O或空对象：

//Board component
return{
    const winner = calculateWinner(this.state.squares);
}

//helper function
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;
}      

我的问题：让calculateWinner成为辅助函数而不是板组件或功能组件上的方法的理由是什么

是否由于关注点分离，即功能不直接影响UI

这是因为在关注点上的分离吗

---

对。将该函数作为一种方法放在板上是没有意义的，因为它不会以任何方式访问板。

imo。这是一个私有的实现细节。它将来可能会改变，甚至完全过时。您不想将此函数公开给代码的其他部分，他们可能会开始使用它；然后，在更改此实现时必须小心，它的所有行为（包括/尤其是潜在的怪癖）都保持不变，否则某些依赖代码可能会中断。