React井字棋中handleClick提前返回的两个条件为何表现不同？

这俩条件虽然写在同一个if判断里，但触发逻辑和影响范围完全不一样：

• winner条件：winner是整个棋盘的全局状态，一旦决出胜负，这个值就会被设为'X'或'O'。之后不管你点击哪个格子，进入handleClick函数时第一个条件就会成立，直接return终止函数，所以所有格子的点击都会被禁止。
• squares[i]条件：squares[i]只是你当前点击的那个格子的状态，只有当这个格子已经被填充（有'X'或'O'）时，这个条件才会成立，触发return让当前这次点击无效。但如果你点的是空白格子，这个条件不满足，函数会继续执行后续的落子逻辑，其他空白格子依然可以正常点击。

举个实际场景：

1. 当棋盘已经有三个X连成线时，winner的值是'X'，此时不管点哪个格子，if (winner || squares[i])的第一个条件都成立，直接返回，所有操作都失效。
2. 还没分出胜负时，点击一个已经有O的格子，winner是null，但squares[i]是'O'（不为空），所以返回，这次点击无效；但点击空白格子时，squares[i]是null，条件不触发，就能正常落子。

简单说就是：winner管全局，只要它存在，所有点击都被拦；squares[i]只管当前点击的那个格子，只有这个格子被占了才拦这次操作，其他格子不受影响。

内容的提问来源于stack exchange，提问作者Janessa Bao Tran