javascript - 将calculateWinner() 设为辅助函数而不是组件的理由是什么？

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 5 年前。

Improve this question

我正在关注官方 React 教程，该教程描述了一个辅助函数，用于检查圈与十字游戏(井字游戏)的获胜组合。

它通过检查组件状态中是否存在获胜组合来实现此目的，并返回获胜 X/O 或 null 对象:

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

https://reactjs.org/tutorial/tutorial.html#declaring-a-winner

我的问题:使calculateWinner()成为辅助函数而不是Board组件或功能组件上的方法的合理性是什么？

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

Answer 1

Is it due to the separation on concerns?

是的。将该函数作为 Board 上的方法是没有意义的，因为它不以任何方式访问 Board。